unity-table
Table component for React
SimpleTable
Displaying raw data
import SimpleTable from 'unity-table'; const columns = name: 'title' name: 'episode_id' name: 'release_date' name: 'director' name: 'producer'; const tableHead = title: 'Title' episode_id: 'Episode number' release_date: 'Release date' director: 'Director' producer: 'Producers'; const Example = <SimpleTable = = = ="title" />;
Decorating data
const columns = ...;const tableHead = ...; // data mapping functionconst mapData = title episode_id release_date director producer title episode_id release_date: // <- butify date director producer; const Example = <SimpleTable = = = // <- = ="title" />;
Specifying column widths
const columns = name: 'title' width: '150px' name: 'episode_id' width: '60px' name: 'release_date' width: '70px' name: 'director' width: '90px' name: 'producer' width: '230px';
Specifying column attributes
const columns = ...;const tableHead = ...; const mapData = title episode_id director producer title episode_id director producer; const mapAttrs = title: colSpan: 4; const Example = <SimpleTable = = = = = />;
Sort data
const columns = name: 'title' width: '150px' sortable: true // <- available for sorting name: 'episode_id' width: '60px' sortable: true // <- available for sorting name: 'release_date' width: '70px' sortable: true // <- available for sorting name: 'director' width: '90px' sortable: true // <- available for sorting too name: 'producer' width: '230px'; { ; thisstate = // initial sorting sort: field: 'release_date' asc: true ; thishandleSortChange = thishandleSortChange; } { // set new sorting to the state this; } { const field asc = thisstatesort; return ; } { return <SimpleTable = = = = // <- = // <- = // <- ="title" /> ; }
Plain usage (layout only)
; const Example = <Table> <Thead> <Tr> <Th>Title</Th> <Th>Episode number</Th> <Th>Release date</Th> <Th>Director</Th> <Th>Producers</Th> </Tr> </Thead> <Tbody> data </Tbody> </Table>;