Custom react table By M@HeR

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:

!alt text

Mobile Version:

!alt text

greets to

> https://github.com/atefBB > https://github.com/Iyadchafroud

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

Installation

You can install React Table with NPM,
Yarn

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

or

`sh
yarn add @maherunlocker/custom-react-table
`

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

$3

`jsx



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
filterName?: string;
canFilter?: boolean ;
}

let arrayOfCustomColumns: customColumnProps[] = [];


function customJsxComponent(props: any) {
return (

id='dropdownMenuButton1'
data-bs-toggle='dropdown'
// className=" dropdown-toggle"
>
test

console.log({ props })}>
react

table

);
}


arrayOfCustomColumns.push(

{
indexOFColumn: 1,
columnName: 'custom Cell',
customJsx: SelectAccountDropdown,
filterName: 'Désignation',
canFilter: true,
}
);




export default function App(): JSX.Element {
const [filterActive, setLocalFilterActive] = React.useState(false);
const [selectedRows, setSelectedRows] = React.useState([]);
const [dataIsUpdated, setDataIsUpdated] = React.useState(false);
const [data, setData] = React.useState([]);
return (
<>
//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"
setData={setData} //--->here to return fetched data only
// --->here for add custom component in the end of table
actionColumn={SelectAccountDropdown}
// --->here you can add component side Filter Button
customJsxSideFilterButton={}
// --->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 add custom checkbox without only checked row or subrow without depend his parent row
customSelect
// --->here showing global filter input on the top of table
showGlobalFilter

//----> the props for decaling checkbox on expand mode
canMovedCheckboxLeftOnExpand

// --->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}
// request header to use custom fetching data like language
requestHeader={{"string":"string"}}
// if you need your table is elevated in his parent
elevationTable={8}
defaultHiddenColumns={['maher', 'id', 'Order']}
defaultPaginationValues={[1, 100, 200, 500]}
//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'}

/>

Selected Rows: {selectedRows.length}

        

          {JSON.stringify(

            {

              selectedRows,

            },

            null,

            2

          )}

        

      

);
}

`

$3

if you use vitejs project add thisto main :.

``sh
import "regenerator-runtime/runtime";
`

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

$3

. type of response must be like this:

`js
"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": []
}
]
}
`

$3

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