Custom react table / Storybook User Guide

Custom-react-table 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.

Desktop Version:

Mobile Version:

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

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

or

yarn add @maherunlocker/custom-react-table

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

How to use

import { DynamicTable } from @maherunlocker/custom-react-table

//this the format of object if you need to add custom columns to table with your personal jsx
interface customColumnProps {
  indexOFColumn: number;  //position of column to insert it 
  columnName: string;    //name of column 
  customJsx:  React.ReactNode;;   //react componant 
}

let arrayOfCustomColumns: customColumnProps[] = [];


function customJsxComponent(props: any) {
  return (
    <div className='w-100 d-flex justify-content-center'>
      <div className='dropdown'>
        <button
          id='dropdownMenuButton1'
          data-bs-toggle='dropdown'
          // className=" dropdown-toggle"
        >
          test
        </button>
        <div className='dropdown-menu' aria-labelledby='dropdownMenuButton'>
          <div className='dropdown-item' onClick={() => console.log({ props })}>
            react
          </div>
          <div className='dropdown-item'>table</div>
        </div>
      </div>
    </div>
  );
}


arrayOfCustomColumns.push(
  { indexOFColumn: 0, columnName: 'columnName1', customJsx: SelectAccountDropdown2 },
  { indexOFColumn: 2, columnName: 'columnName2', customJsx: SelectAccountDropdown }
);




export default function App(): JSX.Element {
  const [filterActive, setLocalFilterActive] = React.useState<boolean>(false);
  const [selectedRows, setSelectedRows] = React.useState<any[]>([]);
  const [dataIsUpdated, setDataIsUpdated] = React.useState<boolean | number>(false);
  return (
    <>
      <DynamicTable
        //put your backed api url it's obligation  to get your date from api
        
        url='http://localhost:4000/client'
        // url='http://localhost:4000/cards'

        //optionnal props
         name="mytable"
        // --->here for add custom component in the end of table
        actionColumn={SelectAccountDropdown}
        // --->here you can add component side Filter Button
        customJsxSideFilterButton={<FilterSideComponent />}
        // --->here for grouping columns with same name
        canGroupBy
        // --->here for sorting table
        canSort
        // --->here for resizing with of column
        canResize
        // --->here for row and subrows
        canExpand
        // --->here showing checkbox in the begin of RowTable with return you the checked rows
        canSelect
        setSelectedRows={setSelectedRows}
        // --->here showing global filter input on the top of table
        showGlobalFilter
        // --->here showing  filter button  on the top of table
        showFilter
        filterActive={filterActive}
        setLocalFilterActive={setLocalFilterActive}
        // --->here add action header with delete and duplicate
        canDeleteOrDuplicate
        
        // --->here you can add any column to the table in the specified place with custom name and customjsx
        arrayOfCustomColumns={arrayOfCustomColumns}
        // --->here  if you don't have any other click in row you can use to get clicked row details
        onClick={(row: any) => console.log(row.original)}

        // when you update your backend set dataIsUpdated to true to render table
        setDataIsUpdated={setDataIsUpdated}
        dataIsUpdated={dataIsUpdated}
        // if you need your table is elevated in his parent 
        elevationTable={8}
        //this for let you modify the height of the table and min height you can put number or string  or calc() function of css
       [ NB: for maxHeight must be less than 100%] 
        minHeight='calc(100% - 276px)'
        maxHeight={'200px'}

      />
      <p>Selected Rows: {selectedRows.length}</p>
      <pre>
        <code>
          {JSON.stringify(
            {
              selectedRows,
            },
            null,
            2
          )}
        </code>
      </pre>
    </>
  );
}

other info

---> if you need click on row and click on custom cell add to your custom jsx onClick={(e) => { put here your function; e.stopPropagation(); }} --->

Example for data with expand

. type of response must be like this:

"person": {
  //here list of visible header colums
    "structure": [
      "id",
      "name",
      "lastName"
      "age"
    ],
    //here your data 
    "data": [
      {
        "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