useFusionTable

Overview

useFusionTable encapsulates the commonly used Fusion Form and Fusion Table data binding logic.

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFusionTable.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFusionTable.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFusionTable.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFusionTable.json

useFusionTable encapsulates the commonly used Fusion Form and Fusion Table data binding logic.

useFusionTable is implemented based on useRequest. Before using it, you need to understand a few points that are different from useRequest:

1. service receives two parameters, the first parameter is the paging data { current, pageSize, sorter, filters }, and the second parameter is the form data.
2. The data structure returned by service must be { total: number, list: Item[] }.
3. Additional tableProps、paginationProps and search fields will be returned to manage tables and forms.
4. When refreshDeps changes, it will reset current to the first page and re-initiate the request.

Examples

Table management

useFusionTable will automatically manage the pagination data of Table, you only need to pass the returned tableProps and paginationProps to the corresponding components.

<Table columns={columns} rowKey="email" {...tableProps} />
<Pagination {...paginationProps} />

Form and Table data binding

When useFusionTable receives the field instance, it will return a search object to handle form related events.

• search.type supports switching between simple and advance
• search.changeType, switch form type
• search.submit submit form
• search.reset reset the current form

In the following example, you can experience the data binding between form and table.

Default Params

useFusionTable sets the initial value through defaultParams, defaultParams is an array, the first item is paging related parameters, and the second item is form related data. If there is a second value, we will initialize the form for you!

It should be noted that the initial form data can be filled with all the form data of simple and advance, and we will help you select the form data of the currently activated type.

The following example sets paging data and form data during initialization.

Form Validation

Before the form is submitted, we will automatically validate the form data. If the verification fails, the request will not be initiated.

Data Caching

By setting cacheKey, we can apply the data caching for the Form and Table .

API

All parameters and returned results of useRequest are applicable to useFusionTable, so we won't repeat them here.

type Data = { total: number; list: any[] };
type Params = [{ current: number; pageSize: number, filter?: any, sorter?: any }, { [key: string]: any }];

const {
  ...,
  tableProps: {
    dataSource: TData['list'];
    loading: boolean;
    onSort: (dataIndex: string, order: string) => void;
    onFilter: (filterParams: any) => void;
  };
  paginationProps: {
    onChange: (current: number) => void;
    onPageSizeChange: (size: number) => void;
    current: number;
    pageSize: number;
    total: number;
  };
  search: {
    type: 'simple' | 'advance';
    changeType: () => void;
    submit: () => void;
    reset: () => void;
  };
} = useFusionTable<TData extends Data, TParams extends Params>(
  service: (...args: TParams) => Promise<TData>,
  {
    ...,
    field?: any;
    defaultType?: 'simple' | 'advance';
    defaultParams?: TParams,
    defaultPageSize?: number;
    refreshDeps?: any[];
  }
);

Result

| Property | Description | Type | | -- | | | | -- | | field | Form instance | - | - | | defaultType | Default form type | simple | advance | simple | | defaultParams | Default parameters, the first item is paging data, the second item is form data | [pagination, formData] | - | | defaultPageSize | Default page size | number | 10 | | refreshDeps | Changes in refreshDeps will reset current to the first page and re-initiate the request. | React.DependencyList | [] |