react-sort-and-render

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;