mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
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;
|
|
name: string;
|
|
age: number;
|
|
address: string;
|
|
}
|
|
|
|
const columns: TableColumnsType<DataType> = [
|
|
{
|
|
title: 'Full Name',
|
|
width: 100,
|
|
dataIndex: 'name',
|
|
fixed: 'left',
|
|
},
|
|
{
|
|
title: 'Age',
|
|
width: 100,
|
|
dataIndex: 'age',
|
|
},
|
|
{ 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',
|
|
width: 90,
|
|
render: () => <a>action</a>,
|
|
},
|
|
{
|
|
title: 'Action 2',
|
|
width: 90,
|
|
render: () => <a>action</a>,
|
|
},
|
|
{
|
|
title: 'Action 3',
|
|
fixed: 'right',
|
|
width: 90,
|
|
render: () => <a>action</a>,
|
|
},
|
|
];
|
|
|
|
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 = () => {
|
|
const { styles } = useStyle();
|
|
return (
|
|
<Table<DataType>
|
|
bordered
|
|
className={styles.customTable}
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
scroll={{ x: 'max-content' }}
|
|
pagination={false}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|