React Data Table Component Demo

React Data Table Component

Creating yet another React table library came out of nescessity while developing a production application for a growing startup. I discovered that while there are some great table libraries already available, most required heavy customization (overriding css and/or forced to use their flavor of ui library), lacked built in sorting or required a commercial license.

If you want to achieve balance with the force and want a simple, sortable, flexible table library, give React Data Table Component a shot. If you want an Excel clone, need to pivot large data sets or want to infinitely scroll millions of rows, then this is not the React table library you are looking for 👋

React Data Table Component is still under Development, though I do not expect the API to change. Here are the initial features available:

• Declarative Configuration
• Sortable (client)
• Selectable Rows
• Expandable Rows
• Themeable via js config
• Data Aware (i.e. easily callback to a parent component get the DataTable state, e.g. selectedRows
• Responsive (via x-scroll)

Roadmap

In order priority:

• Pagination (client/server) - This is currently under development and should be ready soon!
• Built in themes (Material, Boostrap)
• Sortable (server)
• Search (client/server)
• Fixed Headers
• Mobile Responsive
• Accessibility

Installation

npm install react-data-table-component 

// or

yarn add react-data-table-component 

API/Usage

Columns

Nothing new here - we are using an array of object literals and properties to describle the columns:

DataTable Properties

Advanced Selectable Component Options

Sometimes 3rd party checkbox components have their own way of handling indeterminate state. We don't want React Data Table hardcoded to a specific ui lib or custom component, so instead a "hook" is provided to allow you to pass a function that will be resolved by React Data Table's internal Checkbox for use with indeterminate functionality.

Example Usage:

const { Checkbox } from 'react-md';

...

/* 
  In this example, react-md ui lib determines its indeterminate state via the `uncheckedIcon` property. To override it
  so let's override it. React Data Table is aware if a checkbox is indetermite or not becuase internally we resolve this as 
  `yourfunction(checkboxawareindeterminatestate)`
*/

const handleIndeterminate = isIndeterminate => (isIndeterminate ? <FontIcon>indeterminate_check_box</FontIcon> : <FontIcon>check_box_outline_blank</FontIcon>);

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    data={data}
    selectableRows
    selectableRowsComponent={Checkbox} // Pass the function only
    selectableRowsComponentProps={{ uncheckedIcon: handleIndeterminate  }}
  />
);

Note This is currently only supported for indeterminate state, but I may expand this out in the future if there is a demand

Basic Table

The following declarative structure creates a sortable table of Arnold movie titles:

import DataTable from 'react-data-table-component`;

const data = [{ title: 'Conan the Barbarian', year: '1982' } ...];
const columns = [
  {
    name: 'Title',
    selector: 'title',
    sortable: true,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    number: true,
  },
];

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    data={data}
  />
);

Selectable Rows

Let's make our rows selectable so we can access the selected results

...

const handleChange = (state) => {
  // You can use setState or dispatch with something like Redux so we can use the retrieved data
  console.log('Selected Rows: ', state.selectedRows);
};

...

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    data={data}
    selectableRows // add for checkbox selection
    onTableUpdate={handleChange}
  />
);

Overriding with a 3rd Party Ui Component Library

You don't like those ugly html checkboxes? Let's override them with some react-md sexyiness. While we are at it we will also override the sortIcon:

...
import { Checkbox, FontIcon } from 'react-md';
...

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    data={data}
    selectableRows
    selectableRowsComponent={Checkbox} // Pass the function only
    selectableRowsComponentProps={{ inkDisabled: true }} // optionally, pass react-md supported props down to our custom checkbox
    sortIcon={<FontIcon>arrow_downward</FontIcon>} // use a material icon for our sort icon
    onTableUpdate={handleChange}
  />
);

Custom Cells

Let's give our Movie list a summary, but in the same cell as Name:

....

const data = [{ title: 'Conan the Barbarian', summary: 'Orphaned boy Conan is enslaved after his village is destroyed...',  year: '1982' } ...];
const columns = [
  {
    name: 'Title',
    sortable: true,
    cell: row => <div><div style={{ fontWeight: bold }}>{row.title}</div>{row.summary}</div>,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    number: true,
  },
];

...

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    data={data}
    selectableRows
    selectableRowsComponent={Checkbox}
    selectableRowsComponentProps={{ inkDisabled: true }}
    sortIcon={<FontIcon>arrow_downward</FontIcon>}
    onTableUpdate={handleChange}
  />
);

Expandable Rows

Let's make our rows expandable so we can view more details:

...

const data = [{ title: 'Conan the Barbarian', summary: 'Orphaned boy Conan is enslaved after his village is destroyed...',  year: '1982', image: 'http://conan.image.png' } ...];
const columns = [
  {
    name: 'Title',
    sortable: true,
    cell: row => <div><div style={{ fontWeight: 700 }}>{row.title}</div>{row.summary}</div>,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    number: true,
  },
];

...

// The row data is composed into your custom expandable component via the data prop
const ExpanableComponent = ({ data }) => <img src={data.image} />;

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    data={data}
    selectableRows
    selectableRowsComponent={Checkbox}
    selectableRowsComponentProps={{ inkDisabled: true }}
    sortIcon={<FontIcon>arrow_downward</FontIcon>}
    onTableUpdate={handleChange} 
    expandableRows
    expandableRowsComponent={<ExpanableComponent />}
  />
);

Theming

Under Development

The curent default Theme is very "material". Near term plans are to have 3 built-in prop selectable themes (none, bootstrap, material).

You can override or replace the current theme using the customTheme prop

For Example:

// Override the row default height
const mySweetTheme = {
  rows: {
    height: '64px'
  }
}

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    customTheme={mySweetTheme}
  />
);

Refer to Default Theme for reference

Theme Resources

• SVG Encoder

Development

Setup

Install the latest Node JS LTS and Yarn and simply run yarn or yarn install command in the root and stories directory.

Installing Flow Types

Install flowtypes using the package script:

yarn flow-typed

It is advised to run the script whenever NPM packages are installed.

Local development

During development,

# watch and build new source changes
yarn start
# or serve *.stories.js files and manually test on the Storyboard app
yarn storyboard

Including NPM packages

This project uses two package.json structure.

Library dependencies -- /package.json

yarn add [package-name] --dev # for dev tools
yarn add [package-name] # for app

Storybook dependencies -- /stories/package.json

cd stories/
yarn add [package-name]

Static Types

yarn flow # performs type checking on files

Lint

yarn lint # runs linter to detect any style issues (css & js)
yarn lint:css # lint only css
yarn lint:js # lint only js
yarn lint:js --fix # tries to fix js lint issues

Test

yarn test # runs functional/unit tests using Jest
yarn test --coverage # with coverage

Build

yarn build # builds sources at src/