Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdwahiduzzamanemon/react_dynamic_nested_table
Dynamic nested and filtered table
https://github.com/mdwahiduzzamanemon/react_dynamic_nested_table
dynamic-table filter react react-table
Last synced: about 2 months ago
JSON representation
Dynamic nested and filtered table
- Host: GitHub
- URL: https://github.com/mdwahiduzzamanemon/react_dynamic_nested_table
- Owner: MdWahiduzzamanEmon
- Created: 2022-11-12T16:19:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-27T04:57:56.000Z (2 months ago)
- Last Synced: 2024-10-27T05:42:37.859Z (2 months ago)
- Topics: dynamic-table, filter, react, react-table
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react_dynamic_nested_table
- Size: 770 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Dynamic Nested Table
This is a table component that is so powerful to create a nested table, and also can filter(show-hide) columns.
## Installation
Use the package manager [npm/yarn](https://www.npmjs.com/) to install react dynamic nested table.(please read the documentation first)
```bash
npm i react_dynamic_nested_table
```
```bash
yarn add react_dynamic_nested_table
```
https://user-images.githubusercontent.com/83487057/201487770-3e2cdb5d-5d3a-4288-89a4-3c39d0f1724d.mov
## Usage
```bash
import MainTable, { FilterTableColumn } from 'react_dynamic_nested_table';
```
## How to use table component
```bash
How to use a simple table :
const titles = [
'Name',
'Age',
'Address',
'Phone',
]
const data = [
{
name: 'John',
age: 20,
address: 'Jessore',
phone: '123456789',
},
{
name: 'Doe',
age: 30,
address: 'Dhaka',
phone: '123456789',
}
]
```
```bash
# How to use dynamic table :
const titles = [
'Name',
'Age',
'Address',
'Phone',
]
const data = [
{
name: 'John',
age: 20,
address: 'Jessore',
phone: '123456789',
},
{
name: 'Doe',
age: 30,
address: 'Dhaka',
phone: '123456789',
}
]
const newData = data?.map((item) => {
return {
name: item.name,
age: item.age,
address: item.address,
phone: item.phone
}
}
```
```bash
How to use Filter in a table :
const titles = [
'Name',
'Age',
'Address',
'Phone',
]
const [columnPreviousDataId, setColumnPreviousDataId] = React.useState("");
const [columnPreviousData, setColumnPreviousData] = React.useState([]);
const [tableTitles, setTableTitles] = React.useState([...titles]);
const [isShowTableColumn, setIsShowTableColumn] = React.useState({
Name: true,
Age: true,
Address: true,
Phone: true
});
### N.B: make sure the title name, and table column condition name are the same. Don't use something like this to name your_name. Use instead YourName.It will generate a table header Like this (Your Name)
const data = [
{
name: 'John',
age: 20,
address: 'Jessore',
phone: '123456789',
},
{
name: 'Doe',
age: 30,
address: 'Dhaka',
phone: '123456789',
}
]
const newData = data?.map((item) => {
return {
...isShowTableColumn.Name && { Name: item.name },
...isShowTableColumn.Age && { Age: item.age },
...isShowTableColumn.Address && { Address: item.address },
...isShowTableColumn.Phone && { Phone: item.phone },
}
}
const handleFilterPostData = async (columndata) => {
# console.log(columnData)
# post and put column data from here
}
### you can get data from API and set your state to use
### use this component to add a filter. You can use it and dialog/modal with the button if you want to show it in a dialog/modal
### table component with filter true props to add filter
< MainTable data={newData} filter={true} />
```
```bash
## Available table props are
| Props | Types | Default Value | Description |
| ----------------- | ------- | ------------------ | ------------------------ |
| data | Array | [] | Data for table. |
| titles | Array | [] | Table header title. |
| filter | Boolean | false | Filter table column. |
| tableHeaderDesign | Object | color: '#111936' | Table header design. |
| align | String | left | Table header text align. |
| style | Object | {} | Table style. |
| dense | string | padding:"0.875rem" | Table padding. |
## Available filter props are
| Props | Types | Default Value | Description |
| -------------------- | ------- | ------------- | ----------------------- |
| tableTitles | Array | [] | Table header title. |
| setTableTitles | Func | | Set table header title. |
| isShowTableColumn | Boolean | true | Show table column. |
| setIsShowTableColumn | Func | | Set show table column. |
| titles | Array | [] | Table header title. |
| handlePostData | Func | | Handle post data. |
```
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Author
- 
[Md Wahiduzzaman Emon]
## Contributing
- Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
* Please make sure to update tests as appropriate.