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 **