mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 22:11:37 +08:00
77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { Button, Table } from 'antd';
|
||
|
import type { ColumnsType } from 'antd/es/table';
|
||
|
|
||
|
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 [loading, setLoading] = useState(false);
|
||
|
|
||
|
const start = () => {
|
||
|
setLoading(true);
|
||
|
// ajax request after empty completing
|
||
|
setTimeout(() => {
|
||
|
setSelectedRowKeys([]);
|
||
|
setLoading(false);
|
||
|
}, 1000);
|
||
|
};
|
||
|
|
||
|
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
|
||
|
console.log('selectedRowKeys changed: ', newSelectedRowKeys);
|
||
|
setSelectedRowKeys(newSelectedRowKeys);
|
||
|
};
|
||
|
|
||
|
const rowSelection = {
|
||
|
selectedRowKeys,
|
||
|
onChange: onSelectChange,
|
||
|
};
|
||
|
const hasSelected = selectedRowKeys.length > 0;
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<div style={{ marginBottom: 16 }}>
|
||
|
<Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
|
||
|
Reload
|
||
|
</Button>
|
||
|
<span style={{ marginLeft: 8 }}>
|
||
|
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
|
||
|
</span>
|
||
|
</div>
|
||
|
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|