Custom react-table-component / Storybook User Guide

react-table-component is based on 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

greets to

https://github.com/atefBB

If you’re new to TypeScript and React, checkout this handy cheatsheet

Installation

You can install React Table with NPM, Yarn, or a good ol' <script> via unpkg.com.

npm install @maherunlocker/custom-react-table-component
 --save

or

yarn add @maherunlocker/custom-react-table-component

@maherunlocker/custom-custom-react-table-component

is compatible with React v16.8+ and works with ReactDOM and React Native.

How to use

Storybook

Run inside another terminal:

yarn storybook

This loads the stories from ./stories.

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.

Example

import Dynamictable from @maherunlocker/react-table-component

<DynamicTable //put your backed api url url={apiUrl} //optionnal props actionColumn={put your component} canGroupBy canSort canResize canSelect canExpand />

Example for data with expend

{ "id": 1, "name": "Maher", "lastName": "unlocker", "age": 15, "subRows": [ { "id": 2, "name": "Maher", "lastName": "unlocker", "age": 15, "subRows": [] }, { "id": 3, "name": "Maher", "lastName": "unlocker", "age": 15, "subRows": [] } ] }, { "id": 4, "name": "Maher", "lastName": "unlocker", "age": 15, "subRows": [] }

TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

This example uses:

• useGroupBy to enable header groups
• useFilters for per-column filters. Note that filters are displayed in a separate filter dropdown rather than being embedded in each column header.
• useSortBy for column sorting
• useExpanded to allow expansion of grouped columns
• useFlexLayout for a scalable full width table
• usePagination for pagination
• useResizeColumns for resizable columns
• useRowSelect for row selection