1.0.7 • Published 6 years ago

pubcore-react-datatable v1.0.7

Weekly downloads
8
License
MIT
Repository
github
Last release
6 years ago

Build Status

Stateless react components to render HTML tables

Installation

npm install --save pubcore-react-datatable

Examples

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}) =>
            <Cell key={col}>
                {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}) => ({'b' :
            <Cell data={(new Date(row[col])).toLocaleDateString()} key={col}/>
            }[col] ||
            <Cell key={col} data={row[col]}/>
        )}</Row>
    </Body>
</Datatable>