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;