2.3 KiB
2.3 KiB
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}
selected={this.state.selected}
source={this.state.source}
/>
);
}
}
Properties
Name | Type | Default | Description |
---|---|---|---|
className |
String |
'' |
Sets a custom class to style the Component. |
heading |
Bool |
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. | |
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. |