ant-design/components/table/demo/ajax.tsx
二货爱吃白萝卜 2cdf586291
chore: fix lint ()
* chore: fix lint

* chore: fix lint

* test: fix 16

* fix: lint
2023-07-28 16:17:43 +08:00

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;