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

This package is compatible with React v16.8+ and works with ReactDOM.

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.

How to use

import Dynamictable from @maherunlocker/react-table-component

<DynamicTable
    //put your backend api url
    url={apiUrl}
    //optionnal props
    actionColumn={<div>put your component</div>}
    canGroupBy
    canSort
    canResize
    canSelect
    canExpand
    ShowGlobalFilter
    ShowFilterbyColomn
    showColomnIcon
  />

Example for data with expand

{
  "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