docs/developer_docs/components/design-system/table.mdx - superset - Git at Google

 ---
 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).
 :::
	---
	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).
	:::