useTable
Hooks that handle Table-related logic, like frontend pagination, sort and search。
Examples
Basic usage
API
const { pagedData, page, total, search } = useTable(
data,
defaultParams?: Object
);
Params
| Property | Description | Type | Default |
|---|
| data | Table data array. | array | - |
| defaultParams | See the defaultParams section below. | object | {page, sort, search} |
defaultParams.page
| Property | Description | Type | Default |
|---|
| index | Current page number | number | 1 |
| size | Number of data items per page | number | 10 |
defaultParams.sort
| Property | Description | Type | Default |
|---|
| key | Sort field. | string | '' |
| direction | supported sort way, could be ascend, descend | string | ascend |
| compareFn | Sort function for local sort. | function | defaultCompareFn |
defaultParams.search
| Property | Description | Type | Default |
|---|
| text | Search content. | string | '' |
| isReg | True if Search content is regx. | boolean | false |
| keys | Search columns. If not set, will search all columns. | array | [] |
defaultParams
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;
}