Tablo NPM | npm.io

Tablo

Tablo is a React table component. Check it on this playground here.

It has the following features

filtering or searching by column
sorting by column
paging
injecting any components into cells (for making edit buttons, selections etc.)

Installation

Tablo is available as an npm package.

npm install tablo

Styling

You must reference the style.css stylesheet that comes in the tablo directory in some way.
You can change this file to suit your styling needs, or create your own style under the class name tablo.

Usage

The following is one of the simplest examples you can have

import React from 'react';
import Tablo from 'tablo';

const users = [
  { code: 0, name: "Ivana Burnett", country: "Uzbekistan" }, 
  { code: 1, name: "Iliana Spence", country: "San Marino" }
];

const columns = [
  { key: "name", name: "Name" },
  { key: "country", name: "Country" }
];

const Example = () => (
  <Tablo
     items={users}
     limit={10}
     columns={columns}
     id="code"
  />
);

Table properties

Parameter Name	Description
items	an array of objects that acts as the rows of the table
columns	an array of objects that specify the columns of the table, and how the rows must be displayed
limit	(optional: defaults to 15) the number of entries you want to have displayed per page
key	the key that is unique for each item in items array
exportName	(optional) only specify this if you want the table to be exportable. This will then be used as the file name
sort	(optional) specifies the sorted column at render : an object of { key, asc } where key corresponds to the sorted column, and asc whether or not it is ascending

Column properties

The following properties can be added to the columns property of the table

Parameter Name	Description
key	the key that correspons to the value you want to display of each item in this column. Note that the values in the rows may only be strings or numbers
name	the display name of the column
searchable	(optional) if the column is searchable
filterable	(optional) if the column is filterable
header	(optional) this is a react component to replace the display name of the column, as in: `const simpleComponent = <div>A complex<em>header</em></div>`
sortable	(optional) if the column is sortable
width	specify the fixed width of a column
component	a function that takes the corresponding item as the paramater. A valid react component must be returned. A simple example of such a function is: `const simpleFunction = item => <div>{item.prop1}</div>;`

Notes

You can only specify at most one of: filterable, searchable, or header
When you specify a key, and it references a value that is some layers deep, you may do so with the dot (.) seperator. Say item = { a: { b: { c: 61 } } } , then the "a.b.c" key of item will return 61;
The only property passed to Tablo that may change is items. Any other property won't be used or displayed. If you do wish to use new properties, remount the Tablo component.