API reference

Here's the full contract for paginable: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial paginable in with 29 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`data`Required	`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`Required	`(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`.
`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.

Outputs

React to what paginable does — 9 events to hook your logic onto.

Name	Type	Description
`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.

Templates

Make it yours — 7 template slots let you project custom markup.

Name	Description	Example
`*paginableTableHeader`	Custom header template for defining custom column headers	`<ng-template *paginableTableHeader="let column">{{ column.title }}</ng-template>`
`*paginableTableCell`	Custom cell template for customizing cell content rendering	`<ng-template *paginableTableCell="let value; let row">{{ value }}</ng-template>`
`*paginableTableRow`	Custom row template for defining entire row structure	`<ng-template *paginableTableRow="let row"><tr>...</tr></ng-template>`
`*paginableTableFilter`	Custom filter template for adding filtering UI elements	`<ng-template *paginableTableFilter="let column"><input type="text"></ng-template>`
`*paginableTableLoading`	Loading state template for custom loading indicators	`<ng-template *paginableTableLoading><div class="spinner"></div></ng-template>`
`*paginableNoResults`	Empty state template displayed when no data is available	`<ng-template *paginableNoResults><p>No data found</p></ng-template>`
`*paginableTableError`	Error state template for handling error conditions	`<ng-template *paginableTableError="let error"><p>Error: {{ error }}</p></ng-template>`