@returnoninvestment/base-table v2.0.6

Base Table

A wrapper for react-base-table. This allows sorting/grouping/filtering/selecting/dragging.

You can pass custom renderers for the cells, group rows and header cells.

Version 2

Now using a Zustand store to manage the state.
This allows just a single cell to rerender when selecting rows or updating the data. You can optionally pass in the store so you can access the values/methods from anywhere on the page.

There are breaking changes: 1. TableProvider, TableInContext and TableButtons have been removed 2. selectedRowKeys are no longer passed to the renderers 3. rowData can become out of date, use the useTableStore instead

Install

Login to npm with npm login.

Add "@returnoninvestment/base-table": "2.0.6" to package.json.

Props

data = [], // REQUIRED, any format
columns = [], // REQUIRED, { field, sortable, filter, editable, groupRenderer, autoSize, visible } plus library props { title, width, ... }
useStore, // a zustand store of type TableStoreType
defaultColumnDef, // an object with some default column properties
rowKey = "id", // the data id field
isLoading, // show a loading spinner
loadingElement, // the loading spinner
autoHeight, // table grows with content
noMessageText = 'No Items', // empty rows text or element
onRowClicked, // callback for row click (rowData)
hideBorder, // hides the table border and box shadow
showPagination, // enables pagination
pageSize = 15, // number of rows per page
paginationRenderer, // custom pagination renderer ({ pageResults, totalResults, currentPage, numberOfPages, startRow, endRow, previousPage, nextPage, gotoPage })
footer, // footer text or element
groupBy, // the data group field(s)
expandAll, // expand all group rows
groupRenderer, // custom row fn for group rows ({ rowData, expanded, setExpandedRow })
disableDefaultSort, // disables the default sort indicator and click
className, // classname for the table
rowClassName, // classname for the row string or function (rowData)
headerClassName, // classname for the header
headerCellRenderer, // custom header cell renderer ({ column }, { sortBy, onSort, onFilter, grouped, onGroup })
onUpdate, // edit fn (colKey, id, value)
selectable, // render checkboxes to select rows
selectedRowKeys, // selected rows
onSelectRows, // callback to select rows (keys)
enableDragDrop, // allow custom sorting of rows by dragging
onDragEnd // callback when dragging finishes (data, changedData)

Basic Usage

Wrap the table in a div with a fixed or percentage width and a fixed height. Remove the height and use the autoHeight prop for dynamic height.

import ResponsiveBaseTable from '@returnoninvestment/base-table';
import '@returnoninvestment/base-table/dist/index.css'; //put in index.js

const MyTable = () => {

    const data = [{ id: 1, firstName: "John", surname: "Smith" }];
    const columns = [{ field: "id", title: "Id" }, { field: "firstName", title: "First Name" },
    , { field: "surname", title: "Surname" }];    

    return (
        <div style={{ width: "100%", height: "400px" }}>
            <BaseTable data={data} columns={columns} rowKey="id" /> 
        </div>
    );
}

Custom Cell

Pass a render function to cellRenderer for the particular column.

import ResponsiveBaseTable from '@returnoninvestment/base-table';
import '@returnoninvestment/base-table/dist/index.css'; //put in index.js

const CustomCell = ({ column, cellData, loadingElement, rowKey, onFilter, onUpdate }) => {
    return <div>{cellData}</div>;
}

const MyTable = () => {

    const data = [{ id: 1, firstName: "John", surname: "Smith" }];
    const columns = [{ field: "id", title: "Id" }, 
    { field: "firstName", title: "First Name", 
        cellRenderer: (props, rest) => <CustomCell {...props} {...rest} /> },
    { field: "surname", title: "Surname" }];    

    return (
        <div style={{ width: "100%", height: "400px" }}>
            <BaseTable data={data} columns={columns} rowKey="id" /> 
        </div>
    );
}

Custom Header

Pass a render function to headerCellRenderer and optionally set disableDefaultSort to true.

import ResponsiveBaseTable from '@returnoninvestment/base-table';
import '@returnoninvestment/base-table/dist/index.css'; //put in index.js

const MyTable = () => {

    const data = [{ id: 1, firstName: "John", surname: "Smith" }];
    const columns = [{ field: "id", title: "Id" }, { field: "firstName", title: "First Name" },
    , { field: "surname", title: "Surname" }];    

    return (
        <div style={{ width: "100%", height: "400px" }}>
            <BaseTable data={data} columns={columns} rowKey="id"
            disableDefaultSort={true}
            headerCellRenderer={({ column }, { sortBy, onSort, onFilter }) => (
                <div>{column.title}</div>
            )}
            /> 
        </div>
    );
}

Grouping

Pass the field names(s) to groupBy, string or string[]. Use TableInContext for expand all functionality.

import ResponsiveBaseTable from '@returnoninvestment/base-table';
import '@returnoninvestment/base-table/dist/index.css'; //put in index.js

const MyTable = () => {

    const data = [{ id: 1, firstName: "John", surname: "Smith" }];
    const columns = [{ field: "id", title: "Id" }, { field: "firstName", title: "First Name" },
    , { field: "surname", title: "Surname" }];    

    return (
        <div style={{ width: "100%", height: "400px" }}>
            <BaseTable data={data} columns={columns} rowKey="id"
                groupBy={["firstName"]}
                /> 
        </div>
    );
}

Editing

Set editable to true on the column(s) and choose a type. Use the onUpdate prop to save the updates.

import ResponsiveBaseTable, { types } from '@returnoninvestment/base-table';
import '@returnoninvestment/base-table/dist/index.css'; //put in index.js

const MyTable = () => {

    const data = [{ id: 1, firstName: "John", surname: "Smith" }];
    const columns = [{ field: "id", title: "Id" }, 
                    { field: "firstName", title: "First Name", 
        editable: true, type: types.TEXT },
    , { field: "surname", title: "Surname", 
        editable: true, type: types.TEXT }];

    const onUpdate = (colKey, id, value) => {
        postToAPI(data.filter(f => f.id === id).map(m => {
            m[colKey] = value;
            return m;
        }));
    }

    return (
        <div style={{ width: "100%", height: "400px" }}>
            <BaseTable data={data} columns={columns} rowKey="id"
                onUpdate={onUpdate} /> 
        </div>
    );
}

Selection

Use the TableInContext component to store the selected keys.

import { TableInContext, TableProvider, TableButtons, useTableContext } from '@returnoninvestment/base-table';
import '@returnoninvestment/base-table/dist/index.css'; //put in index.js

const MyTable = () => {

    const { selectedRowKeys } = useTableContext();

    const columns = [{ field: "id", title: "Id" }, { field: "firstName", title: "First Name" },
    , { field: "surname", title: "Surname" }];    

    return (
        <div>
            <TableButtons />
            <div style={{ width: "100%", height: "400px" }}>
                <TableInContext columns={columns} /> 
            </div>
        </div>
    );
}

const MyTableWrapper = () => {

    const data = [{ id: 1, firstName: "John", surname: "Smith" }];

    return (
        <TableProvider data={data} rowKey="id">        
            <MyTable />
        </TableProvider>
    );
}