Skip to content

useTablePagination

@astryxdesign/core v0.7.1 · useTablePagination

参数 ​

useTablePagination() 只接一个配置对象。页码存在 ref 里时用 getter 包一层,控件每次读都能拿到最新的值:useTablePagination(() => ({ ... }))。

名称类型默认值说明
pagenumber—必填。当前页,从 1 计。
onPageChange(page: number) => void—必填。翻页时调用。
totalItemsnumber—全部条目数,用来算页数。没给它也没给 totalPages 时,控件只认 hasMore。
totalPagesnumber—总页数。只知道页数、不知道条目数时用它。它优先于从 totalItems 算出来的页数。
hasMoreboolean—后面还有没有下一页。游标分页用它:总数未知也能翻。为真时下一页按钮一直可点。
pageSizenumber10每页条目数。切行的时候要用同一个数。
onPageSizeChange(pageSize: number) => void—用户改每页条数时调用。它和 pageSizeOptions 都给,才会出现每页条数选择器。
pageSizeOptionsnumber[][10, 20, 50, 100]可选的每页条数。要出现选择器还需要 onPageSizeChange。
variant'pages' | 'count' | 'compact' | 'dots' | 'none''pages'上一页和下一页之间放什么:页码按钮、「第几条到第几条 / 共几条」、紧凑的「第几页 / 共几页」、圆点,或者什么都不放。
position'below' | 'above' | 'both' | 'none''below'控件放在表格的哪一侧。取 'both' 时上下各有一组。
align'start' | 'center' | 'end''center'控件的水平对齐。
size'sm' | 'md''md'控件高度。
labelstring当前语言的「表格分页」分页导航区的无障碍名称。取 position: 'both' 时两块导航区的名字会区分开,后面分别加 (top) 和 (bottom),同类型地标不会重名。

返回值 ​

useTablePagination() 返回一个 TablePlugin<T>,放进 Table 的 plugins 里。它填的是插件约定里的两个字段:

名称类型说明
above() => VNodeChildposition 是 'above' 或 'both' 时,在表格上方画控件。
below() => VNodeChildposition 是 'below' 或 'both' 时,在表格下方画控件。

position 是 'none',或者表格只有一页而且 hasMore 不是 true 时,两个都返回 null。