DataTable

DataTable is a wrapper around Kyber's suite of Table components. At its most basic, the DataTable will render a standard table when provided with a set of data and columns.

Users can also use plugins with the DataTable to allow for additional features like bulk actions, filtering, rearranging columns, and more. When adding plugins to your DataTable, a toolbar will be added to the top of the table with each of the configured plugins. Examples of these plugins can be found below.

In all examples, the data and columns props provided to the DataTable must adhere to a couple rules. Your columns should be an array of objects containing a key and a label. The label is what will be displayed in the table header, and the key is a unique identifier for that column. Your data should be an array of objects containing a unique id for the entire row as well as a key/value pair representing each of the columns and the associated value for that particular row. For example, a column defined as { key: 'income', label: 'Income' } would match a row that looks like { id: 'some_id', income: 100, otherColumn: otherValue }. Check out the code snippet in each of the examples below to see what this looks like.

All of these plugins are compatible with one another so they can be used at the same time. The order they are passed into the plugins array does not matter.

NOTE: When using usePagination in conjunction with useBulkActions, selecting all rows by clicking the checkbox in the table header will only select the rows on the page that is currently visible.

Result

Loading...

Live Editor

const filterTypeOptions = Array.from( dataTableInitialData.reduce((acc, cur) => { acc.add(cur.type); return acc; }, new Set()), ) .sort((a, b) => a.localeCompare(b)) .map((item) => ({ label: item, value: item })); const columns = [ { id: 'main-name-1', key: 'name', label: 'Name', }, { id: 'main-income-1', key: 'income', label: 'Income', }, { id: 'main-type-1', key: 'type', label: 'Type', sortable: true, filter: { type: 'SingleSelect', options: filterTypeOptions }, }, ]; const Example = () => { const [data, setData] = React.useState(dataTableInitialData); const bulkActionPlugin = useBulkActions({ onSelectionChange: (updatedRows) => { setData( data.map((row) => { const matchedRow = updatedRows.find((matchRow) => matchRow.id === row.id); if (matchedRow) { row = matchedRow; } return row; }), ); }, onActionClick: (action) => { let newData; switch (action) { case 'Delete': newData = data.filter((row) => { if (!row.selected) { return row; } }); break; case 'Howdy': newData = data.map((row) => { if (row.selected) { row.name = '🤠'; } return row; }); break; default: newData = data; break; } setData(newData); }, actions: ['Delete', 'Howdy'], }); const useSortPlugin = useSort(); const useSearchPlugin = useSearch(); const useSettingsPlugin = useSettings(); const usePaginationPlugin = usePagination(); const useFiltersPlugin = useFilters(); return ( <DataTable id="demo-component-one" columns={columns} data={data} plugins={[ useSettingsPlugin, bulkActionPlugin, useSortPlugin, useSearchPlugin, usePaginationPlugin, useFiltersPlugin, ]} title="Clients" responsive /> ); }; render(<Example />);

const filterTypeOptions = Array.from(
    dataTableInitialData.reduce((acc, cur) => {
        acc.add(cur.type);

        return acc;
    }, new Set()),
)
    .sort((a, b) => a.localeCompare(b))
    .map((item) => ({ label: item, value: item }));

const columns = [
    {
        id: 'main-name-1',
        key: 'name',
        label: 'Name',
    },
    {
        id: 'main-income-1',
        key: 'income',
        label: 'Income',
    },
    {
        id: 'main-type-1',
        key: 'type',
        label: 'Type',
        sortable: true,
        filter: { type: 'SingleSelect', options: filterTypeOptions },
    },
];

const Example = () => {
    const [data, setData] = React.useState(dataTableInitialData);

    const bulkActionPlugin = useBulkActions({
        onSelectionChange: (updatedRows) => {
            setData(
                data.map((row) => {
                    const matchedRow = updatedRows.find((matchRow) => matchRow.id === row.id);
                    if (matchedRow) {
                        row = matchedRow;
                    }

                    return row;
                }),
            );
        },
        onActionClick: (action) => {
            let newData;

            switch (action) {
                case 'Delete':
                    newData = data.filter((row) => {
                        if (!row.selected) {
                            return row;
                        }
                    });
                    break;
                case 'Howdy':
                    newData = data.map((row) => {
                        if (row.selected) {
                            row.name = '🤠';
                        }

                        return row;
                    });
                    break;
                default:
                    newData = data;
                    break;
            }

            setData(newData);
        },
        actions: ['Delete', 'Howdy'],
    });
    const useSortPlugin = useSort();
    const useSearchPlugin = useSearch();
    const useSettingsPlugin = useSettings();
    const usePaginationPlugin = usePagination();
    const useFiltersPlugin = useFilters();

    return (
        <DataTable
            id="demo-component-one"
            columns={columns}
            data={data}
            plugins={[
                useSettingsPlugin,
                bulkActionPlugin,
                useSortPlugin,
                useSearchPlugin,
                usePaginationPlugin,
                useFiltersPlugin,
            ]}
            title="Clients"
            responsive
        />
    );
};

render(<Example />);

With Custom Column

The DataTable in this example is not using any plugins. However, an optional cellRenderer was added to the "name" column to render a TextField instead of just rendering plain text.

Result

Loading...

Live Editor

const NameColumn = function ({ row, rowIndex, columnKey, value }) { return ( <TextField defaultValue={value} aria-label={`Edit ${columnKey}`} renderPrefix={() => row.signLeft} /> ); }; const columns = [ { key: 'name', label: 'Name', cellRenderer: (cellProps) => <NameColumn {...cellProps} />, }, { key: 'income', label: 'Income', filter: { type: 'Number' }, }, { key: 'type', label: 'Type', }, ]; const initialData = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', signLeft: '🍎', }, { id: 2, name: 'Larry', income: null, type: 'business', signLeft: '🍊', }, { id: 3, name: 'Curly', income: 1, type: 'personal', signLeft: '🍓', }, ]; const Example = () => { const [data, setData] = React.useState(initialData); return ( <DataTable id="demo-component-custom" columns={columns} data={data} plugins={[useFilters()]} /> ); }; render(<Example />);

const NameColumn = function ({ row, rowIndex, columnKey, value }) {
    return (
        <TextField
            defaultValue={value}
            aria-label={`Edit ${columnKey}`}
            renderPrefix={() => row.signLeft}
        />
    );
};

const columns = [
    {
        key: 'name',
        label: 'Name',
        cellRenderer: (cellProps) => <NameColumn {...cellProps} />,
    },
    {
        key: 'income',
        label: 'Income',
        filter: { type: 'Number' },
    },
    {
        key: 'type',
        label: 'Type',
    },
];

const initialData = [
    {
        id: 1,
        name: 'Moe',
        income: 1000,
        type: 'personal',
        signLeft: '🍎',
    },
    {
        id: 2,
        name: 'Larry',
        income: null,
        type: 'business',
        signLeft: '🍊',
    },
    {
        id: 3,
        name: 'Curly',
        income: 1,
        type: 'personal',
        signLeft: '🍓',
    },
];

const Example = () => {
    const [data, setData] = React.useState(initialData);

    return (
        <DataTable
            id="demo-component-custom"
            columns={columns}
            data={data}
            plugins={[useFilters()]}
        />
    );
};

render(<Example />);

Custom Plugin

Custom plugins can be created and added to the list of plugins for DataTable. They are functions that return an object that exposes the following API:

const useDownload = (props = {}) => ({
    key: 'useDownload',
    props,
    useFilter,
    Component,
});

useFilter is a function that returns the next set of data usually based on changes to the plugin.

Component is a Component that will be rendered within the header of the DataTable.

See the useDownload plugin function in the demo for implementation details.

Result

Loading...

Live Editor

const filterTypeOptions = Array.from( dataTableInitialData.reduce((acc, cur) => { acc.add(cur.type); return acc; }, new Set()), ) .sort((a, b) => a.localeCompare(b)) .map((item) => ({ label: item, value: item })); const columns = [ { id: 'main-name-2', key: 'name', label: 'Name', }, { id: 'main-income-2', key: 'income', label: 'Income', }, { id: 'main-type-2', key: 'type', label: 'Type', sortable: true, filter: { type: 'SingleSelect', options: filterTypeOptions }, }, ]; const useDownload = (props = {}) => ({ key: 'useDownload', props, useFilter: (columns, data) => [columns, data], Component: ({ data, initialData, ...rest }) => { const handleClick = () => { const csvData = initialData.map((row) => [row.name, row.income, row.type].join(',')); csvData.unshift('Name,Income,Type'); const dataStr = csvData.join('\n'); const csv = new Blob([dataStr], { type: 'text/csv' }); const csvUrl = URL.createObjectURL(csv); const hiddenElement = document.createElement('a'); hiddenElement.href = csvUrl; hiddenElement.target = '_blank'; hiddenElement.download = 'fetci.csv'; hiddenElement.click(); }; return ( <div> <Button onClick={handleClick} variant="outline-secondary"> <span className="icon-download-01" /> </Button> </div> ); }, }); const Example = () => { const [data, setData] = React.useState(dataTableInitialData); const bulkActionPlugin = useBulkActions({ onSelectionChange: (updatedRows) => { setData( data.map((row) => { const matchedRow = updatedRows.find((matchRow) => matchRow.id === row.id); if (matchedRow) { row = matchedRow; } return row; }), ); }, onActionClick: (action) => { let newData; switch (action) { case 'Delete': newData = data.filter((row) => { if (!row.selected) { return row; } }); break; case 'Howdy': newData = data.map((row) => { if (row.selected) { row.name = '🤠'; } return row; }); break; default: newData = data; break; } setData(newData); }, actions: ['Delete', 'Howdy'], }); const useSortPlugin = useSort(); const useSearchPlugin = useSearch(); const useSettingsPlugin = useSettings(); const usePaginationPlugin = usePagination(); const useFiltersPlugin = useFilters(); const useDownloadPlugin = useDownload({ initialData: dataTableInitialData }); return ( <DataTable id="demo-component-use-download" columns={columns} data={data} plugins={[ useDownloadPlugin, useSettingsPlugin, bulkActionPlugin, useSortPlugin, useSearchPlugin, usePaginationPlugin, useFiltersPlugin, ]} title="Clients" responsive /> ); }; render(<Example />);

const filterTypeOptions = Array.from(
    dataTableInitialData.reduce((acc, cur) => {
        acc.add(cur.type);

        return acc;
    }, new Set()),
)
    .sort((a, b) => a.localeCompare(b))
    .map((item) => ({ label: item, value: item }));

const columns = [
    {
        id: 'main-name-2',
        key: 'name',
        label: 'Name',
    },
    {
        id: 'main-income-2',
        key: 'income',
        label: 'Income',
    },
    {
        id: 'main-type-2',
        key: 'type',
        label: 'Type',
        sortable: true,
        filter: { type: 'SingleSelect', options: filterTypeOptions },
    },
];

const useDownload = (props = {}) => ({
    key: 'useDownload',
    props,
    useFilter: (columns, data) => [columns, data],
    Component: ({ data, initialData, ...rest }) => {
        const handleClick = () => {
            const csvData = initialData.map((row) => [row.name, row.income, row.type].join(','));

            csvData.unshift('Name,Income,Type');

            const dataStr = csvData.join('\n');

            const csv = new Blob([dataStr], { type: 'text/csv' });
            const csvUrl = URL.createObjectURL(csv);

            const hiddenElement = document.createElement('a');
            hiddenElement.href = csvUrl;
            hiddenElement.target = '_blank';
            hiddenElement.download = 'fetci.csv';
            hiddenElement.click();
        };

        return (
            <div>
                <Button onClick={handleClick} variant="outline-secondary">
                    <span className="icon-download-01" />
                </Button>
            </div>
        );
    },
});

const Example = () => {
    const [data, setData] = React.useState(dataTableInitialData);

    const bulkActionPlugin = useBulkActions({
        onSelectionChange: (updatedRows) => {
            setData(
                data.map((row) => {
                    const matchedRow = updatedRows.find((matchRow) => matchRow.id === row.id);
                    if (matchedRow) {
                        row = matchedRow;
                    }

                    return row;
                }),
            );
        },
        onActionClick: (action) => {
            let newData;

            switch (action) {
                case 'Delete':
                    newData = data.filter((row) => {
                        if (!row.selected) {
                            return row;
                        }
                    });
                    break;
                case 'Howdy':
                    newData = data.map((row) => {
                        if (row.selected) {
                            row.name = '🤠';
                        }

                        return row;
                    });
                    break;
                default:
                    newData = data;
                    break;
            }

            setData(newData);
        },
        actions: ['Delete', 'Howdy'],
    });
    const useSortPlugin = useSort();
    const useSearchPlugin = useSearch();
    const useSettingsPlugin = useSettings();
    const usePaginationPlugin = usePagination();
    const useFiltersPlugin = useFilters();
    const useDownloadPlugin = useDownload({ initialData: dataTableInitialData });

    return (
        <DataTable
            id="demo-component-use-download"
            columns={columns}
            data={data}
            plugins={[
                useDownloadPlugin,
                useSettingsPlugin,
                bulkActionPlugin,
                useSortPlugin,
                useSearchPlugin,
                usePaginationPlugin,
                useFiltersPlugin,
            ]}
            title="Clients"
            responsive
        />
    );
};

render(<Example />);

Props