API-Referenz

Hier ist der vollständige Vertrag für paginable: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle paginable mit 31 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`data`Erforderlich	`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`Erforderlich	`(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.

Outputs

Reagiere darauf, was paginable tut — 9 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`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

Mach es zu deinem — 7 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`*paginableTableHeader`	Benutzerdefiniertes Header-Template zum Definieren benutzerdefinierter Spaltenüberschriften	`<ng-template *paginableTableHeader="let column">{{ column.title }}</ng-template>`
`*paginableTableCell`	Benutzerdefiniertes Zellen-Template zum Anpassen des Renderns von Zelleninhalten	`<ng-template *paginableTableCell="let value; let row">{{ value }}</ng-template>`
`*paginableTableRow`	Benutzerdefiniertes Zeilen-Template zum Definieren der gesamten Zeilenstruktur	`<ng-template *paginableTableRow="let row"><tr>...</tr></ng-template>`
`*paginableTableFilter`	Benutzerdefiniertes Filter-Template zum Hinzufügen von Filter-UI-Elementen	`<ng-template *paginableTableFilter="let column"><input type="text"></ng-template>`
`*paginableTableLoading`	Ladezustands-Template für benutzerdefinierte Ladeindikatoren	`<ng-template *paginableTableLoading><div class="spinner"></div></ng-template>`
`*paginableNoResults`	Leerzustands-Template, das angezeigt wird, wenn keine Daten verfügbar sind	`<ng-template *paginableNoResults><p>No data found</p></ng-template>`
`*paginableTableError`	Fehlerzustands-Template zur Behandlung von Fehlerbedingungen	`<ng-template *paginableTableError="let error"><p>Error: {{ error }}</p></ng-template>`