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


npm install --save @pubcore/react-datatable


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}}>
        <HeadRow>{({col, isHead}) =>
            <Cell {...{key:col, isHead}} >
                {col} <button onClick={e => alert('info')} type="button">i</button>
        <HeadRow {...{, i) => i)}}/>

//change view of column's data
<Datatable {...{rows, cols}} >
        <Row>{({col, row}) => ({'b' :
            <Cell data={(new Date(row[col])).toLocaleDateString()} key={col}/>
            }[col] ||
            <Cell key={col} data={row[col]}/>
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