mirror of
https://github.com/apache/superset.git
synced 2026-05-23 08:45:45 +00:00
docs: cut 6.1.0 versions for docs, admin_docs, developer_docs, components
Snapshots all four versioned Docusaurus sections at v6.1.0, cut from master after the version-cutting tooling (#39837) and broken-internal- links fixes (#40102) landed. Captures fresh auto-generated content and freezes data dependencies so the historical snapshot stays correct. Versioning behavior: lastVersion stays at current for every section, so the canonical URLs (/docs/..., /admin-docs/..., /developer-docs/..., /components/...) continue to render content from master. The current version is consistently labeled "Next" with an unreleased banner, and 6.1.0 is a historical pin accessible only via its explicit version segment. Component playground: previously disabled: true in versions-config.json, now enabled and versioned. The plugin block in docusaurus.config.ts was already gated only by the disabled flag, so no other code changes were needed to bring it back online. Snapshot includes: - All MDX content for the four sections. - Auto-gen captured fresh: 74 database pages (engine spec metadata), ~1,800 API reference files (openapi.json), 59 component pages (Storybook stories). - Data imports frozen at cut time into snapshot-local _versioned_data/ dirs: versioned_docs/version-6.1.0/_versioned_data/src/data/databases.json (canonical 80-database diagnostics from master, preserved by the generator's input-hash cache) admin_docs_versioned_docs/version-6.1.0/_versioned_data/data/countries.json admin_docs_versioned_docs/version-6.1.0/_versioned_data/static/feature-flags.json developer_docs_versioned_docs/version-6.1.0/_versioned_data/static/data/components.json - Import paths in deeply-nested files rewritten so they still resolve from one directory deeper inside the snapshot. Verified via full yarn build: exit 0, no broken links surfaced by onBrokenLinks: throw. Anchor warnings present are pre-existing on master (community#superset-community-calendar) and unrelated.
This commit is contained in:
Claude Code
@@ -0,0 +1,167 @@
|
||||
---
|
||||
title: DropdownContainer
|
||||
sidebar_label: DropdownContainer
|
||||
---
|
||||
|
||||
<!--
|
||||
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';
|
||||
|
||||
# DropdownContainer
|
||||
|
||||
DropdownContainer arranges items horizontally and moves overflowing items into a dropdown popover. Resize the container to see the overflow behavior.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="DropdownContainer"
|
||||
props={{
|
||||
style: {
|
||||
maxWidth: 360
|
||||
},
|
||||
items: [
|
||||
{
|
||||
id: "item-0",
|
||||
element: {
|
||||
component: "Tag",
|
||||
props: {
|
||||
children: "Region",
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "item-1",
|
||||
element: {
|
||||
component: "Tag",
|
||||
props: {
|
||||
children: "Category",
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "item-2",
|
||||
element: {
|
||||
component: "Tag",
|
||||
props: {
|
||||
children: "Date Range",
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "item-3",
|
||||
element: {
|
||||
component: "Tag",
|
||||
props: {
|
||||
children: "Status",
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "item-4",
|
||||
element: {
|
||||
component: "Tag",
|
||||
props: {
|
||||
children: "Owner",
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "item-5",
|
||||
element: {
|
||||
component: "Tag",
|
||||
props: {
|
||||
children: "Priority",
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const items = Array.from({ length: 6 }, (_, i) => ({
|
||||
id: 'item-' + i,
|
||||
element: React.createElement('div', {
|
||||
style: {
|
||||
minWidth: 120,
|
||||
padding: '4px 12px',
|
||||
background: '#e6f4ff',
|
||||
border: '1px solid #91caff',
|
||||
borderRadius: 4,
|
||||
},
|
||||
}, 'Filter ' + (i + 1)),
|
||||
}));
|
||||
return (
|
||||
<div style={{ width: 400, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
|
||||
<DropdownContainer items={items} />
|
||||
<div style={{ marginTop: 8, color: '#999', fontSize: 12 }}>
|
||||
Drag the right edge to resize and see items overflow into a dropdown
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Select Filters
|
||||
|
||||
```tsx live
|
||||
function SelectFilters() {
|
||||
const items = ['Region', 'Category', 'Date Range', 'Status', 'Owner'].map(
|
||||
(label, i) => ({
|
||||
id: 'filter-' + i,
|
||||
element: React.createElement('div', {
|
||||
style: { minWidth: 150, padding: '4px 12px', background: '#f5f5f5', border: '1px solid #d9d9d9', borderRadius: 4 },
|
||||
}, label + ': All'),
|
||||
})
|
||||
);
|
||||
return (
|
||||
<div style={{ width: 500, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
|
||||
<DropdownContainer items={items} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { DropdownContainer } 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/DropdownContainer/DropdownContainer.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
title: Flex
|
||||
sidebar_label: Flex
|
||||
---
|
||||
|
||||
<!--
|
||||
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';
|
||||
|
||||
# Flex
|
||||
|
||||
The Flex component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Flex"
|
||||
props={{
|
||||
vertical: false,
|
||||
wrap: "nowrap",
|
||||
justify: "normal",
|
||||
align: "normal",
|
||||
flex: "normal",
|
||||
gap: "small"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "vertical",
|
||||
label: "Vertical",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "wrap",
|
||||
label: "Wrap",
|
||||
type: "select",
|
||||
options: [
|
||||
"nowrap",
|
||||
"wrap",
|
||||
"wrap-reverse"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "justify",
|
||||
label: "Justify",
|
||||
type: "select",
|
||||
options: [
|
||||
"start",
|
||||
"center",
|
||||
"space-between",
|
||||
"space-around",
|
||||
"space-evenly"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "align",
|
||||
label: "Align",
|
||||
type: "select",
|
||||
options: [
|
||||
"start",
|
||||
"center",
|
||||
"end",
|
||||
"stretch"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "flex",
|
||||
label: "Flex",
|
||||
type: "string"
|
||||
},
|
||||
{
|
||||
name: "gap",
|
||||
label: "Gap",
|
||||
type: "select",
|
||||
options: [
|
||||
"small",
|
||||
"medium",
|
||||
"large"
|
||||
]
|
||||
}
|
||||
]}
|
||||
sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
|
||||
sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Flex gap="small" wrap="wrap">
|
||||
{['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
|
||||
<div
|
||||
key={item}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: '#e6f4ff',
|
||||
border: '1px solid #91caff',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Vertical Layout
|
||||
|
||||
```tsx live
|
||||
function VerticalFlex() {
|
||||
return (
|
||||
<Flex vertical gap="small">
|
||||
<Button buttonStyle="primary">Primary</Button>
|
||||
<Button buttonStyle="dashed">Dashed</Button>
|
||||
<Button buttonStyle="link">Link</Button>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Justify and Align
|
||||
|
||||
```tsx live
|
||||
function JustifyAlign() {
|
||||
const boxStyle = {
|
||||
width: '100%',
|
||||
height: 120,
|
||||
borderRadius: 6,
|
||||
border: '1px solid #40a9ff',
|
||||
};
|
||||
const itemStyle = {
|
||||
width: 60,
|
||||
height: 40,
|
||||
backgroundColor: '#1677ff',
|
||||
borderRadius: 4,
|
||||
};
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{['flex-start', 'center', 'flex-end', 'space-between', 'space-around'].map(justify => (
|
||||
<div key={justify}>
|
||||
<span style={{ marginBottom: 4, display: 'block', color: '#666' }}>{justify}</span>
|
||||
<Flex style={boxStyle} justify={justify} align="center">
|
||||
<div style={itemStyle} />
|
||||
<div style={itemStyle} />
|
||||
<div style={itemStyle} />
|
||||
</Flex>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `vertical` | `boolean` | `false` | - |
|
||||
| `wrap` | `string` | `"nowrap"` | - |
|
||||
| `justify` | `string` | `"normal"` | - |
|
||||
| `align` | `string` | `"normal"` | - |
|
||||
| `flex` | `string` | `"normal"` | - |
|
||||
| `gap` | `string` | `"small"` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Flex } 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/Flex/Flex.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
title: Grid
|
||||
sidebar_label: Grid
|
||||
---
|
||||
|
||||
<!--
|
||||
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';
|
||||
|
||||
# Grid
|
||||
|
||||
The Grid system of Ant Design is based on a 24-grid layout. The `Row` and `Col` components are used to create flexible and responsive grid layouts.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Grid"
|
||||
renderComponent="Row"
|
||||
props={{
|
||||
align: "top",
|
||||
justify: "start",
|
||||
wrap: true,
|
||||
gutter: 16
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "align",
|
||||
label: "Align",
|
||||
type: "select",
|
||||
options: [
|
||||
"top",
|
||||
"middle",
|
||||
"bottom",
|
||||
"stretch"
|
||||
],
|
||||
description: "Vertical alignment of columns within the row."
|
||||
},
|
||||
{
|
||||
name: "justify",
|
||||
label: "Justify",
|
||||
type: "select",
|
||||
options: [
|
||||
"start",
|
||||
"end",
|
||||
"center",
|
||||
"space-around",
|
||||
"space-between",
|
||||
"space-evenly"
|
||||
],
|
||||
description: "Horizontal distribution of columns within the row."
|
||||
},
|
||||
{
|
||||
name: "wrap",
|
||||
label: "Wrap",
|
||||
type: "boolean",
|
||||
description: "Whether columns are allowed to wrap to the next line."
|
||||
},
|
||||
{
|
||||
name: "gutter",
|
||||
label: "Gutter",
|
||||
type: "number",
|
||||
description: "Spacing between columns in pixels."
|
||||
}
|
||||
]}
|
||||
sampleChildren={[{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4 (tall)","style":{"background":"#e6f4ff","padding":"24px 8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}}]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={12}>
|
||||
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive Grid
|
||||
|
||||
```tsx live
|
||||
function ResponsiveGrid() {
|
||||
return (
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
|
||||
Responsive
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
|
||||
Responsive
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
|
||||
Responsive
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
|
||||
Responsive
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Alignment
|
||||
|
||||
```tsx live
|
||||
function AlignmentDemo() {
|
||||
const boxStyle = { background: '#e6f4ff', padding: '16px 0', border: '1px solid #91caff', textAlign: 'center' };
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<Row justify="start" gutter={8}>
|
||||
<Col span={4}><div style={boxStyle}>start</div></Col>
|
||||
<Col span={4}><div style={boxStyle}>start</div></Col>
|
||||
</Row>
|
||||
<Row justify="center" gutter={8}>
|
||||
<Col span={4}><div style={boxStyle}>center</div></Col>
|
||||
<Col span={4}><div style={boxStyle}>center</div></Col>
|
||||
</Row>
|
||||
<Row justify="end" gutter={8}>
|
||||
<Col span={4}><div style={boxStyle}>end</div></Col>
|
||||
<Col span={4}><div style={boxStyle}>end</div></Col>
|
||||
</Row>
|
||||
<Row justify="space-between" gutter={8}>
|
||||
<Col span={4}><div style={boxStyle}>between</div></Col>
|
||||
<Col span={4}><div style={boxStyle}>between</div></Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `align` | `string` | `"top"` | Vertical alignment of columns within the row. |
|
||||
| `justify` | `string` | `"start"` | Horizontal distribution of columns within the row. |
|
||||
| `wrap` | `boolean` | `true` | Whether columns are allowed to wrap to the next line. |
|
||||
| `gutter` | `number` | `16` | Spacing between columns in pixels. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Grid } 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/Grid/Grid.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Layout Components
|
||||
sidebar_label: Layout Components
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
# Layout Components
|
||||
|
||||
7 components available in this category.
|
||||
|
||||
## Components
|
||||
|
||||
- [DropdownContainer](./dropdowncontainer.mdx)
|
||||
- [Flex](./flex.mdx)
|
||||
- [Grid](./grid.mdx)
|
||||
- [Layout](./layout.mdx)
|
||||
- [MetadataBar](./metadatabar.mdx)
|
||||
- [Space](./space.mdx)
|
||||
- [Table](./table.mdx)
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
title: Layout
|
||||
sidebar_label: Layout
|
||||
---
|
||||
|
||||
<!--
|
||||
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';
|
||||
|
||||
# Layout
|
||||
|
||||
Ant Design Layout component with configurable Sider, Header, Footer, and Content.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Layout"
|
||||
props={{
|
||||
hasSider: false,
|
||||
style: {
|
||||
minHeight: 200
|
||||
}
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "hasSider",
|
||||
label: "Has Sider",
|
||||
type: "boolean",
|
||||
description: "Whether the layout contains a Sider sub-component."
|
||||
}
|
||||
]}
|
||||
sampleChildren={[{"component":"Layout.Header","props":{"children":"Header","style":{"background":"#001529","color":"#fff","padding":"0 24px","lineHeight":"64px"}}},{"component":"Layout.Content","props":{"children":"Content Area","style":{"padding":"24px","background":"#fff","flex":1}}},{"component":"Layout.Footer","props":{"children":"Footer","style":{"textAlign":"center","background":"#f5f5f5","padding":"12px"}}}]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Layout style={{ minHeight: '300px' }}>
|
||||
<Layout.Sider theme="dark" width={200}>
|
||||
<div style={{ color: '#fff', padding: '16px' }}>Sidebar</div>
|
||||
</Layout.Sider>
|
||||
<Layout>
|
||||
<Layout.Header style={{ background: '#fff', padding: '0 16px' }}>
|
||||
Header
|
||||
</Layout.Header>
|
||||
<Layout.Content style={{ margin: '16px', padding: '24px', background: '#fff' }}>
|
||||
Content
|
||||
</Layout.Content>
|
||||
<Layout.Footer style={{ textAlign: 'center' }}>
|
||||
Footer
|
||||
</Layout.Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Content Only
|
||||
|
||||
```tsx live
|
||||
function ContentOnly() {
|
||||
return (
|
||||
<Layout>
|
||||
<Layout.Header style={{ background: '#001529', color: '#fff', padding: '0 24px', lineHeight: '64px' }}>
|
||||
Application Header
|
||||
</Layout.Header>
|
||||
<Layout.Content style={{ padding: '24px', minHeight: '200px', background: '#fff' }}>
|
||||
Main content area without a sidebar
|
||||
</Layout.Content>
|
||||
<Layout.Footer style={{ textAlign: 'center', background: '#f5f5f5' }}>
|
||||
Footer Content
|
||||
</Layout.Footer>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Right Sidebar
|
||||
|
||||
```tsx live
|
||||
function RightSidebar() {
|
||||
return (
|
||||
<Layout style={{ minHeight: '300px' }}>
|
||||
<Layout>
|
||||
<Layout.Header style={{ background: '#fff', padding: '0 24px' }}>
|
||||
Header
|
||||
</Layout.Header>
|
||||
<Layout.Content style={{ padding: '24px', background: '#fff' }}>
|
||||
Content with right sidebar
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
<Layout.Sider theme="light" width={200} style={{ background: '#fafafa' }}>
|
||||
<div style={{ padding: '16px' }}>Right Sidebar</div>
|
||||
</Layout.Sider>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `hasSider` | `boolean` | `false` | Whether the layout contains a Sider sub-component. |
|
||||
| `style` | `any` | `{"minHeight":200}` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Layout } 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/Layout/Layout.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
title: MetadataBar
|
||||
sidebar_label: MetadataBar
|
||||
---
|
||||
|
||||
<!--
|
||||
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';
|
||||
|
||||
# MetadataBar
|
||||
|
||||
MetadataBar displays a row of metadata items (SQL info, owners, last modified, tags, dashboards, etc.) that collapse responsively based on available width.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="MetadataBar"
|
||||
props={{
|
||||
title: "Added to 3 dashboards",
|
||||
createdBy: "Jane Smith",
|
||||
modifiedBy: "Jane Smith",
|
||||
description: "To preview the list of dashboards go to More settings.",
|
||||
items: [
|
||||
{
|
||||
type: "sql",
|
||||
title: "Click to view query"
|
||||
},
|
||||
{
|
||||
type: "owner",
|
||||
createdBy: "Jane Smith",
|
||||
owners: [
|
||||
"John Doe",
|
||||
"Mary Wilson"
|
||||
],
|
||||
createdOn: "a week ago"
|
||||
},
|
||||
{
|
||||
type: "lastModified",
|
||||
value: "a week ago",
|
||||
modifiedBy: "Jane Smith"
|
||||
},
|
||||
{
|
||||
type: "tags",
|
||||
values: [
|
||||
"management",
|
||||
"research",
|
||||
"poc"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "dashboards",
|
||||
title: "Added to 3 dashboards",
|
||||
description: "To preview the list of dashboards go to More settings."
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "createdBy",
|
||||
label: "Created By",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "modifiedBy",
|
||||
label: "Modified By",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
label: "Description",
|
||||
type: "text"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const items = [
|
||||
{ type: 'sql', title: 'Click to view query' },
|
||||
{
|
||||
type: 'owner',
|
||||
createdBy: 'Jane Smith',
|
||||
owners: ['John Doe', 'Mary Wilson'],
|
||||
createdOn: 'a week ago',
|
||||
},
|
||||
{
|
||||
type: 'lastModified',
|
||||
value: 'a week ago',
|
||||
modifiedBy: 'Jane Smith',
|
||||
},
|
||||
{ type: 'tags', values: ['management', 'research', 'poc'] },
|
||||
];
|
||||
return <MetadataBar items={items} />;
|
||||
}
|
||||
```
|
||||
|
||||
## Minimal Metadata
|
||||
|
||||
```tsx live
|
||||
function MinimalMetadata() {
|
||||
const items = [
|
||||
{ type: 'owner', createdBy: 'Admin', owners: ['Admin'], createdOn: 'yesterday' },
|
||||
{ type: 'lastModified', value: '2 hours ago', modifiedBy: 'Admin' },
|
||||
];
|
||||
return <MetadataBar items={items} />;
|
||||
}
|
||||
```
|
||||
|
||||
## Full Metadata
|
||||
|
||||
```tsx live
|
||||
function FullMetadata() {
|
||||
const items = [
|
||||
{ type: 'sql', title: 'SELECT * FROM ...' },
|
||||
{ type: 'owner', createdBy: 'Jane Smith', owners: ['Jane Smith', 'John Doe', 'Bob Wilson'], createdOn: '2 weeks ago' },
|
||||
{ type: 'lastModified', value: '3 days ago', modifiedBy: 'John Doe' },
|
||||
{ type: 'tags', values: ['production', 'finance', 'quarterly'] },
|
||||
{ type: 'dashboards', title: 'Used in 12 dashboards' },
|
||||
{ type: 'description', value: 'This chart shows quarterly revenue breakdown by region and product line.' },
|
||||
{ type: 'rows', title: '1.2M rows' },
|
||||
{ type: 'table', title: 'public.revenue_data' },
|
||||
];
|
||||
return <MetadataBar items={items} />;
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `title` | `string` | `"Added to 3 dashboards"` | - |
|
||||
| `createdBy` | `string` | `"Jane Smith"` | - |
|
||||
| `modifiedBy` | `string` | `"Jane Smith"` | - |
|
||||
| `description` | `string` | `"To preview the list of dashboards go to More settings."` | - |
|
||||
| `items` | `any` | `[{"type":"sql","title":"Click to view query"},{"type":"owner","createdBy":"Jane Smith","owners":["John Doe","Mary Wilson"],"createdOn":"a week ago"},{"type":"lastModified","value":"a week ago","modifiedBy":"Jane Smith"},{"type":"tags","values":["management","research","poc"]},{"type":"dashboards","title":"Added to 3 dashboards","description":"To preview the list of dashboards go to More settings."}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { MetadataBar } 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/MetadataBar/MetadataBar.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Space
|
||||
sidebar_label: Space
|
||||
---
|
||||
|
||||
<!--
|
||||
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';
|
||||
|
||||
# Space
|
||||
|
||||
The Space component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Space"
|
||||
props={{
|
||||
direction: "horizontal",
|
||||
size: "small",
|
||||
wrap: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "direction",
|
||||
label: "Direction",
|
||||
type: "select",
|
||||
options: [
|
||||
"vertical",
|
||||
"horizontal"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"small",
|
||||
"middle",
|
||||
"large"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "wrap",
|
||||
label: "Wrap",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "align",
|
||||
label: "Align",
|
||||
type: "select",
|
||||
options: [
|
||||
"start",
|
||||
"end",
|
||||
"center",
|
||||
"baseline"
|
||||
]
|
||||
}
|
||||
]}
|
||||
sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
|
||||
sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Space size="small">
|
||||
{['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
|
||||
<div
|
||||
key={item}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: '#e6f4ff',
|
||||
border: '1px solid #91caff',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Vertical Space
|
||||
|
||||
```tsx live
|
||||
function VerticalSpace() {
|
||||
return (
|
||||
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
|
||||
<Button buttonStyle="primary">Primary</Button>
|
||||
<Button buttonStyle="secondary">Secondary</Button>
|
||||
<Button buttonStyle="dashed">Dashed</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Space Sizes
|
||||
|
||||
```tsx live
|
||||
function SpaceSizes() {
|
||||
const items = ['Item 1', 'Item 2', 'Item 3'];
|
||||
const itemStyle = {
|
||||
padding: '8px 16px',
|
||||
background: '#e6f4ff',
|
||||
border: '1px solid #91caff',
|
||||
borderRadius: 4,
|
||||
};
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
||||
{['small', 'middle', 'large'].map(size => (
|
||||
<div key={size}>
|
||||
<h4>{size}</h4>
|
||||
<Space size={size}>
|
||||
{items.map(item => (
|
||||
<div key={item} style={itemStyle}>{item}</div>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `direction` | `string` | `"horizontal"` | - |
|
||||
| `size` | `string` | `"small"` | - |
|
||||
| `wrap` | `boolean` | `false` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Space } 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/Space/Space.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,311 @@
|
||||
---
|
||||
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).
|
||||
:::
|
||||
Reference in New Issue
Block a user