npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

@pubcore/react-datatable

1.1.4 • Public • Published

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

Keywords

none

install

npm i @pubcore/react-datatable

Downloadsweekly downloads

2

version

1.1.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability