RDataTable

A React component for rendering a data table with sorting, searching, and pagination.

Installation

npm install rdatatable

Usage

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.