99.1.8 • Published 8 years ago
@sstur/react-data-components v99.1.8
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. |