react-toolbox/components/table

Table

The Table component is an enhanced version of the standard HTML <table>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to onChange method who dispatch then new dataSource with each change.

import Table from 'react-toolbox/lib/table';

const UserModel = {
  name: {type: String}
,
  twitter: {type: String}
,
  birthdate: {type: Date}
,
  cats: {type: Number}
,
  dogs: {type: Number}
,
  active: {type: Boolean}
};

const users = [
  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1}
,
  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
];

const TableTest = () => (
  <Table model={UserModel} dataSource={users} />
)

Properties

Name	Type	Default	Description
className	String	''	Sets a class to style of the Component.
dataSource	Array		array representing all items for show.
model	Object		If true, component will be disabled.
heading	Bool	true	If true, component will show a heading using model field names.
onChange	Function		Callback function that is fired when the components's value changes.
onSelect	Function		Callback function when selects a determinate row.

Methods

This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:

• getValue is used to retrieve the current dataSource.
• getSelected is used to retrieve the current rows selected.