1.0.3 • Published 1 year ago
function params
| param | desription |
|---|
| data | should be an array of objects |
| sortmethod | "ASC" , "DSC" , "LRU" , "MRU" |
| key | key in a object according to which the sorting should be carried |
return values
| param | desription |
|---|
| sorteddata | data after being sort |
| accessdata | call this function with the id while accessing any rendered element for LRU and MRU |
| changeMethod | to change the sort method |
| changeKey | to change the sort key |
example
import { useState } from "react";
import Table from "react-bootstrap/Table";
import datax from "./data";
import "bootstrap/dist/css/bootstrap.min.css";
import Form from "react-bootstrap/Form";
import useSortabledata from "./sort";
const App = () => {
const { sorteddata,accessData,setKey,setMethod } = useSortabledata(datax, "ASC", "age");
return (
<div>
<div>
<div>
<Form.Select
onChange={(e) => setMethod(e.target.value)}
aria-label="Default select example"
>
<option value="ASC">Ascending</option>
<option value="DSC">Descending</option>
<option value="LRU">Least recently used</option>
<option value="MRU">Most recently used</option>
</Form.Select>
</div>
</div>
<Table striped bordered hover>
<thead>
<tr>
<th onClick={() => setKey("id")} style={{ cursor: "pointer" }}>
id
</th>
<th onClick={() => setKey("name")} style={{ cursor: "pointer" }}>
name
</th>
<th onClick={() => setKey("age")} style={{ cursor: "pointer" }}>
age
</th>
</tr>
</thead>
<tbody>
{sorteddata.map((elem, idx) => {
return (
<tr key={idx} onClick={()=>accessData(idx)}>
<td>{elem.id}</td>
<td>{elem.name}</td>
<td>{elem.age}</td>
</tr>
);
})}
</tbody>
</Table>
</div>
);
};
export default App;