API 参考

这里是 paginable 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 31 个输入项精细调校 paginable。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`data`必填	`T[] \| PaginationState<T> \| null`	—	Table data, bound with the `data` alias. Pass a plain array to let the table paginate/filter/sort in memory (client mode, when `paginate` is true and `totalItems` is unset); pass a `PaginationState` for server mode (the table renders it as-is and reads `page`/`perPage`/`totalItems` from it).
`headers`必填	`(PaginableTableHeader \| string)[]`	—	Column definitions. A string is shorthand for `{ property, title }`; a `PaginableTableHeader` enables sorting, per-column filters, buttons, sticky/visibility, alignment and templates. Two-way bindable (`model`).
`page`	`number \| null`	—	Current 1-based page. Two-way bindable (`model`) — emits `pageChange`. Defaults to `null`.
`perPage`	`number \| null`	—	Items per page. Two-way bindable (`model`) — emits `perPageChange`. Defaults to `10`.
`perPageOptions`	`number[]`	—	Selectable page sizes shown in the per-page selector. Defaults to `[10, 20, 50, 100]`.
`totalItems`	`number \| null`	—	Total number of items across all pages (server mode). Setting it keeps the table in server mode even for a plain array. Two-way bindable (`model`) — emits `totalItemsChange`.
`paginate`	`boolean`	—	Enables pagination. When `true` (default) with a plain array and no `totalItems`, the table searches, filters, sorts and slices in memory (client mode). Set `false` to render the whole array without pagination.
`ordination`	`PaginableTableOrdination`	—	Active sort (`{ property, direction }`). Two-way bindable (`model`) — emits `ordinationChange` when a sortable header is clicked.
`searchable`	`boolean`	—	Shows the global search box. Defaults to `true`.
`searchTerm`	`string`	—	Global search term. Two-way bindable (`model`) — emits `searchTermChange` (debounced by `debounce`).
`filters`	`Record<string, unknown> \| null`	—	Per-column filter values keyed by `filter.key` or `property`. Two-way bindable (`model`) — emits `filtersChange`.
`selectable`	`SelectionTypes \| boolean \| null`	—	Enables row selection (`true`/`single` or `multiple`). The selected value is read/written through `ControlValueAccessor` (`[(ngModel)]` or a `formControl`).
`multiple`	`boolean`	—	Forces multiple selection regardless of `selectable`. Defaults to `false`.
`bindValue`	`string`	—	Property of each row used as the selection value instead of the whole object.
`clickFn`	`(event: TableRowEvent<T>) => void \| Promise<void>`	—	Callback invoked when a row is clicked, receiving the row data plus the originating event.
`rowClass`	`string \| ((item: T) => string)`	—	CSS class applied to every row, either a fixed string or a function of the row data.
`responsive`	`TableBreakpoint \| null`	—	Breakpoint at which the table switches to its responsive (stacked) layout.
`paginationPosition`	`'bottom' \| 'top' \| 'both'`	—	Where the pagination controls are rendered (`bottom`, `top` or `both`). Defaults to `bottom`.
`paginationInfo`	`boolean`	—	Shows the "Showing X of Y" info line. Defaults to `true`.
`stickyActions`	`boolean`	—	Keeps the row action column stuck to the viewport while scrolling. Defaults to `false`.
`stickyHeader`	`boolean`	—	Pins the header (`position: sticky; top: 0`) while the body scrolls, inside any consumer `max-height`/`overflow:auto` container — decoupled from `options.scrollable`. Overridable via `--hub-table-head-position`. Defaults to `false`.
`flushFields`	`boolean`	`false`	Draws the form controls inside the cells as a spreadsheet does: no border, no surface of their own. A field is boxed so it can be told apart from the page around it, and a table cell already does that job — so the box gets drawn twice and an editable table reads as a form that fell into a table. Static prepend/append content loses its chip and reads as the plain text or icon it is; a projected button stops being welded to its neighbour, getting its corners back, a gap and its own border colour, because two actions in a cell are two things to press rather than one strip. The control regains its shared corners too. It is a token assignment on the cells rather than an input on each field, which is both why it reaches your own cellTpt content and why it needs ng-hub-ui-forms 22.21.0 for the seam tokens.
`flush`	`boolean`	—	Draws the collection as a list rather than as a stack of cards: no border, radius or surface per row, a rule between them instead. On `hub-table` it drops the outer border, the radius, the head rule and the cell padding while keeping the row divider, because a table with no line between rows stops being readable across its columns. Right for a list of choices inside a dialog or a panel, where the surface has already drawn the frame. An input rather than something CSS can reach: the token defaults sit on the host, so a consumer class on the same element ties on specificity and loses on source order. Defaults to `false`.
`batchActions`	`(PaginableTableDropdown \| PaginableActionButton)[]`	—	Actions shown in the toolbar that operate on the currently selected rows.
`debounce`	`number`	—	Debounce in milliseconds applied to search and filter changes. Defaults to `0`.
`options`	`PaginableTableOptions`	—	Visual/behavioural options: `striped`, `hoverableRows`, `variant`, `cursor`, `scrollable`, `rtl`…
`loading`	`boolean`	—	Renders the loading state. Two-way bindable (`model`) — emits `loadingChange`.
`error`	`unknown \| null`	—	When truthy, renders the error state. Two-way bindable (`model`) — emits `errorChange`.
`loadingComponent`	`PaginableStateDefault \| null`	—	Per-instance default component for the loading state.
`errorComponent`	`PaginableStateDefault \| null`	—	Per-instance default component for the error state.
`noResultsComponent`	`PaginableStateDefault \| null`	—	Per-instance default component for the no-results state.

输出

响应 paginable 的行为——有 9 个事件可供你挂接逻辑。

名称	类型	描述
`pageChange`	`number \| null`	Emitted by the two-way `page` model when the current page changes.
`perPageChange`	`number \| null`	Emitted by the two-way `perPage` model when the page size changes.
`totalItemsChange`	`number \| null`	Emitted by the two-way `totalItems` model (e.g. when a `PaginationState` is bound).
`ordinationChange`	`PaginableTableOrdination`	Emitted by the two-way `ordination` model when sorting changes — use it to drive server-side sorting.
`filtersChange`	`Record<string, unknown> \| null`	Emitted by the two-way `filters` model when a column filter changes — use it to drive server-side filtering.
`searchTermChange`	`string`	Emitted by the two-way `searchTerm` model when the global search changes (debounced by `debounce`).
`loadingChange`	`boolean`	Emitted by the two-way `loading` model.
`errorChange`	`unknown \| null`	Emitted by the two-way `error` model.
`headersChange`	`(PaginableTableHeader \| string)[]`	Emitted by the two-way `headers` model when the column configuration changes.

模板

打造你自己的样式——7 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`*paginableTableHeader`	用于定义自定义列头部的自定义头部模板	`<ng-template *paginableTableHeader="let column">{{ column.title }}</ng-template>`
`*paginableTableCell`	用于自定义单元格内容渲染的自定义单元格模板	`<ng-template *paginableTableCell="let value; let row">{{ value }}</ng-template>`
`*paginableTableRow`	用于定义整行结构的自定义行模板	`<ng-template *paginableTableRow="let row"><tr>...</tr></ng-template>`
`*paginableTableFilter`	用于添加筛选 UI 元素的自定义筛选模板	`<ng-template *paginableTableFilter="let column"><input type="text"></ng-template>`
`*paginableTableLoading`	用于自定义加载指示器的加载状态模板	`<ng-template *paginableTableLoading><div class="spinner"></div></ng-template>`
`*paginableNoResults`	当没有可用数据时显示的空状态模板	`<ng-template *paginableNoResults><p>No data found</p></ng-template>`
`*paginableTableError`	用于处理错误情况的错误状态模板	`<ng-template *paginableTableError="let error"><p>Error: {{ error }}</p></ng-template>`