DataTable: Live demo and source.
npm install slavik-m-react-data-components --saveThe 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', 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: <a href="profile/1" sortValue="Victor"><span>Victor</span></a>, city: 'Kiev', address: 'some address', phone: '380634988888' }, { id: 2, name: <a href="profile/2" sortValue="Ambassador"><span>Ambassador</span></a>, city: 'Kiev', address: 'some address', phone: '380634988888' }, // It also supports arrays // [ 'name value', 'city value', 'address value', 'phone value' ] ]; React.render(( <DataTable 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.
Properties that make each row unique, e.g. an id.
See Table column options.
The title to display on the header.
The name of the property or index on the data.
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.
Function to render a different component.
Class name for the td.