useAntdTable

It encapsulates the common antd Form and antd Table linkage logic, and supports antd V3 and V4 at the same time.

Examples

Form and Table data binding

name
email
phone
gender

No Data

useAntdTable returns a search object after receiving a form instance. This is an example of antd v3, see link for an example of antd v4.

Data caching

name
email
phone
gender

No Data

Form and Table data cache through cacheKey. This is an example of antd v3, see link for an example of antd v4.

Set Default Params

name
email
phone
gender

No Data

useAntdTable sets the initial value through defaultParams, defaultParams is an array, the first value is the paging related parameter, and the second value is the form related data. If there is a second value, we will help you initialize the form!
It should be noted that the initial form data can be filled with simple and advance form data. We will help you select the form data in the currently activated type.

API

useAntdTable is based on useRequest. All useRquest Pagination APIs can be used directly. For example cacheKey, manual, etc.

As the same as useRequest Pagination mode,The data structure returned by service must be {list: Item [], total: number}. If it is not satisfied, it can be converted once by options.formatResult.

useAntdTable adds result.search and options.form.

const {
...,
search: {
type: 'simple' | 'advance';
changeType: () => void;
submit: () => void;
reset: () => void;
};
} = useAntdTable(
service,
{
...,
form,
defaultType: 'simple' | 'advance',
defaultParams: [pagination, formData],
}
);