0.0.4 • Published 7 months ago
rdatatable v0.0.4
RDataTable
A React component for rendering a data table with sorting, searching, and pagination.
Installation
npm install rdatatableUsage
import RDataTable from 'rdatatable';
import 'rdatatable/index.css';
const data = [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Doe', age: 25 },
];
const columns = [
{ name: 'ID', key: 'id' },
{ name: 'Name', key: 'name' },
{ name: 'Age', key: 'age' },
];
<RDataTable data={data} columns={columns} />;Props
| Prop | Type | Description | Default |
|---|---|---|---|
data | any[] | The data to render in the table. | Required |
columns | Column[] | An array of column definitions. | Required |
searchable | boolean or { currentPageOnly?: boolean, defaultValue?: string, fromPage?: number, toPage?: number } | Whether or not to enable searching. If an object is passed, it can be used to specify the following options: |
* `currentPageOnly`: Whether to only search the current page of data.
* `defaultValue`: The default search value.
* `fromPage`: The start page to search from.
* `toPage`: The end page to search to.| Prop | Type | Description | Default |
|---|---|---|---|
hideIndex | boolean | Whether or not to hide the index column. | false |
pageSize | number | The number of rows to display per page. | 10 |
column props
| Property | Type | Description |
|---|---|---|
name | string | The name of the column. |
key | string | The unique key of the column. This is used to identify the column in the data. |
render | (value: any) => JSX.Element | A function that renders the content of the column cell. |
filter | boolean | Whether or not to enable filtering on the column. |
sort | boolean | Whether or not to enable sorting on the column. |
defaultSort | 'asc' or 'desc' | The default sort order for the column. |
Example:
const columns = [
{ name: 'ID', key: 'id' },
{ name: 'Name', key: 'name', render: (value) => <a href="#">{value}</a> },
{ name: 'Age', key: 'age', sort: true },
{
name: 'Country',
key: 'country',
},
];Basic Example
import RDataTable from 'm-data-table';
const data = [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Doe', age: 25 },
];
const columns = [
{ name: 'ID', key: 'id' },
{ name: 'Name', key: 'name' },
{ name: 'Age', key: 'age' },
];
<RDataTable data={data} columns={columns} />;This will render a basic data table with the following features:
- Sorting
- Searching
- Pagination
Advanced Example
import RDataTable from 'm-data-table';
const data = [
{ id: 1, name: 'John Doe', age: 30, country: 'United States' },
{ id: 2, name: 'Jane Doe', age: 25, country: 'Canada' },
{ id: 3, name: 'Peter Parker', age: 20, country: 'United States' },
];
const columns = [
{ name: 'ID', key: 'id' },
{ name: 'Name', key: 'name' },
{ name: 'Age', key: 'age' },
{
name: 'Country',
key: 'country',
},
];
<RDataTable data={data} columns={columns} searchable={true} />;This will render a data table with the following features:
- Sorting
- Searching on all columns
License
RDataTable is licensed under the MIT license.