import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Table

A data table component with sorting, pagination, row selection, resizable columns, reorderable columns, and virtualization for large datasets.

Live Example

Try It

Edit the code below to experiment with the component:

tsx

function Demo() {
  const data = [
    { key: 1, name: 'PostgreSQL', type: 'Database', status: 'Active' },
    { key: 2, name: 'MySQL', type: 'Database', status: 'Active' },
    { key: 3, name: 'SQLite', type: 'Database', status: 'Inactive' },
    { key: 4, name: 'Presto', type: 'Query Engine', status: 'Active' },
  ];
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
    { title: 'Type', dataIndex: 'type', key: 'type' },
    { title: 'Status', dataIndex: 'status', key: 'status', width: 100 },
  ];
  return <Table data={data} columns={columns} size="small" />;
}

With Pagination

tsx

function PaginatedTable() {
  const data = Array.from({ length: 20 }, (_, i) => ({
    key: i,
    name: 'Record ' + (i + 1),
    value: Math.round(Math.random() * 1000),
    category: ['A', 'B', 'C'][i % 3],
  }));
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Value', dataIndex: 'value', key: 'value', width: 100 },
    { title: 'Category', dataIndex: 'category', key: 'category', width: 100 },
  ];
  return (
    <Table
      data={data}
      columns={columns}
      size="small"
      pageSizeOptions={['5', '10']}
      defaultPageSize={5}
    />
  );
}

Loading State

tsx

function LoadingTable() {
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Status', dataIndex: 'status', key: 'status' },
  ];
  return <Table data={[]} columns={columns} size="small" loading />;
}

Props

Prop	Type	Default	Description
`size`	`string`	`"small"`	Table size.
`bordered`	`boolean`	`false`	Whether to show all table borders.
`loading`	`boolean`	`false`	Whether the table is in a loading state.
`sticky`	`boolean`	`true`	Whether the table header is sticky.
`resizable`	`boolean`	`false`	Whether columns can be resized by dragging column edges.
`reorderable`	`boolean`	`false`	EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts.
`usePagination`	`boolean`	`false`	Whether to enable pagination. When enabled, the table displays 5 rows per page.
`key`	`number`	`5`	-
`name`	`string`	`"1GB USB Flash Drive"`	-
`category`	`string`	`"Portable Storage"`	-
`price`	`number`	`9.99`	-
`height`	`number`	`350`	-
`defaultPageSize`	`number`	`5`	-
`pageSizeOptions`	`any`	`["5","10"]`	-
`data`	`any`	[{"key":1,"name":"Floppy Disk 10 pack","category":"Disk Storage","price":9.99},{"key":2,"name":"DVD 100 pack","category":"Optical Storage","price":27.99},{"key":3,"name":"128 GB SSD","category":"Harddrive","price":49.99},{"key":4,"name":"4GB 144mhz","category":"Memory","price":19.99},{"key":5,"name":"1GB USB Flash Drive","category":"Portable Storage","price":9.99},{"key":6,"name":"256 GB SSD","category":"Harddrive","price":89.99},{"key":7,"name":"1 TB SSD","category":"Harddrive","price":349.99},{"key":8,"name":"16 GB DDR4","category":"Memory","price":59.99},{"key":9,"name":"32 GB DDR5","category":"Memory","price":129.99},{"key":10,"name":"Blu-ray 50 pack","category":"Optical Storage","price":34.99},{"key":11,"name":"64 GB USB Drive","category":"Portable Storage","price":14.99},{"key":12,"name":"2 TB HDD","category":"Harddrive","price":59.99}]	-
`columns`	`any`	`[{"title":"Name","dataIndex":"name","key":"name","width":200},{"title":"Category","dataIndex":"category","key":"category","width":150},{"title":"Price","dataIndex":"price","key":"price","width":100}]`	-

Import

tsx

import { Table } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::