mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
84 lines
1.4 KiB
TypeScript
84 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Table } from 'antd';
|
|
import type { TableColumnsType, TableProps } from 'antd';
|
|
|
|
interface DataType {
|
|
key: React.Key;
|
|
name: string;
|
|
chinese: number;
|
|
math: number;
|
|
english: number;
|
|
}
|
|
|
|
const columns: TableColumnsType<DataType> = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
},
|
|
{
|
|
title: 'Chinese Score',
|
|
dataIndex: 'chinese',
|
|
sorter: {
|
|
compare: (a, b) => a.chinese - b.chinese,
|
|
multiple: 3,
|
|
},
|
|
},
|
|
{
|
|
title: 'Math Score',
|
|
dataIndex: 'math',
|
|
sorter: {
|
|
compare: (a, b) => a.math - b.math,
|
|
multiple: 2,
|
|
},
|
|
},
|
|
{
|
|
title: 'English Score',
|
|
dataIndex: 'english',
|
|
sorter: {
|
|
compare: (a, b) => a.english - b.english,
|
|
multiple: 1,
|
|
},
|
|
},
|
|
];
|
|
|
|
const data: DataType[] = [
|
|
{
|
|
key: '1',
|
|
name: 'John Brown',
|
|
chinese: 98,
|
|
math: 60,
|
|
english: 70,
|
|
},
|
|
{
|
|
key: '2',
|
|
name: 'Jim Green',
|
|
chinese: 98,
|
|
math: 66,
|
|
english: 89,
|
|
},
|
|
{
|
|
key: '3',
|
|
name: 'Joe Black',
|
|
chinese: 98,
|
|
math: 90,
|
|
english: 70,
|
|
},
|
|
{
|
|
key: '4',
|
|
name: 'Jim Red',
|
|
chinese: 88,
|
|
math: 99,
|
|
english: 89,
|
|
},
|
|
];
|
|
|
|
const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
|
|
console.log('params', pagination, filters, sorter, extra);
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
|
|
);
|
|
|
|
export default App;
|