DEV Community

Md Wahiduzzaman Emon
Md Wahiduzzaman Emon

Posted on • Updated on

React Dynamic Nested Table

GitHub logo MdWahiduzzamanEmon / React_Dynamic_Nested_Table

Dynamic nested and filtered table

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 to install react dynamic nested table.(please read the documentation first)

npm i react_dynamic_nested_table
Enter fullscreen mode Exit fullscreen mode
yarn add react_dynamic_nested_table
Enter fullscreen mode Exit fullscreen mode
Screen.Recording.2022-11-12.at.11.45.31.PM.mov

Screenshot 2022-11-12 at 11 36 13 PM

Usage

import MainTable, { FilterTableColumn } from 'react_dynamic_nested_table';
Enter fullscreen mode Exit fullscreen mode

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} />
Enter fullscreen mode Exit fullscreen mode
# How to use dynamic table :
 const titles = [
      
Enter fullscreen mode Exit fullscreen mode

react_dynamic_nested_table - npm

React Dynamic Nested Table. Latest version: 1.3.9, last published: 5 months ago. Start using react_dynamic_nested_table in your project by running `npm i react_dynamic_nested_table`. There are no other projects in the npm registry using react_dynamic_nested_table.

favicon npmjs.com

Top comments (0)