useTable

纯前端 Table 相关逻辑的 hooks,例如分页,排序,搜索。

新增的 Hook。

代码演示

基础使用

API

const { pagedData, page, total, search } = useTable(
  data,
  defaultParams?: Object
);

参数

参数说明类型默认值
data表格数据.array-
defaultParams设置默认参数.object{page, sort, search}

defaultParams.page

参数说明类型默认值
index当前页码number1
size每页数量number10

defaultParams.sort

参数说明类型默认值
key根据此字段排序string''
direction设置排序是降序还是升序,取值为 ascend descendstringascend
compareFn比较函数functiondefaultCompareFn
参数说明类型默认值
text搜索内容string''
isReg是否使用正则搜索booleanfalse
keys需要搜索哪些字段,如果不传则搜索所有字段array[]

默认参数值

const defaultParams = {
  page: {
    index: 1,
    size: 10,
  },
  search: {
    text: '',
    isReg: false,
    keys: [] as string[],
  },
  sort: {
    key: '',
    direction: 'ascend',
    compareFn: defaultCompareFn,
  },
};
function defaultCompareFn(a: any, b: any) {
  return a < b ? -1 : 1;
}

最近更新: