mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
103 lines
2.0 KiB
TypeScript
103 lines
2.0 KiB
TypeScript
|
import React from 'react';
|
||
|
import { Table } from 'antd';
|
||
|
import type { ColumnsType, TableProps } from 'antd/es/table';
|
||
|
|
||
|
interface DataType {
|
||
|
key: React.Key;
|
||
|
name: string;
|
||
|
age: number;
|
||
|
address: string;
|
||
|
}
|
||
|
|
||
|
const columns: ColumnsType<DataType> = [
|
||
|
{
|
||
|
title: 'Name',
|
||
|
dataIndex: 'name',
|
||
|
filters: [
|
||
|
{
|
||
|
text: 'Joe',
|
||
|
value: 'Joe',
|
||
|
},
|
||
|
{
|
||
|
text: 'Jim',
|
||
|
value: 'Jim',
|
||
|
},
|
||
|
{
|
||
|
text: 'Submenu',
|
||
|
value: 'Submenu',
|
||
|
children: [
|
||
|
{
|
||
|
text: 'Green',
|
||
|
value: 'Green',
|
||
|
},
|
||
|
{
|
||
|
text: 'Black',
|
||
|
value: 'Black',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
// specify the condition of filtering result
|
||
|
// here is that finding the name started with `value`
|
||
|
onFilter: (value: string, record) => record.name.indexOf(value) === 0,
|
||
|
sorter: (a, b) => a.name.length - b.name.length,
|
||
|
sortDirections: ['descend'],
|
||
|
},
|
||
|
{
|
||
|
title: 'Age',
|
||
|
dataIndex: 'age',
|
||
|
defaultSortOrder: 'descend',
|
||
|
sorter: (a, b) => a.age - b.age,
|
||
|
},
|
||
|
{
|
||
|
title: 'Address',
|
||
|
dataIndex: 'address',
|
||
|
filters: [
|
||
|
{
|
||
|
text: 'London',
|
||
|
value: 'London',
|
||
|
},
|
||
|
{
|
||
|
text: 'New York',
|
||
|
value: 'New York',
|
||
|
},
|
||
|
],
|
||
|
onFilter: (value: string, record) => record.address.indexOf(value) === 0,
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const data = [
|
||
|
{
|
||
|
key: '1',
|
||
|
name: 'John Brown',
|
||
|
age: 32,
|
||
|
address: 'New York No. 1 Lake Park',
|
||
|
},
|
||
|
{
|
||
|
key: '2',
|
||
|
name: 'Jim Green',
|
||
|
age: 42,
|
||
|
address: 'London No. 1 Lake Park',
|
||
|
},
|
||
|
{
|
||
|
key: '3',
|
||
|
name: 'Joe Black',
|
||
|
age: 32,
|
||
|
address: 'Sidney No. 1 Lake Park',
|
||
|
},
|
||
|
{
|
||
|
key: '4',
|
||
|
name: 'Jim Red',
|
||
|
age: 32,
|
||
|
address: 'London No. 2 Lake Park',
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
|
||
|
console.log('params', pagination, filters, sorter, extra);
|
||
|
};
|
||
|
|
||
|
const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
|
||
|
|
||
|
export default App;
|