Angular Data Table and Paginated List | ng-hub-ui-paginable
Angular data table and paginated list with server-side pagination, sorting, filtering, selection, templates and CSS variables.
API reference
Inputs
data (Required)
Type: T[] | Observable<T[]>
Array of data items to display in the table or Observable that emits data arrays
headers (Required)
Type: PaginableTableHeader[]
Configuration array defining table columns and their properties
pagination
Type: PaginableTablePagination
Pagination configuration including page size, current page, and total items
options
Type: PaginableTableOptions
General table options including selection mode, loading state, and responsive behavior
loading
Type: boolean
Shows loading state with spinner overlay
selected
Type: T[]
Array of currently selected items (two-way binding supported)
Outputs
rowClick
Type: TableRowEvent<T>
Emitted when a table row is clicked, includes row data and event details
selectionChange
Type: T[]
Emitted when row selection changes, returns array of selected items
sortChange
Type: PaginableTableOrdination[]
Emitted when column sorting changes, returns current sort configuration
filterChange
Type: FilterChangeEvent
Emitted when filters are applied or changed
pageChange
Type: PaginationState
Emitted when pagination changes (page number or size)
Templates
*paginableTableHeader
Custom header template for defining custom column headers
Example:
*paginableTableCell
Custom cell template for customizing cell content rendering
Example:
*paginableTableRow
Custom row template for defining entire row structure
Example:
*paginableTableFilter
Custom filter template for adding filtering UI elements
Example:
*paginableTableLoading
Loading state template for custom loading indicators
Example:
*paginableNoResults
Empty state template displayed when no data is available
Example:
*paginableTableError
Error state template for handling error conditions
Example:
CSS variables
Colors
Color customization variables for table appearance
--table-bg-color
Type: color
Default:#ffffff
Background color of the table
--table-border-color
Type: color
Default:#dee2e6
Border color for table cells and headers
--table-header-bg
Type: color
Default:#f8f9fa
Background color of table headers
--table-header-color
Type: color
Default:#495057
Text color of table headers
--table-row-hover-bg
Type: color
Default:#f5f5f5
Background color when hovering over rows
--table-stripe-bg
Type: color
Default:#f9f9f9
Background color for striped rows
--table-selected-bg
Type: color
Default:#e3f2fd
Background color for selected rows
--table-sort-indicator-color
Type: color
Default:#007bff
Color of sort direction indicators
--table-loading-overlay-bg
Type: color
Default:rgba(255, 255, 255, 0.8)
Background color of loading overlay
--table-pagination-active-bg
Type: color
Default:#007bff
Background color of active pagination button
Styling and theming
No styling examples are documented yet. This section will include customization recipes and theming examples.