react-awesome-table v0.0.2
React Awesome Table Component
React Awesome Table Component
Early Developement Stage
This component is still in early development stage. Breaking changes may occur very frequently. No default style is present right now so you probably always want to customize at least TableCell.
This documentation is a first draft. Informations could be out-dated or wrong
Documentation
Basic Usage
import { Table, TableDataSource, TableCell, TableRow } from 'react-awesome-table'
const dataSource = new TableDataSource(customInternalComponents);
dataSource.data = data
dataSource.header = header
class MyPage extends React.Component {
render() {
return (
<Table dataSource={dataSource} />
);
}
}
TableDataSource Class
You can pass to the TableDataSource constructor custom cell, header cell, row and header row component class like this:
const dataSource = new TableDataSource({
cellComponent: CustomCellComponent,
headerCellComponent: CustomHeaderCellComponent,
rowComponent: CustomRowComponent,
headerRowComponent: CustomHeaderRowComponent
});
You can pass no parameters to the constructor, in this case default cells and rows will be use. You can pass one or many custom component in the configuration object, all non specified one will be default.
Table Component
Properties: | Property name | Description | Type | |---------------|--------------------------------|-----------------------------------| | dataSource | An instance of TableDataSource | ReactAwesomeTable.TableDataSource |
TableCell Component
You should never use TableCell directly so no properties are public. This is how you create a custom TableCell:
class CustomTableCell extends TableCell {
@override formatData() {
return this.data;
}
@override render() {
return (
<td>{ this.formatData(); }</td>
)
}
}
// Specify here the data type
CustomeTableCell.propTypes.data = React.PropTypes.string
By default, data type is object. You do not have to override render and formatData, you may need to override only one of them
TableRow Component
You should never use TableRow directly so no properties are public. This is how you create a custom TableRow:
class CustomTableRow extends TableRow {
@override render() {
return (
<tr>{ this.getCells() }</tr>
);
}
}
It is highly discouraged to override methods that are not listed in this documentation