Custom react-table-component / Storybook User Guide
react-table-component is based from React-Table v7: collection of hooks for building powerful tables and datagrid experiences. These hooks are lightweight, composable, and ultra-extensible, but do not render any markup or styles for you. This effectively means that React Table is a “headless” UI library
If you’re new to TypeScript and React, checkout this handy cheatsheet
You can install React Table with NPM,
Yarn, or a good ol’
npm install @maherunlocker/react-table-component --save
yarn add @maherunlocker/react-table-component
@maherunlocker/react-table-component is compatible with React v16.8+ and works with ReactDOM and React Native.
How to use
Run inside another terminal:
This loads the stories from
NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
Dynamictable from @maherunlocker/react-table-component
//put your backed api url
tsconfig.json is set up to interpret
esnext types, as well as
jsx. Adjust according to your needs.
This example uses:
useGroupByto enable header groups
useFiltersfor per-column filters. Note that filters are displayed in a separate filter dropdown rather than being embedded in each column header.
useSortByfor column sorting
useExpandedto allow expansion of grouped columns
useFlexLayoutfor a scalable full width table
useResizeColumnsfor resizable columns
useRowSelectfor row selection