mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
e7aa014c31
* docs: init * chore: all types * docs: faq * chore: fix lint
89 lines
2.0 KiB
TypeScript
89 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Table } from 'antd';
|
|
import type { TableColumnsType, TableProps } from 'antd';
|
|
|
|
type TableRowSelection<T> = TableProps<T>['rowSelection'];
|
|
|
|
interface DataType {
|
|
key: React.Key;
|
|
name: string;
|
|
age: number;
|
|
address: string;
|
|
}
|
|
|
|
const columns: TableColumnsType<DataType> = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
},
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
},
|
|
{
|
|
title: 'Address',
|
|
dataIndex: 'address',
|
|
},
|
|
];
|
|
|
|
const data: DataType[] = [];
|
|
for (let i = 0; i < 46; i++) {
|
|
data.push({
|
|
key: i,
|
|
name: `Edward King ${i}`,
|
|
age: 32,
|
|
address: `London, Park Lane no. ${i}`,
|
|
});
|
|
}
|
|
|
|
const App: React.FC = () => {
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
|
|
|
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
|
|
console.log('selectedRowKeys changed: ', newSelectedRowKeys);
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
};
|
|
|
|
const rowSelection: TableRowSelection<DataType> = {
|
|
selectedRowKeys,
|
|
onChange: onSelectChange,
|
|
selections: [
|
|
Table.SELECTION_ALL,
|
|
Table.SELECTION_INVERT,
|
|
Table.SELECTION_NONE,
|
|
{
|
|
key: 'odd',
|
|
text: 'Select Odd Row',
|
|
onSelect: (changeableRowKeys) => {
|
|
let newSelectedRowKeys = [];
|
|
newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
|
|
if (index % 2 !== 0) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
},
|
|
},
|
|
{
|
|
key: 'even',
|
|
text: 'Select Even Row',
|
|
onSelect: (changeableRowKeys) => {
|
|
let newSelectedRowKeys = [];
|
|
newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
|
|
if (index % 2 !== 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
|
|
};
|
|
|
|
export default App;
|