@lun7/use-sortable
TypeScript icon, indicating that this package has built-in type declarations

1.5.0 • Public • Published

use-sortable

A simple react hook to help you sort the data for table view and list view

NPM JavaScript Style Guide

Install

npm install --save use-sortable

or

yarn add use-sortable

Usage

Basic

import * as React from "react";

import { useSortable } from "use-sortable";

const sampleData = [
  { name: "John", age: 20 },
  { name: "Jane", age: 21 },
  { name: "Jack", age: 22 },
];

const ExampleA = () => {
  // sort the data by name in ascending order
  const { sorted, setSortKey } = useSortable(sampleData, {
    defaultSortKey: "name",
    defaultSortOrder: "asc",
  });
  return <div>{example}</div>;
};

const ExampleB = () => {
  // sort the data by name in descending order
  const { sorted, setSortKey } = useSortable(sampleData, "name", {
    defaultSortKey: "name",
    defaultSortOrder: "desc",
  });
  return <div>{example}</div>;
};

Changing the sort key

import * as React from "react";

import { useSortable } from "use-sortable";

const sampleData = [
  { name: "John", age: 20 },
  { name: "Jane", age: 21 },
  { name: "Jack", age: 22 },
];

const Example = () => {
  const { sorted, setSortKey } = useSortable(sampleData, {
    defaultSortKey: "name",
    defaultSortOrder: "asc",
  });

  const handleSort = (key: string) => {
    setSortKey(key);
  };

  return <Table data={sorted} onHeaderClicked={handleSort} />;
};

More

Please check the example and [docs] for more details.

Q&A

How to change sort direction

You can change the sort direction by invoking setSortKey again with the same key.

License

MIT © LUN7


This hook is created using create-react-hook.

/@lun7/use-sortable/

    Package Sidebar

    Install

    npm i @lun7/use-sortable

    Weekly Downloads

    0

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • lun7