React Table Component

This is an npm package for creating tables in any React web application. With this package, you can create tables with pagination, sorting, and multi level filters. It's an lightweight and easy to use package with responsive design.

Check out the demo page for a live example.

Installation

1npm install react-table-responsive-sb

Usage

1import { ChakraTable } from "react-table-responsive-sb";
2
3const sampleProps = {
4  loading: false,
5  error: null,
6  rowData: [
7    { id: 1, name: 'John Doe', age: 28 },
8    { id: 2, name: 'Jane Smith', age: 34 },
9  ],
10  sortable: true,
11  caption: 'Sample Table',
12  pagination: true,
13  rowsPerPage: 5,
14  paginationLength: 3,
15  filterRowsByColumnGroup: [
16    { column: 'name', values: ['John Doe', 'Jane Smith'] },
17  ],
18  columnsData: [
19    { label: 'id', name: 'ID' },
20    { label: 'name', name: 'Name' },
21    { label: 'age', name: 'Age' },
22  ],
23  tableParentClass: 'custom-parent-class',
24  tableChildClass: 'custom-child-class',
25  disableDefaultScrollStyle: false,
26};
27
28const App = () => (
29    <ChakraTable {...sampleProps} />
30);
31
32export default App;

Props

• loading: Boolean - Default: false. Shows a loading spinner when true.
• error: any - Error object to display if there's an error.
• rowData: Array - Array of objects representing the rows data.
• sortable: Boolean - Default: false. Enables sorting of columns by clicking the column name.
• caption: String - Header for the table. Displays search, total rows, total filtered rows, and filter.
• pagination: Boolean - Default: false. Enables pagination.
• rowsPerPage: Number - Default: 6. Number of rows per page when pagination is enabled.
• paginationLength: Number - Default: 5. Sets the limit for pagination numbers range.
• filterRowsByColumnGroup: Array - Array of objects for filtering rows by column group.
• columnsData: Array - Array of objects representing the columns data.
• tableParentClass: String - Custom class for the table parent.
• tableChildClass: String - Custom class for the table child.
• disableDefaultScrollStyle: Boolean - Default: false. Disables default scroll style.

Feature List / Optional Props

sortable: Boolean, To sort columns by ascending or descending when clicking the column name. This won't work for cell renderer components inside a column. Only for string and numbers

caption: String, This is the header props for the table, default behaviour has no header so headers are visible only when a caption is provided. It displays search, total rows, total filtered rows and filter.

Search Bar: Default disabled. Search will be enabled once captions are provided so its default behaviour depends on captions that enable headers.

pagination: Boolean, Default: Pagination is turned off by default so this prop is required if you want to enable the pagination.

defaultRowsPerPage: Number, By default the rows per page is enabled when pagination is enabled. Default rows per page are 6 if no value is provided.

defaultPaginationLength: Number, these set the limit for pagination numbers range for example a value of 5 will limit displaying 1-5 with next and previous buttons to jump to 6-10 and thus by it goes on till the rows end. The default pagination length is 5 if no value is provided.

filterRowsByColumnGroup: Array of Objects.

Format: [ { column: 'name of column 1', values: [ 'filter list of this column 1', 'multi filters for same columns' ] }, { column: 'name of column 2', values: [ 'filter list of this column 2', 'multi filters for same columns' ] } ].

The default behaviour of filters is disabled if filterRowsByColumnGroup is not provided.

Example: filterRowsByColumnGroup={[{ column: 'status', values: ['failed', 'waiting', 'paid'] }, { column: 'name', values: ['Sai Barath', 'Lokesh'] }, { column: 'purchaseId', values: ['25602'] }]}

row: Arrays of Objects, Rows Data. Format: [ { columnName: value }, { columnName: value }, { columnName: value } ] .

headers: Arrays of Objects, List of columns;

Format: [ { label: 'API name or local name', name: 'display name for header', cellRenderer: <react component>, optional, use only if you need to add components in row }, { label: 'API name or local name', name: 'display name for header'} ]

cellRenderer: React Component, the Default behaviour is to render a normal row value but if cellRenderer is provided then a callback function will return an array with array[0]: column name & array[1]: row value. For every single row, this cellRenderer will be called with new row values to give options to render different options based on row values instead of the same component.

Example

1const columnsData = useMemo(() => [
2  { label: 'timeStamp', name: 'TimeStamp' },
3  { label: 'status', name: 'Status', cellRenderer: StatusRenderer }
4], []);
5
6function StatusRenderer(value) {
7  const backgroundColor = value[1] === 'failed' ? 'bg-red-200' : value[1] === 'waiting' ? 'bg-yellow-100' : 'bg-green-200';
8  return <div className={`flex items-center p-1 capitalize text-gray-800 font-medium text-sm rounded-lg justify-center min-w-[60px] ${backgroundColor}`}>{value[1]}</div>;
9}

Sample Table Pics

Filter Pics

Search Pics

Advanced Version: Check out the advanced version using React with Ag-grid library