Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lehmax/datatable
A React Data Table component inspired by DataTables library, featuring sorting, filtering, pagination, and customizable columns for web applications.
https://github.com/lehmax/datatable
project react training typescript wip-do-not-use
Last synced: 2 months ago
JSON representation
A React Data Table component inspired by DataTables library, featuring sorting, filtering, pagination, and customizable columns for web applications.
- Host: GitHub
- URL: https://github.com/lehmax/datatable
- Owner: lehmax
- License: mit
- Created: 2024-08-09T09:55:53.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T06:12:55.000Z (3 months ago)
- Last Synced: 2024-11-08T19:53:05.256Z (3 months ago)
- Topics: project, react, training, typescript, wip-do-not-use
- Language: TypeScript
- Homepage:
- Size: 464 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
DataTable
> ! Note: This project is not ready for production use. !
## Introduction
`DataTable` is a simple table component for React with search, pagination, and ordering features.
## Installation
```sh
npm i @lehmax/datatable
```
```sh
yarn add @lehmax/datatable
```
```sh
pnpm add @lehmax/datatable
```
## Usage
```jsx
import DataTable from "@lehmax/datatable";
;
```
```jsx
import DataTable from "@lehmax/datatable";
;
```
### Props
| **Property** | **Type** |**Default** | **Required** | **Description** |
|--------------------|--------------------|------------------|--------------|-------------------------------------------------------------------------------------------|
| `title` | `string` | | No | The title of the data table. |
| `data` | `array of objects` | | Yes | The data to display in the table. Each object should have an `id` field and dynamic keys. |
| `data[].id` | `string` | | Yes | The unique identifier for each data entry. | |
| `columns` | `array of objects` | | Yes | The columns to display in the table. Each object should have a `label` and an `id`. |
| `columns[].label` | `string` | | Yes | The label of the column to display in the table header. |
| `columns[].id` | `string` | | Yes | The identifier corresponding to the key in the data object. |
| `searchColumns` | `string[]` or `"all"` | `"all"` | No | The columns to search on. `"all"` searches across all columns. |
| `ordering` | `boolean` | `true` | No | If `true`, enables column sorting. |
| `search` | `boolean` | `true` | No | If `true`, enables search functionality in the table. |
| `paginate` | `boolean` | `true` | No | If `true`, enables pagination of the data in the table. |
| `entriesPerPage` | `number` | `10` | No | Number of entries per page if pagination is enabled. |
## License
[MIT Licensed.](./LICENSE)
inspired by [DataTables](https://datatables.net/)