Name	Name	Last commit message	Last commit date
Latest commit History 90 Commits
.github/workflows	.github/workflows
.storybook	.storybook
src	src
.gitignore	.gitignore
LICENSE	LICENSE
README.md	README.md
package.json	package.json
yarn.lock	yarn.lock

Reactable

Create data tables with React

https://www.npmjs.com/package/@codbear/reactable

Requirements

react 17.0.2 (This library use hooks under the hood)
styled-components 5.3.3,

Installation

yarn add @codbear/reactable

Usage

Basic usage

You can import Table component to render a full table in material design style out of the box.

import { Table } from '@codbear/reactable';
const superHerosData = [
 {
 secretIdentity: 'Tony Stark',
 name: 'Iron Man',
 age: 38,
 },
 {
 secretIdentity: 'Steve Rogers',
 name: 'Captain America',
 age: 90,
 },
 {
 secretIdentity: 'Natalia Romanova',
 name: 'Black Widow',
 age: 26,
 },
];
const superHerosColumns = [
 {
 header: 'Super Hero',
 dataField: 'name',
 },
 {
 header: 'Secret identity',
 dataField: 'secretIdentity',
 },
 {
 header: 'Age',
 dataField: 'age',
 },
];
const SuperHerosTable = () => <Table data={superHerosData} columns={superHerosColumns} />;

See demo in StoryBook

Sorting

Define which columns are sortable.

const superHerosColumns = [
 {
 header: 'Super Hero',
 dataField: 'name',
 isSortable: true,
 },
 {
 header: 'Secret identity',
 dataField: 'secretIdentity',
 },
 {
 header: 'Age',
 dataField: 'age',
 isSortable: true,
 },
];
const SuperHerosTable = () => <Table data={superHerosData} columns={superHerosColumns} />;

See demo in StoryBook

Pagination

You need to create a state in the parent component of the Table to handle the number of items displayed per page. You can specify an array of options for the number of items to display selector (default is [25, 50, 100])

const superHerosColumns = [
 {
 header: 'Super Hero',
 dataField: 'name',
 },
 {
 header: 'Secret identity',
 dataField: 'secretIdentity',
 },
 {
 header: 'Age',
 dataField: 'age',
 },
];
const SuperHerosTable = () => {
 const [itemsPerPage, setItemsPerPage] = useState(5);
 return (
 <Table
 data={superHerosData}
 columns={superHerosColumns}
 itemsPerPage={itemsPerPage}
 onChangeItemsPerPage={setItemsPerPage}
 itemsPerPageOptions={[5, 10, 25, 50, 100]}
 />
 );
};

See demo in StoryBook

Global search

You can set hasSearchBar to true if you want to allow the user to do a global search on the table. This will display a text field at the top of the table that will filter out rows that contain user input.

const superHerosColumns = [
 {
 header: 'Super Hero',
 dataField: 'name',
 },
 {
 header: 'Secret identity',
 dataField: 'secretIdentity',
 },
 {
 header: 'Age',
 dataField: 'age',
 },
];
const SuperHerosTable = () => {
 const [itemsPerPage, setItemsPerPage] = useState(5);
 return (
 <Table
 data={superHerosData}
 columns={superHerosColumns}
 hasSearchBar
 />
 );
};

See demo in StoryBook

Custom theming

You can provide a theme to the Table component if you want to override default theme. For now only the palette can be overrided.

<Table 
 theme={{
 palette: {
 primary: '#ffffff', // The color applied to header background
 secondary: '#c7c7c7', // The color applied to row background on hover
 divider: '#000000', // The color applied to borders
 text: '#000000', // The color applied to text content
 }
 }}
/>