Skip to main content
Version: Next

Table

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

Live Example​

Loading component...

Try It​

Edit the code below to experiment with the component:

Live Editor
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" />;
}
Result
Loading...

With Pagination​

Live Editor
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}
    />
  );
}
Result
Loading...

Loading State​

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

Props​

PropTypeDefaultDescription
sizestring"small"Table size.
borderedbooleanfalseWhether to show all table borders.
loadingbooleanfalseWhether the table is in a loading state.
stickybooleantrueWhether the table header is sticky.
resizablebooleanfalseWhether columns can be resized by dragging column edges.
reorderablebooleanfalseEXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts.
usePaginationbooleanfalseWhether to enable pagination. When enabled, the table displays 5 rows per page.
keynumber5-
namestring"1GB USB Flash Drive"-
categorystring"Portable Storage"-
pricenumber9.99-
heightnumber350-
defaultPageSizenumber5-
pageSizeOptionsany["5","10"]-
dataany[{"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}]-
columnsany[{"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​

import { Table } from '@superset-ui/core/components';
Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.