mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

demo: update Table demo (#50866)

Browse Source
This commit is contained in:
lijianan 2024-09-15 10:50:19 +08:00 committed by GitHub
parent fd8338e76e
commit ef11e1b9a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 3305 additions and 445 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1739
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

1739
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

4
components/table/demo/filter-in-tree.tsx
View File

@ -107,6 +107,8 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
console.log('params', pagination, filters, sorter, extra);
};
const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
const App: React.FC = () => (
<Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
);
export default App;

4
components/table/demo/filter-search.tsx
View File

@ -87,6 +87,8 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
console.log('params', pagination, filters, sorter, extra);
};
const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
const App: React.FC = () => (
<Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
);
export default App;

59
components/table/demo/fixed-columns-header.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -67,6 +85,18 @@ const columns: TableColumnsType<DataType> = [
width: 150,
},
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{ title: 'Column 9', dataIndex: 'address', key: '9' },
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{ title: 'Column 11', dataIndex: 'address', key: '11' },
{ title: 'Column 12', dataIndex: 'address', key: '12' },
{ title: 'Column 13', dataIndex: 'address', key: '13' },
{ title: 'Column 14', dataIndex: 'address', key: '14' },
{ title: 'Column 15', dataIndex: 'address', key: '15' },
{ title: 'Column 16', dataIndex: 'address', key: '16' },
{ title: 'Column 17', dataIndex: 'address', key: '17' },
{ title: 'Column 18', dataIndex: 'address', key: '18' },
{ title: 'Column 19', dataIndex: 'address', key: '19' },
{ title: 'Column 20', dataIndex: 'address', key: '20' },
{
title: 'Action',
key: 'operation',
@ -76,18 +106,23 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
const App: React.FC = () => (
<Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content', y: 55 * 5 }}
/>
);
};
export default App;

59
components/table/demo/fixed-columns.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -33,6 +51,18 @@ const columns: TableColumnsType<DataType> = [
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{ title: 'Column 9', dataIndex: 'address', key: '9' },
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{ title: 'Column 11', dataIndex: 'address', key: '11' },
{ title: 'Column 12', dataIndex: 'address', key: '12' },
{ title: 'Column 13', dataIndex: 'address', key: '13' },
{ title: 'Column 14', dataIndex: 'address', key: '14' },
{ title: 'Column 15', dataIndex: 'address', key: '15' },
{ title: 'Column 16', dataIndex: 'address', key: '16' },
{ title: 'Column 17', dataIndex: 'address', key: '17' },
{ title: 'Column 18', dataIndex: 'address', key: '18' },
{ title: 'Column 19', dataIndex: 'address', key: '19' },
{ title: 'Column 20', dataIndex: 'address', key: '20' },
{
title: 'Action',
key: 'operation',
@ -42,21 +72,22 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
},
{
key: '2',
name: 'Jim Green',
age: 40,
address: 'London Park',
},
const dataSource: DataType[] = [
{ key: '1', name: 'Olivia', age: 32, address: 'New York Park' },
{ key: '2', name: 'Ethan', age: 40, address: 'London Park' },
];
const App: React.FC = () => <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />;
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
pagination={false}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content' }}
/>
);
};
export default App;

72
components/table/demo/fixed-gapped-columns.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -21,14 +39,26 @@ const columns: TableColumnsType<DataType> = [
width: 100,
dataIndex: 'age',
},
{ title: 'Column 1', dataIndex: 'address', fixed: 'left' },
{ title: 'Column 2', dataIndex: 'address' },
{ title: 'Column 3', dataIndex: 'address' },
{ title: 'Column 4', dataIndex: 'address' },
{ title: 'Column 5', dataIndex: 'address' },
{ title: 'Column 6', dataIndex: 'address' },
{ title: 'Column 7', dataIndex: 'address' },
{ title: 'Column 8', dataIndex: 'address' },
{ title: 'Column 1', dataIndex: 'address', key: '1', fixed: 'left' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{ title: 'Column 9', dataIndex: 'address', key: '9' },
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{ title: 'Column 11', dataIndex: 'address', key: '11' },
{ title: 'Column 12', dataIndex: 'address', key: '12' },
{ title: 'Column 13', dataIndex: 'address', key: '13' },
{ title: 'Column 14', dataIndex: 'address', key: '14' },
{ title: 'Column 15', dataIndex: 'address', key: '15' },
{ title: 'Column 16', dataIndex: 'address', key: '16' },
{ title: 'Column 17', dataIndex: 'address', key: '17' },
{ title: 'Column 18', dataIndex: 'address', key: '18' },
{ title: 'Column 19', dataIndex: 'address', key: '19' },
{ title: 'Column 20', dataIndex: 'address', key: '20' },
{
title: 'Action 1',
fixed: 'right',
@ -48,17 +78,23 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
},
const dataSource: DataType[] = [
{ key: '1', name: 'Olivia', age: 32, address: 'New York Park' },
{ key: '2', name: 'Ethan', age: 40, address: 'London Park' },
];
const App: React.FC = () => (
<Table columns={columns} dataSource={data} scroll={{ x: 1300 }} pagination={false} bordered />
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
bordered
className={styles.customTable}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content' }}
pagination={false}
/>
);
};
export default App;

74
components/table/demo/resizable-column.tsx
View File

@ -12,12 +12,12 @@ interface DataType {
note: string;
}
const ResizableTitle = (
props: React.HTMLAttributes<any> & {
onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
width: number;
},
) => {
interface TitlePropsType {
width: number;
onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
}
const ResizableTitle: React.FC<Readonly<React.HTMLAttributes<any> & TitlePropsType>> = (props) => {
const { onResize, width, ...restProps } = props;
if (!width) {
@ -28,14 +28,7 @@ const ResizableTitle = (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation();
}}
/>
}
handle={<span className="react-resizable-handle" onClick={(e) => e.stopPropagation()} />}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
@ -44,6 +37,30 @@ const ResizableTitle = (
);
};
const data: DataType[] = [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
},
];
const App: React.FC = () => {
const [columns, setColumns] = useState<TableColumnsType<DataType>>([
{
@ -73,29 +90,6 @@ const App: React.FC = () => {
render: () => <a>Delete</a>,
},
]);
const data: DataType[] = [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
},
];
const handleResize =
(index: number) =>
@ -117,12 +111,10 @@ const App: React.FC = () => {
}));
return (
<Table
<Table<DataType>
bordered
components={{
header: {
cell: ResizableTitle,
},
header: { cell: ResizableTitle },
}}
columns={mergedColumns}
dataSource={data}