react-sort-and-render
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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;

Dependencies (0)

    Dev Dependencies (18)

    Package Sidebar

    Install

    npm i react-sort-and-render

    Weekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    16.9 kB

    Total Files

    15

    Last publish

    Collaborators

    • naveenkumarmd