react-data-components

DataTable: Live demo and source.

Getting started

``sh
npm install slavik-m-react-data-components --save
`

$3

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

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

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

var data = [
{ id: 1, name: Victor, city: 'Kiev', address: 'some
address', phone: '380634988888' },
{ id: 2, name: Ambassador, city: 'Kiev', address: 'some
address', phone: '380634988888' },
// It also supports arrays
// [ 'name value', 'city value', 'address value', 'phone value' ]
];

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

See complete example, see Flux example.

DataMixin options

$3

Properties that make each row unique, e.g. an id.

$3

See Table` column options.

$3

$3

$3

$3

Table column options

$3

The title to display on the header.

$3

The name of the property or index on the data.

$3

ELEMENT_STRING or ELEMENT_NUMBER sort by React components.
ReactElement need provide prop - "sortValue" to sort by this value;
The title to display on the header.

$3

Function to render a different component.

$3

Class name for the td.

$3

$3

$3