Installation

npm i react_dynamic_nested_table

yarn add react_dynamic_nested_table

Usage

import MainTable, { FilterTableColumn } from'react_dynamic_nested_table';

How to use table component

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',      }    ]<MainTable data={data} titles={titles} />

# 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      }    }<MainTable data={newData} titles={titles}/>

How to use Filterin 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 <FilterTableColumn            tableTitles={tableTitles}            setTableTitles={setTableTitles}            isShowTableColumn={isShowTableColumn}            setIsShowTableColumn={setIsShowTableColumn}            titles={titles}            handlePostData={handlePostData}          />### table component with filter true props to add filter< MainTable data={newData} filter={true}/>

## Available table props are| Props| Types| Default Value| Description|| -----------------| -------| ------------------| ------------------------|| data| Array| []| Datafor 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

Author

Contributing