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>`