@pubcore/react-datatable
v1.3.4
Published
stateless react components for HTML tables
Downloads
6
Readme
Stateless react components to render HTML tables
Installation
npm install --save @pubcore/react-datatableExamples
import Datatable from '@pubcore/react-datatable'
const rows = [
{a:'11', b:'12'},
{a:'21', b:'22'}
],
cols = ['a', 'b']
//table without head row
<Datatable {...{rows}}/>
//table with head row, columns order based on "cols"
<Datatable {...{rows, cols}}/>customize table view
//some more components to import
import Datatable, {Head, HeadRow, Cell, Body, Row} from '@pubcore/react-datatable'
//table with individual header row(s)
<Datatable {...{rows, cols}}>
<Head>
<HeadRow>{({col, isHead, key}) =>
<Cell {...{key, isHead}} >
{col} <button onClick={e => alert('info')} type="button">i</button>
</Cell>
}</HeadRow>
<HeadRow {...{cols:cols.map((col, i) => i)}}/>
</Head>
</Datatable>
//change view of column's data
<Datatable {...{rows, cols}} >
<Body>
<Row>{({col, row, index, key}) => ({'b' :
<Cell {...{data:(new Date(row[col])).toLocaleDateString(), key}}/>
}[col] ||
<Cell {...{data:`# ${index}`, key}}/>
)}</Row>
</Body>
</Datatable>