use-sortable

use-sortable

sort & search & book-mark functionality with React Hooks.

Installation

npm

npm i use-sortable

yarn

yarn add use-sortable

Usage

import useSortable from "use-sortable";
import Data from "data.json"

function Table() {
  const { items, requestSort, requestSearch, requestBookMark } = useSortable(Data)

  return (
    <>
      <div>
        <div>
          <label>name</label>
          <input 
            onChange={(e) => requestSearch(e.target.name, e.target.value)} 
            name="name"
          />
        </div>
        <div>
          <label>date</label>
          <input 
            onChange={(e) => requestSearch(e.target.name, e.target.value)}
            name="date" 
          />
        </div>
        <div>
          <label>ad name</label>
          <input 
            onChange={(e) => requestSearch(e.target.name, e.target.value)}
            name="title"
          />
        </div>
        <div>
          <label>field</label>
          <select 
            onChange={(e) => requestSearch(e.target.name, e.target.value)}
            name="field"
          >
            <option value="title">title</option>
            <option value="price">price</option>
          </select>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <td onClick={() => requestSort('name')}>
              name
            </td>
            <td onClick={() => requestSort('date')}>
              date
            </td>
            <td onClick={() => requestSort('title')}>
              ad name
            </td>
            <td onClick={() => requestSort('field')}>
              field
            </td>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => 
            <tr onClick={() => requestBookMark(item.id)} key={item.id}>
              <td>{item.name}</td>
              <td>{item.date}</td>
              <td>{item.title}</td>
              <td>{item.field}</td>
            </tr>
          )}
        </tbody>
      </table>
    </>
  )
}

export default Table

API

useSortable

  const [state, actions] = useSortable(initialData)

state

Type: Array

Key	Type	Description
items	Array	the result Array.

actions

Type: function

Key	Type	Description
requestSort	function	Assign a new value to items sorted by key and direction. Supports an optional comparator.
requestSearch	function	Assign a new value to items searched by search and value.
requestBookMark	function	BookMark item and set it to of items array

Config

The second argument of useSortable accepts an optional configuration object:

Key	Type	Description
disableUrlParams	boolean	Disable URL parameter synchronization.
disableLocalStorage	boolean	Disable bookmark persistence in localStorage.
onBookmarksChange	function	Callback fired whenever the bookmark list changes.

Related repo

• spr021/useSortable

License

MIT spr021