rdatatable

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.