useTable
纯前端 Table 相关逻辑的 hooks,例如分页,排序,搜索。
代码演示
基础使用
API
const { pagedData, page, total, search } = useTable(
data,
defaultParams?: Object
);
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|
| data | 表格数据. | array | - |
| defaultParams | 设置默认参数. | object | {page, sort, search} |
defaultParams.page
| 参数 | 说明 | 类型 | 默认值 |
|---|
| index | 当前页码 | number | 1 |
| size | 每页数量 | number | 10 |
defaultParams.sort
| 参数 | 说明 | 类型 | 默认值 |
|---|
| key | 根据此字段排序 | string | '' |
| direction | 设置排序是降序还是升序,取值为 ascend descend | string | ascend |
| compareFn | 比较函数 | function | defaultCompareFn |
defaultParams.search
| 参数 | 说明 | 类型 | 默认值 |
|---|
| text | 搜索内容 | string | '' |
| isReg | 是否使用正则搜索 | boolean | false |
| 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;
}