mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-25 00:08:27 +08:00
69 lines
1.3 KiB
TypeScript
69 lines
1.3 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: #eaeaea transparent;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
};
|
|
});
|
|
|
|
interface DataType {
|
|
key: React.Key;
|
|
name: string;
|
|
age: number;
|
|
address: string;
|
|
}
|
|
|
|
const columns: TableColumnsType<DataType> = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: 'Address',
|
|
dataIndex: 'address',
|
|
},
|
|
];
|
|
|
|
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 = () => {
|
|
const { styles } = useStyle();
|
|
return (
|
|
<Table<DataType>
|
|
className={styles.customTable}
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
pagination={{ pageSize: 50 }}
|
|
scroll={{ y: 55 * 5 }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|