Table Component Reference

Table component is used to create virtual tables without writing boilerplate markup. Headless API should be used for more flexibility.

import { useVirtual, Table } from "@af-utils/react-table";

const columns = [{ key: "a" }, { key: "b" }];

const getRowData = i => ({
    a: `cell_a_${i}`,
    b: `cell_b_${i}`
});

const SimpleTable = () => {
    const model = useVirtual({
        itemCount: 10000
    });

    return <Table model={model} getRowData={getRowData} columns={columns} />;
};

Installation

# npm
npm i -S @af-utils/styled @af-utils/react-table @af-utils/react-virtual-headless prop-types use-sync-external-store

# yarn
yarn add @af-utils/styled @af-utils/react-table @af-utils/react-virtual-headless prop-types use-sync-external-store

model: Model

Required. Return value of useVirtual.

getRowData: Function(rowIndex: Integer) => Row

Required.

columns: Array

Required.

getRowProps: Function(model, i, rowData) => Object

Will be spread to row; must return ref.

getKey: Function(i, itemData) => Integer

Defaults to: i => i. if you have unique id to pass as key - it may be more efficient.

headless: Boolean

Should render thead or not.

footer: Boolean

Should render tfoot or not.

components: Object

See components implementation

All other props are passed to outermost div.