Table

Data tables display sets of data.

Tables are an important element in most web-based applications. We’ve presented a set of flexible standards to allow for a variety of table configurations. This flexibility enables you to configure your Table with the necessary functionality without over-complicating the design.

import * as React from 'react';
import {
  Table,
  TablePaginator,
  tableFilters,
  DefaultCell,
} from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
      stock: (index % 3) * 10,
      status: (index % 3) * 10 === 0 ? 'negative' : undefined,
      height: ((index % 10) + 1) * 10,
      width: ((index % 10) + 1) * 5,
      depth: ((index % 10) + 1) * 2,
      weight: ((index % 10) + 1) * 3,
      volume: ((index % 10) + 1) * 4,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(20)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
        Filter: tableFilters.TextFilter(),
        minWidth: 150,
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
        minWidth: 150,
        Filter: tableFilters.NumberRangeFilter(),
        Cell: (props) => {
          return <>${props.value}</>;
        },
      },
      {
        id: 'stock',
        Header: 'Stock',
        accessor: 'stock',
        minWidth: 150,
        Filter: tableFilters.NumberRangeFilter(),
        cellRenderer: (props) => {
          return (
            <DefaultCell
              {...props}
              status={props.cellProps.row.original.status}
            >
              {props.cellProps.row.original.stock}
            </DefaultCell>
          );
        },
      },
      {
        id: 'height',
        Header: 'Height',
        accessor: 'height',
        minWidth: 150,
        Filter: tableFilters.NumberRangeFilter(),
        Cell: (props) => {
          return <>{props.value}m</>;
        },
      },
      {
        id: 'width',
        Header: 'Width',
        accessor: 'width',
        minWidth: 150,
        Filter: tableFilters.NumberRangeFilter(),
        Cell: (props) => {
          return <>{props.value}m</>;
        },
      },
      {
        id: 'depth',
        Header: 'Depth',
        accessor: 'depth',
        minWidth: 150,
        Filter: tableFilters.NumberRangeFilter(),
        Cell: (props) => {
          return <>{props.value}m</>;
        },
      },
      {
        id: 'weight',
        Header: 'Weight',
        accessor: 'weight',
        minWidth: 150,
        Filter: tableFilters.NumberRangeFilter(),
        Cell: (props) => {
          return <>{props.value}kg</>;
        },
      },
      {
        id: 'volume',
        Header: 'Volume',
        accessor: 'volume',
        minWidth: 150,
        Filter: tableFilters.NumberRangeFilter(),
        Cell: (props) => {
          return <>{props.value} cubic meter</>;
        },
      },
    ],
    [],
  );

  const paginatorRenderer = React.useCallback((props) => {
    return <TablePaginator {...props} />;
  }, []);

  const rowProps = React.useCallback((row) => {
    return {
      status: row.original.status,
    };
  }, []);

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        className='table'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        isSelectable
        isResizable
        isSortable
        columnResizeMode='expand'
        rowProps={rowProps}
      />
    </div>
  );
};

Bentley makes extensive use of tables and data grids throughout its web applications. Use the following flexible grid format below in most circumstances as it provides functionality “built in” to the design, and because users learning how to consistently sort, filter, and search tables is an important skill to leverage.

Basic Usage

The most basic Table can be implemented by passing four props:

caption: The caption/title of the table. This prop is marked as optional for backward compatibility but still should be used in all cases.
data: an array containing table data displayed in the table. Each key in each object corresponds to each column’s accessor property.
columns: an array containing table column objects. Each column object requires a Header, which will be displayed as a column title, and id.
emptyTableContent: a JSX element table content shown when there is no data.

Note: To avoid bugs, always try memoizing props.

import * as React from 'react';
import { Table } from '@itwin/itwinui-react';

export default () => {
  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => ({
          product: `Product ${index + 1}`,
          price: ((index % 10) + 1) * 15,
        })),
    [],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table columns={columns} emptyTableContent='No data.' data={data} />
    </div>
  );
};

Note: The Table component is built based on react-table v7. For more information about react-table, see their docs.

Related sections: Commonly Used Props, All Props.

Sorting

To enable sorting, set isSortable to true. To handle sorting manually (e.g. on the server-side), also pass manualSortBy={true} to <Table>. Can use in conjunction with onSort or stateReducer to listen to sorting changes.

Sort arrows (↑ for ascending and ↓ for descending) are displayed in the header cells according to the following:

If a column is used for sorting, arrows are displayed regardless of hover.
If a column is not used for sorting but is sortable, the arrow appears only on hover to indicate the type of sorting that will apply when clicked.
If a column is not sortable, no arrow will appear at all.

Column specific props:

First sort option is ascending. To make descending as the first choice, pass sortDescFirst: true to the column object.
To disable sorting for a column, pass disableSortBy: true to the column object.

const columns = React.useMemo(
  () => [
    /* … */
    {
      Header: 'Name',
      accessor: 'name',
      sortDescFirst: true,
    },
    {
      Header: 'Description',
      accessor: 'description',
      disableSortBy: true,
    },
  ],
  [],
);

<Table
  /* … */
  columns={columns}
  isSortable
/>;

import * as React from 'react';
import { Table } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        isSortable
      />
    </div>
  );
};

Selection

The Table component supports row selection, allowing users to select one or more rows for actions by setting the isSelectable prop to true.

<Table
  /* … */
  data={data}
  columns={columns}
  emptyTableContent='No data.'
  isSelectable
/>

There are two available selection modes passed using the selectionMode prop: "single" and "multi" (default).

Multi-row selection

In multi-row selection (selectionMode="multi" | undefined), a column with checkboxes for toggling a row’s selection is added. This mode also supports Ctrl/Command + click and Shift + click shortcuts to select multiple rows.

import * as React from 'react';
import { Table } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        isSelectable
      />
    </div>
  );
};

Single-row selection

In single row selection mode (selectionMode="single"), users can select each row by clicking on the desired row.

Note: For accessibility reasons, in single-selection Tables, it is highly recommended to include a button in the primary cell of each row. More info.

const columns = React.useMemo(
  () =>
    [
      /* … */
      {
        /* … */
        Cell: ({ value }) => {
          return (
            <Anchor
              as="button"
              onClick={() => console.log(`Selected ${value}`)}
            >
              {value}
            </Anchor>
          );
        },
      },
    ] satisfies Column[],
  []
);

import * as React from 'react';
import { Table, Anchor } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
        Cell: ({ value }) => {
          return (
            <Anchor
              as='button'
              onClick={() => console.log(`Selected ${value}`)}
            >
              {value}
            </Anchor>
          );
        },
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        isSelectable
        selectionMode='single'
      />
    </div>
  );
};

Prevent accidental row selection

By default, selectRowOnClick is true. This is ideal for most cases. However, this can be disabled in use-cases where the loss of the selection state due to an accidental row click is too disruptive.

<Table
  /* … */
  selectRowOnClick={false}
/>

To prevent the selection of the row when just hoping to select the cell content, iTwinUI adds a wrapper to increase the hit size of the cell content. However, this does not happen if a cellRenderer is passed with custom children.

const columns = React.useMemo(
  () => [
    // hit-size increasing wrapper added since no cellRenderer.
    {
      /* … */
    },

    // hit-size increasing wrapper added since
    // <DefaultCell> children is not overridden.
    {
      /* … */
      cellRenderer: (props) => <DefaultCell {...props} />,
    },

    // hit-size increasing wrapper NOT added since
    // <DefaultCell> children is overridden.
    {
      /* … */
      cellRenderer: (props) => (
        <DefaultCell {...props}>
          <span>{props.value}</span>
        </DefaultCell>
      ),
    },
  ],
  [],
);

To prevent the selection of the row when clicking on custom content in Cell or cellRenderer, you may need to stop click event propagations.

const columns = React.useMemo(
  () => [
    /* … */
    {
      ...ActionColumn(),
      Cell: () => {
        return (
          <DropdownMenu
            menuItems={menuItems}
            onClick={(e) => e.stopPropagation()} // 👈
          >
            <IconButton
              styleType='borderless'
              onClick={(e) => e.stopPropagation()} // 👈
              aria-label='More options'
            >
              <SvgMore />
            </IconButton>
          </DropdownMenu>
        );
      },
    },
  ],
  [],
);

Subrow

The Table component supports hierarchical data structures allowing end users to display collapsible subrows. Each data entry in the data array can have a subRows array.

const data = React.useMemo(() => {
  return [
    {
      name: 'Row 1',
      description: 'Description',
      subRows: [{ name: 'Subrow 1', description: 'Description 1' }],
    },
    {
      name: 'Row 2',
      description: 'Description',
      subRows: [
        {
          name: 'Subrow 2',
          description: 'Description 2',
          subRows: [{ name: 'Subrow 2.1', description: 'Description 2.1' }],
        },
      ],
    },
  ];
}, []);

import * as React from 'react';
import { Table } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
      subRows: [
        {
          product: `Sub Product ${keyValue}`,
          price: (((index % 10) + 1) * 15) / 2,
        },
      ],
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
      />
    </div>
  );
};

Expandable content

Apart from collapsible subrows, custom collapsible content can also be rendered right after the row if it is expanded. This is done by passing a function to the subComponent prop.

import * as React from 'react';
import { Table, Text } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  const expandedSubComponent = React.useCallback(
    (row) => (
      <div style={{ padding: 16 }}>
        <Text>
          {row.original.product}: ${row.original.price}
        </Text>
      </div>
    ),
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        subComponent={expandedSubComponent}
      />
    </div>
  );
};

Note: Subrows and Expandable content cannot be used simultaneously.

Virtualization

For tables with large datasets, the enableVirtualization prop can be set to true to try to enhance performance by only rendering the rows that are currently in the viewport + some buffer rows.

Having a height on the table is required for virtualization to work.

Note: This feature is still considered experimental and so may have some performance issues, bugs, future changes, etc. If virtualization does not work, pagination is the next best alternative for large datasets.

import * as React from 'react';
import { Table } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(1000)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        className='table'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        enableVirtualization
      />
    </div>
  );
};

Pagination

Table pagination allows end users to divide large datasets into pages. An alternative to pagination is virtualization.

To enable pagination, pass the paginatorRenderer prop that takes TablePaginatorRendererProps as an argument and returns a pagination component (recommended: <TablePaginator>). Passing/Spreading props to TablePaginator handles all state management and is enough for basic use-cases.

Some of Table’s other pagination props:

pageSize: Number of rows per page (default: 25).
paginateExpandedRows: When false, it shows sub-rows in the current page instead of splitting them

const paginator = React.useCallback(
  (props) => {
    return <TablePaginator {...props} />;
  },
  [pageSizeList],
);

<Table
  /* … */
  pageSize={10}
  // initialState={{ pageSize: 10 }} // Alternatively, can set pageSize in initialState
  paginatorRenderer={paginator}
/>;

import * as React from 'react';
import { Table, TablePaginator } from '@itwin/itwinui-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(100)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  const pageSizeList = React.useMemo(() => [10, 25, 50], []);
  const paginator = React.useCallback(
    (props) => <TablePaginator {...props} pageSizeList={pageSizeList} />,
    [pageSizeList],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        pageSize={50}
        density='condensed'
        paginatorRenderer={paginator}
        style={{ height: '300px' }}
      />
    </div>
  );
};

Controlled state / `stateReducer`

The uncontrolled Table state is sufficient for most use-cases. However, for advanced control over the table state, pass a stateReducer function. This function receives the action, prevState, and newState and thus allows to run custom logic based on these arguments and return a custom new state.

The stateReducer function also provides the Table’s instance. This allows manually triggering actions on the Table.

const tableInstance = React.useRef<TableInstance<DemoData>>(undefined);

// Example of manually triggering an action
const toggleRowSelected = (id: string, checked: boolean) => {
  tableInstance.current?.toggleRowSelected(id, checked);
}

<Table
  /* … */
  stateReducer={
    useCallback((newState, action, prevState, instance) => {
      tableInstance.current = instance;

      // Some custom logic depending on action
      // if (action.type === "…") {
      //   …
      // }

      return newState;
    }, []) satisfies NonNullable<TableOptions<DemoData>['stateReducer']>
  }
/>

Column manager

The ActionColumn is an optional last column to perform actions on each row. If columnManager is set to true, a column manager button is displayed in the action column’s header cell to help toggle the visibility of certain columns.

const columns = React.useMemo(
  () => [
    /* … */

    // Action column should be the last column.
    {
      // Shows the column manager button in the header cell
      ...ActionColumn({ columnManager: true }),

      // Shows actions for each row
      Cell: () => (
        <DropdownMenu menuItems={menuItems} onClick={(e) => e.stopPropagation()}>
          <IconButton
            styleType='borderless'
            onClick={(e) => e.stopPropagation()}
            aria-label='More options'
          >
            <SvgMore />
          </IconButton>
        </DropdownMenu>
      ),
    },
  ],
  [],
);

<Table
  /* … */
  columns={columns}
/>;

import * as React from 'react';
import {
  ActionColumn,
  DropdownMenu,
  MenuItem,
  IconButton,
  Table,
} from '@itwin/itwinui-react';
import { SvgMore } from '@itwin/itwinui-icons-react';

export default () => {
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const menuItems = React.useCallback((close) => {
    return [
      <MenuItem key={1} onClick={() => close()}>
        Edit
      </MenuItem>,
      <MenuItem key={2} onClick={() => close()}>
        Delete
      </MenuItem>,
    ];
  }, []);

  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
      {
        ...ActionColumn({ columnManager: true }),
        Cell: () => (
          <DropdownMenu
            menuItems={menuItems}
            onClick={(e) => e.stopPropagation()}
          >
            <IconButton
              aria-label='Column manager'
              styleType='borderless'
              onClick={(e) => e.stopPropagation()}
            >
              <SvgMore />
            </IconButton>
          </DropdownMenu>
        ),
        sticky: 'right',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
      />
    </div>
  );
};

Density

There are three available density options: "default", "condensed", and "extra-condensed".

import * as React from 'react';
import { Flex, LabeledSelect, Table } from '@itwin/itwinui-react';

export default () => {
  const [density, setDensity] = React.useState('default');
  const generateItem = React.useCallback((index, parentRow = '') => {
    const keyValue = parentRow ? `${parentRow}.${index + 1}` : `${index + 1}`;
    return {
      product: `Product ${keyValue}`,
      price: ((index % 10) + 1) * 15,
    };
  }, []);

  const data = React.useMemo(
    () =>
      Array(3)
        .fill(null)
        .map((_, index) => generateItem(index)),
    [generateItem],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
      },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <LabeledSelect
        label='Density'
        options={[
          { value: 'default', label: 'Default' },
          { value: 'condensed', label: 'Condensed' },
          { value: 'extra-condensed', label: 'Extra-condensed' },
        ]}
        onChange={(value) => setDensity(value)}
      />
      <Table
        caption='Products'
        columns={columns}
        emptyTableContent='No data.'
        data={data}
        density={density}
      />
    </div>
  );
};

Editing

To enable editing for each Table cell, the EditableCell component should be passed into cellRenderer of the column object.

const onCellEdit = React.useCallback(
  (columnId: string, value: string, rowData: T) => {
    /* … */
  },
  []
);

const columns = React.useMemo(
  () => [
    /* … */
    {
      /* … */
      cellRenderer: (props) => <EditableCell {...props} onCellEdit={onCellEdit} />,
    },
  ],
  [],
);

<Table
  /* … */
  columns={columns}
/>

import * as React from 'react';
import { EditableCell, DefaultCell, Table } from '@itwin/itwinui-react';

export default () => {
  const [data, setData] = React.useState([
    { product: 'Product 1', price: '$15' },
    { product: 'Product 2', price: '$30' },
    { product: 'Product 3', price: 'Fetching...' },
  ]);

  const onCellEdit = React.useCallback((columnId, value, rowData) => {
    setData((oldData) => {
      const newData = [...oldData];
      const index = oldData.indexOf(rowData);
      const newObject = { ...newData[index] };
      newObject[columnId] = value;
      newData[index] = newObject;
      return newData;
    });
  }, []);

  const cellRenderer = React.useCallback(
    (props) => (
      <>
        {props.cellProps.value !== 'Fetching...' ? (
          <EditableCell {...props} onCellEdit={onCellEdit} />
        ) : (
          <DefaultCell {...props} />
        )}
      </>
    ),
    [onCellEdit],
  );

  const columns = React.useMemo(
    () => [
      {
        id: 'product',
        Header: 'Product',
        accessor: 'product',
        cellRenderer,
      },
      {
        id: 'price',
        Header: 'Price',
        accessor: 'price',
        cellRenderer,
      },
    ],
    [cellRenderer],
  );

  return (
    <Table
      caption='Products'
      className='demo-container'
      emptyTableContent='No data.'
      columns={columns}
      data={data}
    />
  );
};

More examples

Examples for some yet-to-be-documented features:

Commonly used props

`initialState`

Initial state can be set using the initialState prop. E.g. initial sort, initial filters, and initially selected rows.

<Table
  /* … */
  initialState={{
    sortBy: [{ id: 'name', desc: false }], // Sort by name ascending
    selectedRowIds: { 1: true, '2.0': true }, // Pre-select rows with IDs 1 and 2
  }}
/>

import * as React from 'react';
import { Table, tableFilters } from '@itwin/itwinui-react';

export default () => {
  const columns = React.useMemo(
    () => [
      {
        id: 'name',
        Header: 'Name',
        accessor: 'name',
        Filter: tableFilters.TextFilter(),
      },
      {
        id: 'description',
        Header: 'Description',
        accessor: 'description',
        maxWidth: 200,
      },
    ],
    [],
  );

  const data = React.useMemo(
    () => [
      { name: 'Name17', description: 'Description17' },
      { name: 'Name18', description: 'Description18' },
      { name: 'Name19', description: 'Description19' },
      { name: 'Name20', description: 'Description20' },
      { name: 'Name21', description: 'Description21' },
      { name: 'Name22', description: 'Description22' },
    ],
    [],
  );

  return (
    <div className='demo-container'>
      <Table
        caption='Products'
        columns={columns}
        data={data}
        emptyTableContent='No data.'
        isSelectable
        initialState={{
          filters: [{ id: 'name', value: '1' }],
          selectedRowIds: { 0: true, 1: true, 4: true, 5: true },
        }}
      />
    </div>
  );
};

`getRowId`

By default, row ids are based on depth and row indexes (e.g. 3-0-1 for the fourth row’s first subrow’s second row). Use getRowId for custom ids (e.g. from data source) to have a 1-to-1 match between the data and the row. E.g. useful when you want to select rows in initialState.selectedRowIds.

<Table
  /* … */
  getRowId={(rowData) => rowData.id}
  initialState={{ selectedRowIds: { 28: true } }}
/>

Props

Prop	Description	Default
data	Table data list. Must be memoized. Supports expandable sub-rows using the `subRows` field in data entries. If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing. T[]
columns	List of columns. Should not have a top-level `Header` or a `columns` sub-property. They are only allowed to be passed for backwards compatibility. See migration guide. Column<T>[]
initialState	Partial<TableState<T>>
stateReducer	(newState: TableState<T>, action: ActionType, previousState: TableState<T>, instance?: TableInstance<T>) => TableState<...>
useControlledState	(state: TableState<T>, meta: MetaBase<T>) => TableState<T>
defaultColumn	Partial<Column<T>>
getSubRows	(originalRow: T, relativeIndex: number) => T[]
getRowId	(originalRow: T, relativeIndex: number, parent?: Row<T>) => string
autoResetHiddenColumns	boolean
manualRowSelectedKey	string
autoResetSelectedRows	boolean
selectSubRows	boolean
manualExpandedKey	string
paginateExpandedRows	boolean
expandSubRows	boolean
autoResetExpanded	boolean
manualFilters	boolean
disableFilters	boolean
defaultCanFilter	boolean
filterTypes	FilterTypes<T>
autoResetFilters	boolean
pageCount	number
manualPagination	boolean
autoResetPage	boolean
globalFilter	string \| ((rows: Row<T>[], columnIds: IdType<T>[], filterValue: any) => Row<T>[])
manualGlobalFilter	boolean
autoResetGlobalFilter	boolean
disableGlobalFilter	boolean
autoResetResize	boolean
manualSortBy	boolean
defaultCanSort	boolean
disableMultiSort	boolean
isMultiSortEvent	(e: MouseEvent<Element, MouseEvent>) => boolean
maxMultiSortColCount	number
disableSortRemove	boolean
disabledMultiRemove	boolean
orderByFn	(rows: Row<T>[], sortFns: OrderByFn<T>[], directions: boolean[]) => Row<T>[]
sortTypes	Record<string, SortByFn<T>>
autoResetSortBy	boolean
columnResizeMode	Column's resize mode. - `fit` - when resizing it affects current and the next column, e.g. when increasing width of current column, next column's width will decrease. - `expand` - when resizing it affects only the current column, e.g. when increasing width of the current column, next column's width remains the same. "fit" \| "expand"	'fit'
slot	string
style	CSSProperties
title	string
key	Key
defaultChecked	boolean
defaultValue	string \| number \| readonly string[]
suppressContentEditableWarning	boolean
suppressHydrationWarning	boolean
accessKey	string
autoCapitalize	"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})
autoFocus	boolean
className	string
contentEditable	Booleanish \| "inherit" \| "plaintext-only"
contextMenu	string
dir	string
draggable	Booleanish
enterKeyHint	"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"
hidden	boolean
id	string
lang	string
nonce	string
spellCheck	Booleanish
tabIndex	number
translate	"yes" \| "no"
radioGroup	string
about	string
content	string
datatype	string
inlist	any
prefix	string
property	string
rel	string
resource	string
rev	string
typeof	string
vocab	string
autoCorrect	string
autoSave	string
color	string
itemProp	string
itemScope	boolean
itemType	string
itemID	string
itemRef	string
results	number
security	string
unselectable	"off" \| "on"
popover	"" \| "auto" \| "manual"
popoverTargetAction	"toggle" \| "show" \| "hide"
popoverTarget	string
inert	@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert boolean
inputMode	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} "search" \| "text" \| "none" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"
is	Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} string
aria-activedescendant	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. string
aria-atomic	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. Booleanish
aria-autocomplete	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. "none" \| "inline" \| "list" \| "both"
aria-braillelabel	Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label. string
aria-brailleroledescription	Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription. string
aria-busy	Booleanish
aria-checked	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected. boolean \| "true" \| "false" \| "mixed"
aria-colcount	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex. number
aria-colindex	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan. number
aria-colindextext	Defines a human readable text alternative of aria-colindex. @see aria-rowindextext. string
aria-colspan	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan. number
aria-controls	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns. string
aria-current	Indicates the element that represents the current item within a container or set of related elements. boolean \| "time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date"
aria-describedby	Identifies the element (or elements) that describes the object. @see aria-labelledby string
aria-description	Defines a string value that describes or annotates the current element. @see related aria-describedby. string
aria-details	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby. string
aria-disabled	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly. Booleanish
aria-dropeffect	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1 "link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"
aria-errormessage	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby. string
aria-expanded	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. Booleanish
aria-flowto	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. string
aria-grabbed	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1 Booleanish
aria-haspopup	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. boolean \| "dialog" \| "menu" \| "true" \| "false" \| "listbox" \| "tree" \| "grid"
aria-hidden	Indicates whether the element is exposed to an accessibility API. @see aria-disabled. Booleanish
aria-invalid	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage. boolean \| "true" \| "false" \| "grammar" \| "spelling"
aria-keyshortcuts	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. string
aria-label	Defines a string value that labels the current element. @see aria-labelledby. string
aria-labelledby	Identifies the element (or elements) that labels the current element. @see aria-describedby. string
aria-level	Defines the hierarchical level of an element within a structure. number
aria-live	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. "off" \| "assertive" \| "polite"
aria-modal	Indicates whether an element is modal when displayed. Booleanish
aria-multiline	Indicates whether a text box accepts multiple lines of input or only a single line. Booleanish
aria-multiselectable	Indicates that the user may select more than one item from the current selectable descendants. Booleanish
aria-orientation	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. "horizontal" \| "vertical"
aria-owns	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls. string
aria-placeholder	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. string
aria-posinset	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize. number
aria-pressed	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected. boolean \| "true" \| "false" \| "mixed"
aria-readonly	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled. Booleanish
aria-relevant	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic. "text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"
aria-required	Indicates that user input is required on the element before a form may be submitted. Booleanish
aria-roledescription	Defines a human-readable, author-localized description for the role of an element. string
aria-rowcount	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex. number
aria-rowindex	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan. number
aria-rowindextext	Defines a human readable text alternative of aria-rowindex. @see aria-colindextext. string
aria-rowspan	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan. number
aria-selected	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed. Booleanish
aria-setsize	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset. number
aria-sort	Indicates if items in a table or grid are sorted in ascending or descending order. "none" \| "ascending" \| "descending" \| "other"
aria-valuemax	Defines the maximum allowed value for a range widget. number
aria-valuemin	Defines the minimum allowed value for a range widget. number
aria-valuenow	Defines the current value for a range widget. @see aria-valuetext. number
aria-valuetext	Defines the human readable text alternative of aria-valuenow for a range widget. string
dangerouslySetInnerHTML	{ __html: string \| TrustedHTML; }
onCopy	ClipboardEventHandler<HTMLDivElement>
onCopyCapture	ClipboardEventHandler<HTMLDivElement>
onCut	ClipboardEventHandler<HTMLDivElement>
onCutCapture	ClipboardEventHandler<HTMLDivElement>
onPaste	ClipboardEventHandler<HTMLDivElement>
onPasteCapture	ClipboardEventHandler<HTMLDivElement>
onCompositionEnd	CompositionEventHandler<HTMLDivElement>
onCompositionEndCapture	CompositionEventHandler<HTMLDivElement>
onCompositionStart	CompositionEventHandler<HTMLDivElement>
onCompositionStartCapture	CompositionEventHandler<HTMLDivElement>
onCompositionUpdate	CompositionEventHandler<HTMLDivElement>
onCompositionUpdateCapture	CompositionEventHandler<HTMLDivElement>
onFocus	FocusEventHandler<HTMLDivElement>
onFocusCapture	FocusEventHandler<HTMLDivElement>
onBlur	FocusEventHandler<HTMLDivElement>
onBlurCapture	FocusEventHandler<HTMLDivElement>
onChange	FormEventHandler<HTMLDivElement>
onChangeCapture	FormEventHandler<HTMLDivElement>
onBeforeInput	FormEventHandler<HTMLDivElement>
onBeforeInputCapture	FormEventHandler<HTMLDivElement>
onInput	FormEventHandler<HTMLDivElement>
onInputCapture	FormEventHandler<HTMLDivElement>
onReset	FormEventHandler<HTMLDivElement>
onResetCapture	FormEventHandler<HTMLDivElement>
onSubmit	FormEventHandler<HTMLDivElement>
onSubmitCapture	FormEventHandler<HTMLDivElement>
onInvalid	FormEventHandler<HTMLDivElement>
onInvalidCapture	FormEventHandler<HTMLDivElement>
onLoad	ReactEventHandler<HTMLDivElement>
onLoadCapture	ReactEventHandler<HTMLDivElement>
onError	ReactEventHandler<HTMLDivElement>
onErrorCapture	ReactEventHandler<HTMLDivElement>
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyDownCapture	KeyboardEventHandler<HTMLDivElement>
onKeyPress	@deprecated Use `onKeyUp` or `onKeyDown` instead KeyboardEventHandler<HTMLDivElement>
onKeyPressCapture	@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onKeyUpCapture	KeyboardEventHandler<HTMLDivElement>
onAbort	ReactEventHandler<HTMLDivElement>
onAbortCapture	ReactEventHandler<HTMLDivElement>
onCanPlay	ReactEventHandler<HTMLDivElement>
onCanPlayCapture	ReactEventHandler<HTMLDivElement>
onCanPlayThrough	ReactEventHandler<HTMLDivElement>
onCanPlayThroughCapture	ReactEventHandler<HTMLDivElement>
onDurationChange	ReactEventHandler<HTMLDivElement>
onDurationChangeCapture	ReactEventHandler<HTMLDivElement>
onEmptied	ReactEventHandler<HTMLDivElement>
onEmptiedCapture	ReactEventHandler<HTMLDivElement>
onEncrypted	ReactEventHandler<HTMLDivElement>
onEncryptedCapture	ReactEventHandler<HTMLDivElement>
onEnded	ReactEventHandler<HTMLDivElement>
onEndedCapture	ReactEventHandler<HTMLDivElement>
onLoadedData	ReactEventHandler<HTMLDivElement>
onLoadedDataCapture	ReactEventHandler<HTMLDivElement>
onLoadedMetadata	ReactEventHandler<HTMLDivElement>
onLoadedMetadataCapture	ReactEventHandler<HTMLDivElement>
onLoadStart	ReactEventHandler<HTMLDivElement>
onLoadStartCapture	ReactEventHandler<HTMLDivElement>
onPause	ReactEventHandler<HTMLDivElement>
onPauseCapture	ReactEventHandler<HTMLDivElement>
onPlay	ReactEventHandler<HTMLDivElement>
onPlayCapture	ReactEventHandler<HTMLDivElement>
onPlaying	ReactEventHandler<HTMLDivElement>
onPlayingCapture	ReactEventHandler<HTMLDivElement>
onProgress	ReactEventHandler<HTMLDivElement>
onProgressCapture	ReactEventHandler<HTMLDivElement>
onRateChange	ReactEventHandler<HTMLDivElement>
onRateChangeCapture	ReactEventHandler<HTMLDivElement>
onResize	ReactEventHandler<HTMLDivElement>
onResizeCapture	ReactEventHandler<HTMLDivElement>
onSeeked	ReactEventHandler<HTMLDivElement>
onSeekedCapture	ReactEventHandler<HTMLDivElement>
onSeeking	ReactEventHandler<HTMLDivElement>
onSeekingCapture	ReactEventHandler<HTMLDivElement>
onStalled	ReactEventHandler<HTMLDivElement>
onStalledCapture	ReactEventHandler<HTMLDivElement>
onSuspend	ReactEventHandler<HTMLDivElement>
onSuspendCapture	ReactEventHandler<HTMLDivElement>
onTimeUpdate	ReactEventHandler<HTMLDivElement>
onTimeUpdateCapture	ReactEventHandler<HTMLDivElement>
onVolumeChange	ReactEventHandler<HTMLDivElement>
onVolumeChangeCapture	ReactEventHandler<HTMLDivElement>
onWaiting	ReactEventHandler<HTMLDivElement>
onWaitingCapture	ReactEventHandler<HTMLDivElement>
onAuxClick	MouseEventHandler<HTMLDivElement>
onAuxClickCapture	MouseEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onClickCapture	MouseEventHandler<HTMLDivElement>
onContextMenu	MouseEventHandler<HTMLDivElement>
onContextMenuCapture	MouseEventHandler<HTMLDivElement>
onDoubleClick	MouseEventHandler<HTMLDivElement>
onDoubleClickCapture	MouseEventHandler<HTMLDivElement>
onDrag	DragEventHandler<HTMLDivElement>
onDragCapture	DragEventHandler<HTMLDivElement>
onDragEnd	DragEventHandler<HTMLDivElement>
onDragEndCapture	DragEventHandler<HTMLDivElement>
onDragEnter	DragEventHandler<HTMLDivElement>
onDragEnterCapture	DragEventHandler<HTMLDivElement>
onDragExit	DragEventHandler<HTMLDivElement>
onDragExitCapture	DragEventHandler<HTMLDivElement>
onDragLeave	DragEventHandler<HTMLDivElement>
onDragLeaveCapture	DragEventHandler<HTMLDivElement>
onDragOver	DragEventHandler<HTMLDivElement>
onDragOverCapture	DragEventHandler<HTMLDivElement>
onDragStart	DragEventHandler<HTMLDivElement>
onDragStartCapture	DragEventHandler<HTMLDivElement>
onDrop	DragEventHandler<HTMLDivElement>
onDropCapture	DragEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseDownCapture	MouseEventHandler<HTMLDivElement>
onMouseEnter	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseMove	MouseEventHandler<HTMLDivElement>
onMouseMoveCapture	MouseEventHandler<HTMLDivElement>
onMouseOut	MouseEventHandler<HTMLDivElement>
onMouseOutCapture	MouseEventHandler<HTMLDivElement>
onMouseOver	MouseEventHandler<HTMLDivElement>
onMouseOverCapture	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onMouseUpCapture	MouseEventHandler<HTMLDivElement>
onSelectCapture	ReactEventHandler<HTMLDivElement>
onTouchCancel	TouchEventHandler<HTMLDivElement>
onTouchCancelCapture	TouchEventHandler<HTMLDivElement>
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchEndCapture	TouchEventHandler<HTMLDivElement>
onTouchMove	TouchEventHandler<HTMLDivElement>
onTouchMoveCapture	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
onTouchStartCapture	TouchEventHandler<HTMLDivElement>
onPointerDown	PointerEventHandler<HTMLDivElement>
onPointerDownCapture	PointerEventHandler<HTMLDivElement>
onPointerMove	PointerEventHandler<HTMLDivElement>
onPointerMoveCapture	PointerEventHandler<HTMLDivElement>
onPointerUp	PointerEventHandler<HTMLDivElement>
onPointerUpCapture	PointerEventHandler<HTMLDivElement>
onPointerCancel	PointerEventHandler<HTMLDivElement>
onPointerCancelCapture	PointerEventHandler<HTMLDivElement>
onPointerEnter	PointerEventHandler<HTMLDivElement>
onPointerLeave	PointerEventHandler<HTMLDivElement>
onPointerOver	PointerEventHandler<HTMLDivElement>
onPointerOverCapture	PointerEventHandler<HTMLDivElement>
onPointerOut	PointerEventHandler<HTMLDivElement>
onPointerOutCapture	PointerEventHandler<HTMLDivElement>
onGotPointerCapture	PointerEventHandler<HTMLDivElement>
onGotPointerCaptureCapture	PointerEventHandler<HTMLDivElement>
onLostPointerCapture	PointerEventHandler<HTMLDivElement>
onLostPointerCaptureCapture	PointerEventHandler<HTMLDivElement>
onScroll	UIEventHandler<HTMLDivElement>
onScrollCapture	UIEventHandler<HTMLDivElement>
onWheel	WheelEventHandler<HTMLDivElement>
onWheelCapture	WheelEventHandler<HTMLDivElement>
onAnimationStart	AnimationEventHandler<HTMLDivElement>
onAnimationStartCapture	AnimationEventHandler<HTMLDivElement>
onAnimationEnd	AnimationEventHandler<HTMLDivElement>
onAnimationEndCapture	AnimationEventHandler<HTMLDivElement>
onAnimationIteration	AnimationEventHandler<HTMLDivElement>
onAnimationIterationCapture	AnimationEventHandler<HTMLDivElement>
onToggle	ToggleEventHandler<HTMLDivElement>
onBeforeToggle	ToggleEventHandler<HTMLDivElement>
onTransitionCancel	TransitionEventHandler<HTMLDivElement>
onTransitionCancelCapture	TransitionEventHandler<HTMLDivElement>
onTransitionEnd	TransitionEventHandler<HTMLDivElement>
onTransitionEndCapture	TransitionEventHandler<HTMLDivElement>
onTransitionRun	TransitionEventHandler<HTMLDivElement>
onTransitionRunCapture	TransitionEventHandler<HTMLDivElement>
onTransitionStart	TransitionEventHandler<HTMLDivElement>
onTransitionStartCapture	TransitionEventHandler<HTMLDivElement>
isLoading	Flag whether data is loading. boolean	false
emptyTableContent	Content shown when there is no data. ReactNode
isSelectable	Flag whether table rows can be selectable. boolean	false
onSelect	Handler for rows selection. Must be memoized. This is triggered only by user initiated actions (i.e. data change will not call it). (selectedData: T[], tableState?: TableState<T>) => void
onRowClick	Handler for when a row is clicked. Must be memoized. (event: MouseEvent<Element, MouseEvent>, row: Row<T>) => void
selectionMode	Modify the selection mode of the table. The column with checkboxes will not be present with 'single' selection mode. "multi" \| "single"	'multi'
isSortable	Flag whether table columns can be sortable. boolean	false
onSort	Callback function when sort changes. Use with `manualSortBy` to handle sorting yourself e.g. sort in server-side. Must be memoized. (state: TableState<T>) => void
onBottomReached	Callback function when scroll reaches bottom. Can be used for lazy-loading the data. () => void
onRowInViewport	Callback function when row is in viewport. (rowData: T) => void
intersectionMargin	Margin in pixels when row is considered to be already in viewport. Used for `onBottomReached` and `onRowInViewport`. number	300
subComponent	A function that will be used for rendering a component for each row if that row is expanded. Component will be placed right after the row. Can return false/null if row should not be expandable. (row: Row<T>) => ReactNode
expanderCell	A function used for overriding default expander cell. `subComponent` must be present. Make sure to trigger `cellProps.row.toggleRowExpanded()`. (cellProps: CellProps<T>) => ReactNode
onExpand	Handler for row expand events. Will trigger when expanding and collapsing rows. (expandedData: T[], tableState?: TableState<T>) => void
onFilter	Callback function when filters change. Use with `manualFilters` to handle filtering yourself e.g. filter in server-side. Must be memoized. (filters: TableFilterValue<T>[], state: TableState<T>, filteredData?: Row<T>[]) => void
globalFilterValue	Value used for global filtering. Use with `globalFilter` and/or `manualGlobalFilter` to handle filtering yourself e.g. filter in server-side. Must be memoized. unknown
emptyFilteredTableContent	Content shown when there is no data after filtering. ReactNode
isRowDisabled	Function that should return true if a row is disabled (i.e. cannot be selected or expanded). If not specified, all rows are enabled. (rowData: T) => boolean
rowProps	Function that should return custom props passed to the each row. Must be memoized. (row: Row<T>) => ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { status?: "positive" \| ... 1 more ... \| "negative"; isLoading?: boolean; }
density	Modify the density of the table (adjusts the row height). "default" \| "condensed" \| "extra-condensed"	'default'
selectRowOnClick	Flag whether to select a row when clicked anywhere inside of it. boolean	true
paginatorRenderer	Function that takes `TablePaginatorRendererProps` as an argument and returns pagination component. Recommended to use `TablePaginator`. Passing `props` to `TablePaginator` handles all state management and is enough for basic use-cases. (props: TablePaginatorRendererProps) => ReactNode
pageSize	Number of rows per page. number	25
isResizable	Flag whether columns are resizable. In order to disable resizing for specific column, set `disableResizing: true` for that column. boolean	false
styleType	Style of the table. "default" \| "zebra-rows"	'default'
enableVirtualization	Virtualization is used for the scrollable table body. Height on the table is required for virtualization to work. boolean	false
enableColumnReordering	Flag whether columns can be reordered. boolean	false
headerWrapperProps	Passes props to Table header wrapper. DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
headerProps	Passes props to Table header. DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
bodyProps	Passes custom props to Table body. DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
tableProps	Passes props to the `role="table"` element within the wrapper. If `tableProps` or `role` is passed to `Table`, all ARIA attributes passed to `Table` will be passed to the wrapper. Else, all ARIA attributes will be passed to the inner element with `role="table"`. DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
emptyTableContentProps	Passes custom props to empty table. DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
scrollToRow	Function that returns index of the row that you want to scroll to. When using with lazy-loading table, you need to take care that row is already loaded. It doesn't work with paginated tables. @beta (rows: Row<T>[], data: T[]) => number
caption	Caption for the table. Although optional for backward compatibility, it is recommended to use it for accessibility purposes. string	"Table"
role	If `tableProps` or `role` is passed to `Table`, all ARIA attributes passed to `Table` will be passed to the wrapper. Else, all ARIA attributes will be passed to the inner element with `role="table"`. AriaRole

TablePaginator

Prop	Description	Default
focusActivationMode	Control whether focusing tabs (using arrow keys) should automatically select them. Use 'manual' if tab panel content is not preloaded. "auto" \| "manual"	'manual'
pageSizeList	Array of possible page size options. When provided then shows the range of rows within the current page and page size selection. number[]
localization	Object of labels and functions used for pagination localization. { pageSizeLabel?: (size: number) => string; rangeLabel?: (startIndex: number, endIndex: number, totalRows: number, isLoading: boolean) => string; previousPage?: string; nextPage?: string; goToPageLabel?: (page: number) => string; rowsPerPageLabel?: string; rowsSelectedLabel?: (totalSelectedRowsCount: number) => stri...
currentPage	The zero-based index of the current page. number
totalRowsCount	Total number of rows. number
pageSize	Number of rows per page. number
onPageChange	Callback when page is changed. (page: number) => void
onPageSizeChange	Callback when page size is changed. (size: number) => void
size	Modify the size of the pagination (adjusts the elements size). "default" \| "small"	'default' if Table density is `default` else `small`
isLoading	Flag whether data is still loading and total rows count is not known. boolean	false
totalSelectedRowsCount	Total number of rows selected (for mutli-selection mode only) number
id	string
className	string
style	CSSProperties