@maherunlocker/custom-react-table
Version:
**Custom-react-table** is based on <code>React-Table v7</code>: 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*
237 lines (183 loc) • 6.7 kB
Markdown
**Custom-react-table** is based on <code>React-Table v7</code>: 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:**
> https://github.com/atefBB
> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
You can install React Table with [NPM](https://npmjs.com),
[](https://yarnpkg.com)
```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.
```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
}
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>
</>
);
}
```
---> if you need click on row and click on custom cell add to your custom jsx `onClick={(e) => {
put here your function;
e.stopPropagation();
}}`
--->
. 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": []
}
]
}
```
`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
* `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