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 source 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}
];

class TableTest extends React.Component {
  state = { selected: [], source: users };

  handleChange = (row, key, value) => {
    const source = this.state.source;
    source[row][key] = value;
    this.setState({source});
  };

  handleSelect = (selected) => {
    this.setState({selected});
  };

  render () {
    return (
      <Table
        model={UserModel}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
        selectable
        multiSelectable
        selected={this.state.selected}
        source={this.state.source}
      />
    );
  }
}

This component can be styled by context providing a theme with the key RTTable through the theme provider.

Properties

Name	Type	Default	Description
className	String	''	Sets a custom class to style the Component.
heading	Boolean	true	If true, component will show a heading using model field names.
model	Object		Object describing the data model that represents each object in the source.
onChange	Function		Callback function that is fired when an item in a row changes. If set, rows are editable.
onSelect	Function		Callback function invoked when the row selection changes.
selectable	Boolean	true	If true, each row will display a checkbox to allow the user to select that one row.
multiSelectable	Boolean	true	If true, the header and each row will display a checkbox to allow the user to select multiple rows.
selected	Array		Array of indexes of the items in the source that should appear as selected.
source	Array		Array of objects representing each item to show.

Theme

Name	Description
editable	It will be added to a row in case it is editable.
row	Used for the row element.
selectable	It will be added to a row in case it is selectable.
selected	Added to a row in case it is selected.
table	Classname used for the root element.