{"id":20324400,"url":"https://github.com/mdwahiduzzamanemon/react_dynamic_nested_table","last_synced_at":"2026-04-02T02:16:59.252Z","repository":{"id":65431542,"uuid":"565192874","full_name":"MdWahiduzzamanEmon/React_Dynamic_Nested_Table","owner":"MdWahiduzzamanEmon","description":"Dynamic nested and filtered table ","archived":false,"fork":false,"pushed_at":"2024-10-27T04:57:56.000Z","size":956,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T19:55:44.177Z","etag":null,"topics":["dynamic-table","filter","react","react-table"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react_dynamic_nested_table","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MdWahiduzzamanEmon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-12T16:19:54.000Z","updated_at":"2024-09-23T21:14:10.000Z","dependencies_parsed_at":"2024-11-02T05:02:26.316Z","dependency_job_id":null,"html_url":"https://github.com/MdWahiduzzamanEmon/React_Dynamic_Nested_Table","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.5,"last_synced_commit":"64e0520b27e50cb04c14d02877eb6869866cba56"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdWahiduzzamanEmon%2FReact_Dynamic_Nested_Table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdWahiduzzamanEmon%2FReact_Dynamic_Nested_Table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdWahiduzzamanEmon%2FReact_Dynamic_Nested_Table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MdWahiduzzamanEmon%2FReact_Dynamic_Nested_Table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MdWahiduzzamanEmon","download_url":"https://codeload.github.com/MdWahiduzzamanEmon/React_Dynamic_Nested_Table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248468391,"owners_count":21108805,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dynamic-table","filter","react","react-table"],"created_at":"2024-11-14T19:33:51.618Z","updated_at":"2026-04-02T02:16:59.196Z","avatar_url":"https://github.com/MdWahiduzzamanEmon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Dynamic Nested Table\n\nThis is a table component that is so powerful to create a nested table, and also can filter(show-hide) columns.\n\n## Installation\n\nUse the package manager [npm/yarn](https://www.npmjs.com/) to install react dynamic nested table.(please read the documentation first)\n\n```bash\nnpm i react_dynamic_nested_table\n\n```\n\n```bash\nyarn add react_dynamic_nested_table\n```\n\nhttps://user-images.githubusercontent.com/83487057/201487770-3e2cdb5d-5d3a-4288-89a4-3c39d0f1724d.mov\n\n\u003cimg width=\"1385\" alt=\"Screenshot 2022-11-12 at 11 36 13 PM\" src=\"https://user-images.githubusercontent.com/83487057/201488206-8c79113e-248e-4f37-949e-b47b3cbc838d.png\"\u003e\n\n## Usage\n\n```bash\nimport MainTable, { FilterTableColumn } from 'react_dynamic_nested_table';\n\n```\n\n## How to use table component\n\n```bash\nHow to use a simple table :\n\n const titles = [\n      'Name',\n      'Age',\n      'Address',\n      'Phone',\n    ]\n\nconst data = [\n      {\n        name: 'John',\n        age: 20,\n        address: 'Jessore',\n        phone: '123456789',\n\n      },\n      {\n        name: 'Doe',\n        age: 30,\n        address: 'Dhaka',\n        phone: '123456789',\n      }\n    ]\n\n\u003cMainTable data={data} titles={titles} /\u003e\n```\n\n```bash\n# How to use dynamic table :\n\n const titles = [\n      'Name',\n      'Age',\n      'Address',\n      'Phone',\n    ]\n\nconst data = [\n      {\n        name: 'John',\n        age: 20,\n        address: 'Jessore',\n        phone: '123456789',\n\n      },\n      {\n        name: 'Doe',\n        age: 30,\n        address: 'Dhaka',\n        phone: '123456789',\n      }\n    ]\n\nconst newData = data?.map((item) =\u003e {\n      return {\n        name: item.name,\n        age: item.age,\n        address: item.address,\n        phone: item.phone\n      }\n    }\n\n\u003cMainTable data={newData} titles={titles} /\u003e\n\n```\n\n```bash\nHow to use Filter in a table :\n\n const titles = [\n      'Name',\n      'Age',\n      'Address',\n      'Phone',\n    ]\n\nconst [columnPreviousDataId, setColumnPreviousDataId] = React.useState(\"\");\nconst [columnPreviousData, setColumnPreviousData] = React.useState([]);\nconst [tableTitles, setTableTitles] = React.useState([...titles]);\nconst [isShowTableColumn, setIsShowTableColumn] = React.useState({\n      Name: true,\n      Age: true,\n      Address: true,\n      Phone: true\n    });\n\n### 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)\n\nconst data = [\n      {\n        name: 'John',\n        age: 20,\n        address: 'Jessore',\n        phone: '123456789',\n\n      },\n      {\n        name: 'Doe',\n        age: 30,\n        address: 'Dhaka',\n        phone: '123456789',\n      }\n    ]\n\nconst newData = data?.map((item) =\u003e {\n      return {\n        ...isShowTableColumn.Name \u0026\u0026 { Name: item.name },\n        ...isShowTableColumn.Age \u0026\u0026 { Age: item.age },\n        ...isShowTableColumn.Address \u0026\u0026 { Address: item.address },\n        ...isShowTableColumn.Phone \u0026\u0026 { Phone: item.phone },\n      }\n    }\n\nconst handleFilterPostData = async (columndata) =\u003e {\n      #  console.log(columnData)\n      #  post and put column data from here\n    }\n\n### you can get data from API and set your state to use\n\n### 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\n\n \u003cFilterTableColumn\n            tableTitles={tableTitles}\n            setTableTitles={setTableTitles}\n            isShowTableColumn={isShowTableColumn}\n            setIsShowTableColumn={setIsShowTableColumn}\n            titles={titles}\n            handlePostData={handlePostData}\n          /\u003e\n\n### table component with filter true props to add filter\n\n\u003c MainTable data={newData} filter={true} /\u003e\n\n```\n\n```bash\n\n## Available table props are\n\n| Props             | Types   | Default Value      | Description              |\n| ----------------- | ------- | ------------------ | ------------------------ |\n| data              | Array   | []                 | Data for table.          |\n| titles            | Array   | []                 | Table header title.      |\n| filter            | Boolean | false              | Filter table column.     |\n| tableHeaderDesign | Object  | color: '#111936'   | Table header design.     |\n| align             | String  | left               | Table header text align. |\n| style             | Object  | {}                 | Table style.             |\n| dense             | string  | padding:\"0.875rem\" | Table padding.           |\n\n## Available filter props are\n\n| Props                | Types   | Default Value | Description             |\n| -------------------- | ------- | ------------- | ----------------------- |\n| tableTitles          | Array   | []            | Table header title.     |\n| setTableTitles       | Func    |               | Set table header title. |\n| isShowTableColumn    | Boolean | true          | Show table column.      |\n| setIsShowTableColumn | Func    |               | Set show table column.  |\n| titles               | Array   | []            | Table header title.     |\n| handlePostData       | Func    |               | Handle post data.       |\n\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Author\n\n- \u003cimg align=\"left\" src=\"https://user-images.githubusercontent.com/83487057/224383152-3d83875a-6e49-46c2-be8f-5d0627e0a27e.png\" alt=\"md-wahiduzzaman-emon\" height=\"40\" width=\"40\" /\u003e [Md Wahiduzzaman Emon]\n\n## Contributing\n\n- Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n* Please make sure to update tests as appropriate.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdwahiduzzamanemon%2Freact_dynamic_nested_table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdwahiduzzamanemon%2Freact_dynamic_nested_table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdwahiduzzamanemon%2Freact_dynamic_nested_table/lists"}