mirror of
https://github.com/apache/superset.git
synced 2026-04-07 10:31:50 +00:00
312 lines
8.3 KiB
Plaintext
312 lines
8.3 KiB
Plaintext
---
|
|
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/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).
|
|
:::
|