mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
fd0d8b6031
* docs: fix typos * Update index.zh-CN.md * test: update snapshot * docs: fix demo ref * chore: force trigger ci * chore: force trigger ci * chore: bump dumi ver --------- Co-authored-by: Amumu <yoyo837@hotmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com>
88 lines
2.0 KiB
TypeScript
88 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Table } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import type { TableRowSelection } from 'antd/es/table/interface';
|
|
|
|
interface DataType {
|
|
key: React.Key;
|
|
name: string;
|
|
age: number;
|
|
address: string;
|
|
}
|
|
|
|
const columns: ColumnsType<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;
|