import type { TablePaginationConfig } from 'antd'; type SortDirection = 'asc' | 'desc'; /** * 排序配置 */ export interface SortValue { field: string; direction: SortDirection; } /** * 分页配置 - 基于 Ant Design 的类型,但确保必要字段不为空 */ export interface PaginationConfig extends TablePaginationConfig { current: number; pageSize: number; total: number; } /** * 过滤配置 */ export interface FilterValue { [key: string]: any; } /** * Hook 配置选项 */ export interface UseTableDataOptions { /** 原始数据 - 服务端模式下可选,前端模式下必需 */ data?: T[]; /** 初始分页配置 */ initialPagination?: Partial; /** 初始排序配置 */ initialSort?: SortValue; /** 初始过滤配置 */ initialFilter?: FilterValue; /** 初始搜索关键字 */ initialSearch?: string; /** 搜索字段配置 - 指定哪些字段参与搜索,支持嵌套属性如 "user.name", "address.city" */ searchFields?: string[]; /** 是否启用服务端模式 - 启用后不会对数据进行前端处理,只管理状态 */ serverMode?: boolean; /** 是否禁用分页 - 启用后返回所有数据,不进行分页处理 */ disablePagination?: boolean; /** 自定义搜索函数 */ customSearch?: (item: T, keyword: string) => boolean; /** 自定义排序函数 */ customSort?: (a: T, b: T, field: string, direction: SortDirection) => number; /** 自定义过滤函数 */ customFilter?: (item: T, filters: FilterValue) => boolean; /** 持久化配置 - 如果提供,则状态将被保存到 localStorage */ persistence?: { /** 用于在 localStorage 中存储状态的唯一键 */ key: string; /** 持久化哪些状态 */ include?: ('pagination' | 'sort' | 'filter' | 'search')[]; }; } /** * Hook 返回值 */ export interface UseTableDataReturn { /** 处理后的数据源 */ dataSource: T[]; /** 分页配置 */ pagination: PaginationConfig & { onChange: (page: number, pageSize: number) => void; onShowSizeChange: (current: number, size: number) => void; }; /** 搜索配置 */ search: { value: string; onChange: (value: string) => void; }; /** 排序配置 */ sort: { value: SortValue | null; onChange: (field: string, direction: SortDirection) => void; }; /** 过滤配置 */ filter: { value: FilterValue; onChange: (filters: FilterValue) => void; }; /** 重置所有状态 */ reset: () => void; } /** * 前端表格数据处理 Hook * * 提供分页、排序、过滤、搜索功能,支持前端模式和服务端模式 * 前端模式:对数据进行前端处理(搜索、过滤、排序、分页) * 服务端模式:只管理状态,不处理数据,适用于后端分页场景 * * @example * 前端模式 - 统一对象 API: * ```tsx * const { * dataSource, * pagination, * search, * sort, * filter * } = useTableData({ * data: users, * searchFields: ['name', 'email', 'address.city', 'user.profile.name'], * initialPagination: { pageSize: 20 } * }); * * return ( *
* * * * * * * ); * ``` * * @example * 前端模式 - 禁用分页,显示所有数据: * ```tsx * const { * dataSource, * search, * sort, * filter * } = useTableData({ * data: users, * disablePagination: true, // 禁用分页,返回所有数据 * searchFields: ['name', 'email'] * }); * * return ( *
* * * *
* * ); * ``` * * @example * 服务端模式 - 后端分页: * ```tsx * const { * pagination, * search, * sort, * filter * } = useTableData({ * serverMode: true, * initialPagination: { * pageSize: 20, * total: 0 * } * }); * * const { data: serverData, isLoading } = useQuery({ * queryKey: ['data', search.value, sort.value, filter.value, pagination.current], * queryFn: () => fetchDataFromServer({ * page: pagination.current, * pageSize: pagination.pageSize, * search: search.value, * sort: sort.value, * filter: filter.value * }) * }); * * return ( *
* * * *
* * * ); * ``` */ export declare function useTableData>(options: UseTableDataOptions): UseTableDataReturn; export {};