mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
2cdf586291
* chore: fix lint * chore: fix lint * test: fix 16 * fix: lint
118 lines
2.6 KiB
TypeScript
118 lines
2.6 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import qs from 'qs';
|
|
import { Table } from 'antd';
|
|
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
|
import type { FilterValue, SorterResult } from 'antd/es/table/interface';
|
|
|
|
interface DataType {
|
|
name: {
|
|
first: string;
|
|
last: string;
|
|
};
|
|
gender: string;
|
|
email: string;
|
|
login: {
|
|
uuid: string;
|
|
};
|
|
}
|
|
|
|
interface TableParams {
|
|
pagination?: TablePaginationConfig;
|
|
sortField?: string;
|
|
sortOrder?: string;
|
|
filters?: Record<string, FilterValue>;
|
|
}
|
|
|
|
const columns: ColumnsType<DataType> = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
sorter: true,
|
|
render: (name) => `${name.first} ${name.last}`,
|
|
width: '20%',
|
|
},
|
|
{
|
|
title: 'Gender',
|
|
dataIndex: 'gender',
|
|
filters: [
|
|
{ text: 'Male', value: 'male' },
|
|
{ text: 'Female', value: 'female' },
|
|
],
|
|
width: '20%',
|
|
},
|
|
{
|
|
title: 'Email',
|
|
dataIndex: 'email',
|
|
},
|
|
];
|
|
|
|
const getRandomuserParams = (params: TableParams) => ({
|
|
results: params.pagination?.pageSize,
|
|
page: params.pagination?.current,
|
|
...params,
|
|
});
|
|
|
|
const App: React.FC = () => {
|
|
const [data, setData] = useState<DataType[]>();
|
|
const [loading, setLoading] = useState(false);
|
|
const [tableParams, setTableParams] = useState<TableParams>({
|
|
pagination: {
|
|
current: 1,
|
|
pageSize: 10,
|
|
},
|
|
});
|
|
|
|
const fetchData = () => {
|
|
setLoading(true);
|
|
fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(tableParams))}`)
|
|
.then((res) => res.json())
|
|
.then(({ results }) => {
|
|
setData(results);
|
|
setLoading(false);
|
|
setTableParams({
|
|
...tableParams,
|
|
pagination: {
|
|
...tableParams.pagination,
|
|
total: 200,
|
|
// 200 is mock data, you should read it from server
|
|
// total: data.totalCount,
|
|
},
|
|
});
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [JSON.stringify(tableParams)]);
|
|
|
|
const handleTableChange = (
|
|
pagination: TablePaginationConfig,
|
|
filters: Record<string, FilterValue>,
|
|
sorter: SorterResult<DataType>,
|
|
) => {
|
|
setTableParams({
|
|
pagination,
|
|
filters,
|
|
...sorter,
|
|
});
|
|
|
|
// `dataSource` is useless since `pageSize` changed
|
|
if (pagination.pageSize !== tableParams.pagination?.pageSize) {
|
|
setData([]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Table
|
|
columns={columns}
|
|
rowKey={(record) => record.login.uuid}
|
|
dataSource={data}
|
|
pagination={tableParams.pagination}
|
|
loading={loading}
|
|
onChange={handleTableChange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|