https://github.com/shreenidhihd/react-chakra-table-enhanced
Enhanced Chakra UI Table for React: Elevate your React projects with advanced features like dynamic pagination, per-column/global search, and customizable rows. A seamless, feature-rich extension to Chakra UI's basic table, tailor-made for easy integration and customization.
https://github.com/shreenidhihd/react-chakra-table-enhanced
chakra-ui chakra-ui-react chakra-ui-table dynamic html reactjs table
Last synced: 5 months ago
JSON representation
Enhanced Chakra UI Table for React: Elevate your React projects with advanced features like dynamic pagination, per-column/global search, and customizable rows. A seamless, feature-rich extension to Chakra UI's basic table, tailor-made for easy integration and customization.
- Host: GitHub
- URL: https://github.com/shreenidhihd/react-chakra-table-enhanced
- Owner: ShreenidhiHD
- License: mit
- Created: 2023-11-19T07:56:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-19T10:27:32.000Z (over 2 years ago)
- Last Synced: 2024-01-28T14:41:21.403Z (over 2 years ago)
- Topics: chakra-ui, chakra-ui-react, chakra-ui-table, dynamic, html, reactjs, table
- Language: JavaScript
- Homepage:
- Size: 196 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Chakra Enhanced Table
This project provides a feature-rich table component built with React and Chakra UI.
## Getting Started
1. Fork or clone this repository.
2. Install the dependencies:
```npm install```
3. Start the application:
```npm start```
## Features
The `DynamicTable` component includes the following features:
- Pagination
- Export to CSV
- Global and field-specific search
- Sorting
- Customizable table height, background color, and text color
- Optional serial numbers
## Usage
In `Table.js`, we pass the data and configuration to the `DynamicTable` component:
```
```
Here's what each prop does:
- `data`: The data to display in the table.
- `columns`: The columns of the table.
- `rowsPerPageInitial`: The initial number of rows per page.
- `enableExport`: Whether to enable exporting to CSV.
- `enableGlobalSearch`: Whether to enable global search.
- `enableFieldSearch`: Whether to enable field-specific search.
- `fieldSearchPosition`: The position of the field-specific search bar ('top' or 'bottom').
- `tableHeight`: The height of the table.
- `enableSorting`: Whether to enable sorting.
- `bgcolor`: The background color of the table.
- `textcolor`: The text color of the table.
- `enableSerialNumbers`: Whether to enable serial numbers.
Feel free to customize these props as needed.