DataTable

DataTable provides an Excel-like grid component built with React that supports things like fixed headers, custom cell renderers, row selection, sorting, reordering, show/hide, etc... Uses the open-source React Table component.

Props

Examples

Simple Table

<DataTable columns={simpleTableColumns} data={sampleData} />

These are the bare minimum properties used to render the table above.

let columns = [
  {
    accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName
    Header: 'MyHeader' // Used to render the header of a column or column group
  },
  ...
]

Simple Table with Row Click callback

<DataTable columns={simpleTableColumns} data={sampleData} />

Simple Table with Row Click callback

<DataTable
  columns={simpleTableColumns}
  data={sampleData}
  getTdProps={(state, rowInfo, column, instance) => {
    return {
      onClick: function(e, handleOriginal) {
        console.warn('abc')
        console.log('A td element was clicked!')
        console.log('it produced this event:', e)
        console.log('it was in this column:', column)
        console.log('it was in this table instance', instance)
        console.log('it was in this row:', rowInfo)
        if (typeof handleOriginal === 'function') {
          handleOriginal(e)
        }
      },
    }
  }}
/>

These are the bare minimum properties used to render the table above.

let columns = [
  {
    accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName
    Header: 'MyHeader' // Used to render the header of a column or column group
  },
  ...
]

Simple Table with Sortable Columns

In this scenario the columns that are sortable need to have a sortable: true property. To set a default sort for the table, you can use the defaultSortDesc prop. To override the default sorting algorithm for the whole table use the defaultSortMethod prop. To override the sorting algorithm for a single column, use the sortMethod column property.

let columns = [
  {
    accessor: 'firstName',
    Header: 'Name',
    sortable: true
  },
 {
    accessor: 'streetAddress',
    Header: 'streetAddress',
    sortable: true
  },
  ...
]

<DataTable columns={simpleTableSortableColumns} data={sampleData} />

Simple Table with Fixed Columns

In this scenario, the columns that are locked need to have a fixed: oneOf(['left', 'right']) property.

let columns = [
  {
    accessor: 'skill',
    Header: 'skill',
    fixed: 'left'
  },
  {
    accessor: 'gender',
    Header: 'gender',
    fixed: 'right'
  },
  ...
]

<DataTable columns={fixedColumns} data={sampleData} />

Simple Table with Resizable Columns

In this scenario, the columns that are resizable need to have a resizable: true property. You can attach an onResizedChange function to the table to capture any resize events.

let columns = [
  {
    accessor: 'lastName',
    Header: 'last name',
    resizable: true
  }
  ...
]

<DataTable
  columns={resizableColumns}
  data={sampleData}
  onResizedChange={console.log}
/>

Table with Custom Cell Component

In this scenario, the columns that will use a Custom Cell, need a Cell: oneOfType([element, string, func]) column property.

let columns = [
  {
    accessor: 'firstName',
    Header: 'first name',
    Cell: meta => <SampleAvatarCustomCell {...meta} />
  }
  ...
]

Name

Last name

Street address

city

state

postal code

OrelleHubbert

Hubbert

56741 Stoughton Alley

El Paso

Texas

79940

LindsyFranzonetti

Franzonetti

523 Crest Line Avenue

Montgomery

Alabama

36125

ShepherdOlivas

Olivas

215 Thackeray Park

New York City

New York

10292

BrockPlumm

Plumm

2 Hanson Drive

Honolulu

Hawaii

96805

LloydRamme

Ramme

547 Mitchell Place

Chicago

Illinois

60691

YettyBordessa

Bordessa

971 Morrow Way

Dallas

Texas

75372

HewieHedin

Hedin

5588 Mosinee Terrace

Scottsdale

Arizona

85271

ConLittefair

Littefair

1811 Duke Circle

Chicago

Illinois

60614

Loading...

<DataTable columns={customCellColumns} data={sampleData} />

<DataTable columns={customCellColumns} data={sampleData} />

Table with Checkbox Selection

In this example, the table has checkboxes to select rows and displays them. It also supports shift selection, select/unselect all. This is enabled by using the selectable prop on the table itself. If there's need to listen to changes, there's an onSelection table prop too.

An initialSelected array of identifiers can be provided to render the table with rows already selected.

<DataTable
  initialSelected={[1, 3, 5]}
  selectable
  columns={simpleTableColumns}
  data={sampleData}
  onSelection={console.log}
/>

Table with collapsible content using SubComponent

<DataTable
  columns={subComponentColumns}
  data={sampleData}
  SubComponent={row => <SampleSubComponent {...row} />}
/>

Table with pagination enabled

Use showPagination to enable it. A custom PaginationComponent can be used to render anything you want as pagination, a default one is included.

<DataTable
  columns={subComponentColumns}
  data={sampleData}
  showPagination
  SubComponent={row => <SampleSubComponent {...row} />}
  defaultPageSize={10}
/>

SSR Compatibility

To use this component for SSR, you need to wrap your application with DataTableProvider. This will avoid SSR mismatch warnings by syncing the generated ID's for the table on both server and client. 🎉

// In your root app file
import React from 'react';
import { renderToString } from 'react-dom/server';
import { DataTableProvider } from 'real-react';
import App from './app';
const Root = () => {
  return (
    <DataTableProvider>
      <App />
    </DataTableProvider>
  );
};