docs/developer_docs/components/design-system/table.mdx

---
title: Table
sidebar_label: Table
---

<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->

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

<StoryWithControls
  component="Table"
  props={{
  size: "small",
  bordered: false,
  loading: false,
  sticky: true,
  resizable: false,
  reorderable: false,
  usePagination: false,
  key: 5,
  name: "1GB USB Flash Drive",
  category: "Portable Storage",
  price: 9.99,
  height: 350,
  defaultPageSize: 5,
  pageSizeOptions: [
    "5",
    "10"
  ],
  data: [
    {
      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: [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      width: 200
    },
    {
      title: "Category",
      dataIndex: "category",
      key: "category",
      width: 150
    },
    {
      title: "Price",
      dataIndex: "price",
      key: "price",
      width: 100
    }
  ]
}}
  controls={[
  {
    name: "size",
    label: "Size",
    type: "select",
    options: [
      "small",
      "middle",
      "large"
    ],
    description: "Table size."
  },
  {
    name: "bordered",
    label: "Bordered",
    type: "boolean",
    description: "Whether to show all table borders."
  },
  {
    name: "loading",
    label: "Loading",
    type: "boolean",
    description: "Whether the table is in a loading state."
  },
  {
    name: "sticky",
    label: "Sticky",
    type: "boolean",
    description: "Whether the table header is sticky."
  },
  {
    name: "resizable",
    label: "Resizable",
    type: "boolean",
    description: "Whether columns can be resized by dragging column edges."
  },
  {
    name: "reorderable",
    label: "Reorderable",
    type: "boolean",
    description: "EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts."
  },
  {
    name: "usePagination",
    label: "Use Pagination",
    type: "boolean",
    description: "Whether to enable pagination. When enabled, the table displays 5 rows per page."
  },
  {
    name: "key",
    label: "Key",
    type: "number"
  },
  {
    name: "name",
    label: "Name",
    type: "text"
  },
  {
    name: "category",
    label: "Category",
    type: "text"
  },
  {
    name: "price",
    label: "Price",
    type: "number"
  }
]}
/>

## Try It

Edit the code below to experiment with the component:

```tsx live
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 live
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 live
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-ui/core/components';
```

---

:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Table/Table.stories.tsx).
:::