react-data-components

DataTable: Live demo and source.

Getting started

npm install react-data-components --save

Using the default implementation

The default implementation includes a filter for case insensitive global search, pagination and page size.

var React = require('react');
var DataTable = require('react-data-components').DataTable;

var columns = [
  { title: 'Name', prop: 'name'  },
  { title: 'City', prop: 'city' },
  { title: 'Address', prop: 'address' },
  { title: 'Phone', prop: 'phone' }
];

var data = [
  { name: 'name value', city: 'city value', address: 'address value', phone: 'phone value' }
  // It also supports arrays
  // [ 'name value', 'city value', 'address value', 'phone value' ]
];

React.render((
    <DataTable
      className="container"
      keys={[ 'name', 'address' ]}
      columns={columns}
      initialData={data}
      initialPageLength={5}
      initialSortBy={{ prop: 'city', order: 'desc' }}
      pageLengthOptions={[ 5, 20, 50 ]}
    />
  ), document.body);

See complete example, see Flux example.

DataMixin options

Name | Type | Description ------------------- | ------------------ | ---------------------------------- keys | array | Properties that make each row unique, e.g. an id. columns | array | See column options. pageLengthOptions | array | Page length options. initialData | array | The data to display. initialPageLength | number | Initial page length. initialSortBy | object | Initial sorting, needs prop and order.

Table column options

Name | Type | Description ---------------- | ------------------ | ---------------------------------- title | string | The title to display on the header. prop | string or number | The name of the property or index on the data. render | function | Function to customize the render on column. className | string or function | Class for the td. defaultContent | string | The default value to display if no data. sortable | boolean | true by default. width | string or number | Width for the column.