Lightweight and customizable data grid for React applications from 16.8 version.
Now library is in progress.
$ npm install react-hooks-grid
Test it! Go to live demo with 100 000 rows.
All useGrid's power comes from plugins that can be fully customized to developer's needs. Additionally everyone can add custom plugin for him needs and create powerful data grid.
To create your own plugin go to section useCustomPlugin.
useSorting(column, descending, customSortFn)
- column - initial column choice
- descending - initial order choice, is it descending
- customSortFn - custom function of sorting - customFn(rowA, rowB, column, descending)
- column - sorting by new column
- descending - sorting by new order
Special sorting rules or local difference - if is needed create own sort function and put as customSortFn
Multi column sorting - if multi sorting is needed, only change some parameters. 'column' use as array of column next 'descending' the same and and set your own sort function.
order = 30
- filters - filters for grid. Set object where key will be id of filter and value as object with type of filter and column. See sample below.
- customPredicates - custom predicates for filters. Set object where key will be name of predicate and value as custom predicate function with below structure. You will get filter and row while you should implement predicate condition.
filter => row =>
- filterId - id of filter
- value - new value for filter
order = 20
- size - initial size of page
- index - initial page index
- index - new page index
- size - new size of page
order = 40
Embedded plugin which changing structure of entry data. If you want to create a new plugin, you must remember about structure before or after change.
order = 50
If existing plugins that is not enough. Create your own ;)
Each plugin will be called during the grid update in a certain order. The property order is responsible for this. When you create your own plugin set appropriate order for it.
Below is boilerplate for own plugins.
export const useCustomPlugin = => updateGrid =>
- anyNumberOfParameters - any number of parameters for plugin,
- pluginLogic - all custom logic for that plugin,
- anyOrder - set order for plugin when will be called during update grid,
- modifyGrid - implement function which modify or calculate grid,
- customPublicApi - expose public api for using outside,
- updateGrid - given function for invoke when grid update will be needed. Last step in all exposed functions like setSort, setIndex setSize etc. Don't implement it. Just invoke updateGrid() when it is necessary.