Custom data manager

You can define your own data manager or extend the existing one to change any of the default behaviour. Instead of passing a data prop, simply pass a dataManager prop. It needs to have two methods: initialize and getData.

import {Grid} from "react-bootstrap";
import {Table, Column} from "react-tisch";

class DataManager {
    /*
     * Very basic example for implementing your own data manager
     */

    constructor() {
        this.data = [{index: 0, data: {name: 'Joe'}}, {index: 1, data: {name: 'Mike'}}];
    }

    initialize(columns, onNewDataReceived) {
        /*
         * Called when the table is mounted
         */
    }

    getData(state) {
        /*
         * Called when the table state changes.
         * For async data fetching, return null and call onNewDataReceived
         * when the new data is ready
         */
        return {
            itemCount: this.data.length,
            filterOptions: [[]],
            visibleRows: this.data
        };
    }
}

const dataManager = new DataManager();

<Grid>
    <Table dataManager={dataManager}>
        <Column value={row => row.name}>Name</Column>
    </Table>
</Grid>

Demo