mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
277 lines
8.2 KiB
TypeScript
277 lines
8.2 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { DownOutlined } from '@ant-design/icons';
|
||
|
import type { RadioChangeEvent } from 'antd';
|
||
|
import { Form, Radio, Space, Switch, Table } from 'antd';
|
||
|
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||
|
import type { ColumnsType, TableProps } from 'antd/es/table';
|
||
|
import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
|
||
|
|
||
|
interface DataType {
|
||
|
key: number;
|
||
|
name: string;
|
||
|
age: number;
|
||
|
address: string;
|
||
|
description: string;
|
||
|
}
|
||
|
|
||
|
type TablePaginationPosition =
|
||
|
| 'topLeft'
|
||
|
| 'topCenter'
|
||
|
| 'topRight'
|
||
|
| 'bottomLeft'
|
||
|
| 'bottomCenter'
|
||
|
| 'bottomRight';
|
||
|
|
||
|
const columns: ColumnsType<DataType> = [
|
||
|
{
|
||
|
title: 'Name',
|
||
|
dataIndex: 'name',
|
||
|
},
|
||
|
{
|
||
|
title: 'Age',
|
||
|
dataIndex: 'age',
|
||
|
sorter: (a, b) => a.age - b.age,
|
||
|
},
|
||
|
{
|
||
|
title: 'Address',
|
||
|
dataIndex: 'address',
|
||
|
filters: [
|
||
|
{
|
||
|
text: 'London',
|
||
|
value: 'London',
|
||
|
},
|
||
|
{
|
||
|
text: 'New York',
|
||
|
value: 'New York',
|
||
|
},
|
||
|
],
|
||
|
onFilter: (value, record) => record.address.indexOf(value as string) === 0,
|
||
|
},
|
||
|
{
|
||
|
title: 'Action',
|
||
|
key: 'action',
|
||
|
sorter: true,
|
||
|
render: () => (
|
||
|
<Space size="middle">
|
||
|
<a>Delete</a>
|
||
|
<a>
|
||
|
<Space>
|
||
|
More actions
|
||
|
<DownOutlined />
|
||
|
</Space>
|
||
|
</a>
|
||
|
</Space>
|
||
|
),
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const data: DataType[] = [];
|
||
|
for (let i = 1; i <= 10; i++) {
|
||
|
data.push({
|
||
|
key: i,
|
||
|
name: 'John Brown',
|
||
|
age: Number(`${i}2`),
|
||
|
address: `New York No. ${i} Lake Park`,
|
||
|
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
|
||
|
});
|
||
|
}
|
||
|
|
||
|
const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
|
||
|
const defaultTitle = () => 'Here is title';
|
||
|
const defaultFooter = () => 'Here is footer';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [bordered, setBordered] = useState(false);
|
||
|
const [loading, setLoading] = useState(false);
|
||
|
const [size, setSize] = useState<SizeType>('large');
|
||
|
const [expandable, setExpandable] = useState<ExpandableConfig<DataType> | undefined>(
|
||
|
defaultExpandable,
|
||
|
);
|
||
|
const [showTitle, setShowTitle] = useState(false);
|
||
|
const [showHeader, setShowHeader] = useState(true);
|
||
|
const [showfooter, setShowFooter] = useState(true);
|
||
|
const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
|
||
|
const [hasData, setHasData] = useState(true);
|
||
|
const [tableLayout, setTableLayout] = useState(undefined);
|
||
|
const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
|
||
|
const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
|
||
|
const [ellipsis, setEllipsis] = useState(false);
|
||
|
const [yScroll, setYScroll] = useState(false);
|
||
|
const [xScroll, setXScroll] = useState<string | undefined>(undefined);
|
||
|
|
||
|
const handleBorderChange = (enable: boolean) => {
|
||
|
setBordered(enable);
|
||
|
};
|
||
|
|
||
|
const handleLoadingChange = (enable: boolean) => {
|
||
|
setLoading(enable);
|
||
|
};
|
||
|
|
||
|
const handleSizeChange = (e: RadioChangeEvent) => {
|
||
|
setSize(e.target.value);
|
||
|
};
|
||
|
|
||
|
const handleTableLayoutChange = (e: RadioChangeEvent) => {
|
||
|
setTableLayout(e.target.value);
|
||
|
};
|
||
|
|
||
|
const handleExpandChange = (enable: boolean) => {
|
||
|
setExpandable(enable ? defaultExpandable : undefined);
|
||
|
};
|
||
|
|
||
|
const handleEllipsisChange = (enable: boolean) => {
|
||
|
setEllipsis(enable);
|
||
|
};
|
||
|
|
||
|
const handleTitleChange = (enable: boolean) => {
|
||
|
setShowTitle(enable);
|
||
|
};
|
||
|
|
||
|
const handleHeaderChange = (enable: boolean) => {
|
||
|
setShowHeader(enable);
|
||
|
};
|
||
|
|
||
|
const handleFooterChange = (enable: boolean) => {
|
||
|
setShowFooter(enable);
|
||
|
};
|
||
|
|
||
|
const handleRowSelectionChange = (enable: boolean) => {
|
||
|
setRowSelection(enable ? {} : undefined);
|
||
|
};
|
||
|
|
||
|
const handleYScrollChange = (enable: boolean) => {
|
||
|
setYScroll(enable);
|
||
|
};
|
||
|
|
||
|
const handleXScrollChange = (e: RadioChangeEvent) => {
|
||
|
setXScroll(e.target.value);
|
||
|
};
|
||
|
|
||
|
const handleDataChange = (newHasData: boolean) => {
|
||
|
setHasData(newHasData);
|
||
|
};
|
||
|
|
||
|
const scroll: { x?: number | string; y?: number | string } = {};
|
||
|
if (yScroll) {
|
||
|
scroll.y = 240;
|
||
|
}
|
||
|
if (xScroll) {
|
||
|
scroll.x = '100vw';
|
||
|
}
|
||
|
|
||
|
const tableColumns = columns.map(item => ({ ...item, ellipsis }));
|
||
|
if (xScroll === 'fixed') {
|
||
|
tableColumns[0].fixed = true;
|
||
|
tableColumns[tableColumns.length - 1].fixed = 'right';
|
||
|
}
|
||
|
|
||
|
const tableProps: TableProps<DataType> = {
|
||
|
bordered,
|
||
|
loading,
|
||
|
size,
|
||
|
expandable,
|
||
|
title: showTitle ? defaultTitle : undefined,
|
||
|
showHeader,
|
||
|
footer: showfooter ? defaultFooter : undefined,
|
||
|
rowSelection,
|
||
|
scroll,
|
||
|
tableLayout,
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<Form
|
||
|
layout="inline"
|
||
|
className="components-table-demo-control-bar"
|
||
|
style={{ marginBottom: 16 }}
|
||
|
>
|
||
|
<Form.Item label="Bordered">
|
||
|
<Switch checked={bordered} onChange={handleBorderChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="loading">
|
||
|
<Switch checked={loading} onChange={handleLoadingChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Title">
|
||
|
<Switch checked={showTitle} onChange={handleTitleChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Column Header">
|
||
|
<Switch checked={showHeader} onChange={handleHeaderChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Footer">
|
||
|
<Switch checked={showfooter} onChange={handleFooterChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Expandable">
|
||
|
<Switch checked={!!expandable} onChange={handleExpandChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Checkbox">
|
||
|
<Switch checked={!!rowSelection} onChange={handleRowSelectionChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Fixed Header">
|
||
|
<Switch checked={!!yScroll} onChange={handleYScrollChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Has Data">
|
||
|
<Switch checked={!!hasData} onChange={handleDataChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Ellipsis">
|
||
|
<Switch checked={!!ellipsis} onChange={handleEllipsisChange} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Size">
|
||
|
<Radio.Group value={size} onChange={handleSizeChange}>
|
||
|
<Radio.Button value="large">Large</Radio.Button>
|
||
|
<Radio.Button value="middle">Middle</Radio.Button>
|
||
|
<Radio.Button value="small">Small</Radio.Button>
|
||
|
</Radio.Group>
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Table Scroll">
|
||
|
<Radio.Group value={xScroll} onChange={handleXScrollChange}>
|
||
|
<Radio.Button value={undefined}>Unset</Radio.Button>
|
||
|
<Radio.Button value="scroll">Scroll</Radio.Button>
|
||
|
<Radio.Button value="fixed">Fixed Columns</Radio.Button>
|
||
|
</Radio.Group>
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Table Layout">
|
||
|
<Radio.Group value={tableLayout} onChange={handleTableLayoutChange}>
|
||
|
<Radio.Button value={undefined}>Unset</Radio.Button>
|
||
|
<Radio.Button value="fixed">Fixed</Radio.Button>
|
||
|
</Radio.Group>
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Pagination Top">
|
||
|
<Radio.Group
|
||
|
value={top}
|
||
|
onChange={e => {
|
||
|
setTop(e.target.value);
|
||
|
}}
|
||
|
>
|
||
|
<Radio.Button value="topLeft">TopLeft</Radio.Button>
|
||
|
<Radio.Button value="topCenter">TopCenter</Radio.Button>
|
||
|
<Radio.Button value="topRight">TopRight</Radio.Button>
|
||
|
<Radio.Button value="none">None</Radio.Button>
|
||
|
</Radio.Group>
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Pagination Bottom">
|
||
|
<Radio.Group
|
||
|
value={bottom}
|
||
|
onChange={e => {
|
||
|
setBottom(e.target.value);
|
||
|
}}
|
||
|
>
|
||
|
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
|
||
|
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
|
||
|
<Radio.Button value="bottomRight">BottomRight</Radio.Button>
|
||
|
<Radio.Button value="none">None</Radio.Button>
|
||
|
</Radio.Group>
|
||
|
</Form.Item>
|
||
|
</Form>
|
||
|
<Table
|
||
|
{...tableProps}
|
||
|
pagination={{ position: [top as TablePaginationPosition, bottom] }}
|
||
|
columns={tableColumns}
|
||
|
dataSource={hasData ? data : []}
|
||
|
scroll={scroll}
|
||
|
/>
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|