Getting Started

The easiest way to start using FixedDataTable is to install it via npm:

npm install react --save npm install fixed-data-table-2 --save

If you're using a standard build system such as browserify or webpack it can then be required directly:

const React = require('react'); const {Table, Column, Cell} = require('fixed-data-table-2');

For layout and styling the default stylesheet needs to be added: fixed-data-table-2/dist/fixed-data-table.min.css.

Create your Table

Setting up your table can be done via the Table component. To be able to handle large amounts of data, the table only renders the parts that are visible to the user, in order to calculate this, static width, height, rowsCount and rowHeight are required:

const React = require('react'); const {Table} = require('fixed-data-table-2'); class MyTable extends React.Component { render() { return ( <Table rowsCount={100} rowHeight={50} width={1000} height={500}> // TODO: Add columns </Table> ); } }

Create your Columns

For each column that needs to be displayed, a Column config with 2 important props are required. The width of the column and the cell content to render. The Cell component can wrap any content to provide default table styles and centering.

const React = require('react'); const {Table, Column, Cell} = require('fixed-data-table-2'); class MyTable extends React.Component { render() { return ( <Table rowsCount={100} rowHeight={50} width={1000} height={500}> <Column cell={<Cell>Basic content</Cell>} width={200} /> </Table> ); } }

Provide Custom Data

Typically you will want to render custom data per row, let's add some data to our table and add a header to the column.

const React = require('react'); const {Table, Column, Cell} = require('fixed-data-table-2'); class MyTable extends React.Component { constructor(props) { super(props); this.state = { myTableData: [ {name: 'Rylan'}, {name: 'Amelia'}, {name: 'Estevan'}, {name: 'Florence'}, {name: 'Tressa'}, ], }; } render() { return ( <Table rowsCount={this.state.myTableData.length} rowHeight={50} headerHeight={50} width={1000} height={500}> <Column header={<Cell>Name</Cell>} cell={props => ( <Cell {...props}> {this.state.myTableData[props.rowIndex].name} </Cell> )} width={200} /> </Table> ); } }

Instead of providing a static cell we can use a function for our cell, this function will be passed the rowIndex plus the width and height of the cell. By using the rowIndex and we can get different data from this.state.myTableData for each cell.

Create Reusable Cells

With larger table setups you will want to reuse the cell render functions. To do this you can create your own React Component for each unique Cell. Let's add another column that displays emails with links.

const React = require('react'); const {Table, Column, Cell} = require('fixed-data-table-2'); class MyTextCell extends React.Component { render() { const {rowIndex, field, data, ...props} = this.props; return ( <Cell {...props}> {data[rowIndex][field]} </Cell> ); } } class MyLinkCell extends React.Component { render() { const {rowIndex, field, data, ...props} = this.props; const link = data[rowIndex][field]; return ( <Cell {...props}> <a href={link}>{link}</a> </Cell> ); } } class MyTable extends React.Component { constructor(props) { super(props); this.state = { myTableData: [ {name: 'Rylan', email: 'Angelita_Weimann42@gmail.com'}, {name: 'Amelia', email: 'Dexter.Trantow57@hotmail.com'}, {name: 'Estevan', email: 'Aimee7@hotmail.com'}, {name: 'Florence', email: 'Jarrod.Bernier13@yahoo.com'}, {name: 'Tressa', email: 'Yadira1@hotmail.com'}, ], }; } render() { return ( <Table rowsCount={this.state.myTableData.length} rowHeight={50} headerHeight={50} width={1000} height={500}> <Column header={<Cell>Name</Cell>} cell={ <MyTextCell data={this.state.myTableData} field="name" /> } width={200} /> <Column header={<Cell>Email</Cell>} cell={ <MyLinkCell data={this.state.myTableData} field="email" /> } width={200} /> </Table> ); } }

Next Steps

The FixedDataTable has many more options, for more information see the examples section or the API docs.