ant-design/components/table/demo/dynamic-settings.tsx
vagusX 38cf5e8a75
docs: unify component export file as index.tsx ()
* docs: unify component export file as index.tsx

* docs: compatible with old anchors

* chore: clean

* test: update snapshot

* fix: window env

---------

Co-authored-by: Peach <scdzwyxst@gmail.com>
2024-07-23 22:22:24 +08:00

273 lines
8.3 KiB
TypeScript

import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { GetProp, RadioChangeEvent, TableProps } from 'antd';
import { Form, Radio, Space, Switch, Table } from 'antd';
type SizeType = TableProps['size'];
type ColumnsType<T extends object> = GetProp<TableProps<T>, 'columns'>;
type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
type TablePaginationPosition = NonNullable<TablePagination<any>['position']>[number];
type ExpandableConfig<T extends object> = TableProps<T>['expandable'];
type TableRowSelection<T extends object> = TableProps<T>['rowSelection'];
interface DataType {
key: number;
name: string;
age: number;
address: string;
description: string;
}
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();
const [top, setTop] = useState<TablePaginationPosition>('none');
const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
const [ellipsis, setEllipsis] = useState(false);
const [yScroll, setYScroll] = useState(false);
const [xScroll, setXScroll] = useState<string>();
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="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, bottom] }}
columns={tableColumns}
dataSource={hasData ? data : []}
scroll={scroll}
/>
</>
);
};
export default App;