https://github.com/aimun-naharr/react-dynamic-data-table

A dynamic datatable for managing your data conveniently
https://github.com/aimun-naharr/react-dynamic-data-table

Last synced: 15 days ago
JSON representation

A dynamic datatable for managing your data conveniently

• Host: GitHub
• URL: https://github.com/aimun-naharr/react-dynamic-data-table
• Owner: aimun-naharr
• Created: 2023-11-21T09:58:40.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-24T07:41:13.000Z (11 months ago)
• Last Synced: 2025-01-03T18:04:11.835Z (17 days ago)
• Language: JavaScript
• Homepage:
• Size: 1.45 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# React Dynamic Datatable

 Welcome to React Dynamic DataTable, a powerful and flexible React data table library designed to supercharge your data presentation in web applications. Whether you're building a robust dashboard, a comprehensive management system, or a data-driven application, our library empowers you with a feature-rich and customizable data table component.

 ## Key features

* Resizable Columns

* Fixed Columns

* Sorting

* Pagination

* Selectable rows

* Responsive

* Expandable rows

 ### Installation

 ```

npm i react-dynamic-data-table-component

```

### Let's try to use it

```

import DynamicTable from 'react-dynamic-data-table-component';

const columns = [

    {

        id: 'nameId', //must provide a id

        name: "Name",

        selector: "name",

        sortable: true,

        width: "130px",

        isFixed: true,

        unResizable: true

    },

    {

        id: 'addressId',

        name: "Address",

         cell: (row) => row.address,

        sortable: true,

        width: "130px",

    }

]

const data=[

  {

    "id": 1,

    "name": "John Doe",

    "age": 25,

    "email": "[email protected]",

    "address": "142 Center Street, Los Angeles, CA 90012",

    "city": "Anytown",

    "country": "USA",

   

  },

  {

    "id": 2,

    "name": "Alice Smith",

    "age": 30,

    "email": "[email protected]",

    "address": "456 Elm St",

    "city": "Otherville",

    "country": "Canada",

   

  }

]

```

### Selectable rows

```

const handleSelectedRows=()=>{}

```

### Expandable Rows

```

const ExpandableComponent=()=>{}

```