Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @pubcore/react-datatable with all npm packages installed. Try it out:

var reactDatatable = require("@pubcore/react-datatable")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@pubcore/react-datatable v1.1.6

stateless react components for HTML tables

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>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free