# new TableComponent()
The TableComponent extends the ListComponent and serves as a dynamic, configurable table
component. It supports server-side filtering, dynamic column resolution, row-level CRUD actions, and cell
truncation with tooltips via DecafTooltipDirective. The component integrates seamlessly with the
Decaf rendering engine and provides advanced customization options for filtering, sorting, and data mapping.
Provides a feature-rich, paginated data table component for Angular applications.
- Implements:
- OnInit
Extends
Classes
- ListComponent
Creates a new ListComponent and sets up the base component with the appropriate component name. This constructor is called when Angular instantiates the component and before any input properties are set. It passes the component name to the parent class constructor to enable proper localization and component identification.
The constructor is intentionally minimal, with most initialization logic deferred to the ngOnInit lifecycle hook. This follows Angular best practices by keeping the constructor focused on dependency injection and basic setup, while complex initialization that depends on input properties is handled in ngOnInit.
Members
# _cols
Reads this._mapper to obtain all columns that carry a sequence property,
then sorts them so that columns anchored to UIKeys.FIRST appear first, numerically
sequenced columns are ordered by their value, and UIKeys.LAST anchored columns appear
last. Returns the final sorted array of column key strings.
Resolves and sorts the visible column keys from the current mapper metadata.
# _headers
Returns the column header labels derived directly from the resolved cols array.
Returns the column header labels derived directly from the resolved cols array.
# _mapper
Iterates over this.mapper, retains only keys whose value is a plain object
containing a sequence field, and returns the resulting subset as a KeyValue map
used by _cols for ordered column resolution.
Filters the raw mapper to only the entries that declare a sequence property.
boolean
# allowOperations
When true, row-level action buttons are rendered if the user has the required permissions.
When true, row-level action buttons are rendered if the user has the required permissions.
- Default Value:
- true
View Source lib/components/table/table.component.ts, line 93
EventEmitter.<KeyValue>
# clickEvent
Emits an event when a list item is clicked. The event includes the data of the clicked item, allowing parent components to respond to the interaction.
Event emitter for item click interactions.
Array.<string>
# cols
Ordered array of column keys rendered as table columns.
Ordered array of column keys rendered as table columns. Includes 'actions' when operations are permitted.
boolean
# createButton
When set to true, displays a button to create new items in the list.
Controls the visibility of the create button.
- Inherited From:
- Default Value:
- false
View Source lib/components/list/list.component.ts, line 1595
Array.<KeyValue>
|
undefined
# data
Provides a way to directly pass data to the list component instead of fetching it from a source. When both data and source are provided, the component will use the source to fetch data only if the data array is empty.
Direct data input for the list component.
- Inherited From:
- Default Value:
- undefined
View Source lib/components/list/list.component.ts, line 1492
boolean
# disablePaginationPages
When set to true, disables the pagination controls, preventing users from navigating between pages. This is useful for scenarios where pagination is not required or should be hidden.
Controls whether pagination pages are disabled.
- Inherited From:
- Default Value:
- false
View Source lib/components/list/list.component.ts, line 1652
boolean
# disableSort
When set to true, disables the sort controls and prevents users from changing the sort order or field. The list will maintain its default or programmatically set sort configuration without user interaction.
Controls whether sorting functionality is disabled.
- Inherited From:
- Default Value:
- false
View Source lib/components/list/list.component.ts, line 1641
Partial.<IListEmptyOptions>
# empty
Customizes how the empty state is displayed when no data is available. This includes the title, subtitle, button text, icon, and navigation link.
Configuration for the empty state display.
- Overrides:
- Default Value:
- { title: 'empty.title', subtitle: 'empty.subtitle', showButton: false, icon: 'alert-circle-outline', buttonText: 'locale.empty.button', link: '' }
View Source lib/components/list/list.component.ts, line 1681
boolean
# enableFilter
When set to true, enables the filter component that allows users to create complex search criteria with multiple field filters, conditions, and values. When false, disables the filter interface entirely.
Controls whether the filtering functionality is enabled.
- Inherited From:
- Default Value:
- true
View Source lib/components/list/list.component.ts, line 1618
string
# filterLabel
Translatable label rendered on the filter select input.
Translatable label rendered on the filter select input.
Model
|
FunctionLike
|
string
# filterModel
Source used to populate filter select options: a model class, async function, or string key.
Source used to populate filter select options: a model class, async function, or string key.
Array.<SelectOption>
# filterOptions
Array of SelectOption objects displayed in the filter select control.
Array of SelectOption objects displayed in the filter select control.
FunctionLike
# filterOptionsMapper
Custom function that maps a repository item to a SelectOption shape.
Custom function that maps a repository item to a SelectOption shape.
string
|
undefined
# filterValue
Currently selected filter value; undefined when no filter is active.
Currently selected filter value; undefined when no filter is active.
Array.<string>
# headers
Column header label array, mirrors cols after getOperations() resolves.
Column header label array, mirrors cols after getOperations() resolves.
boolean
# inset
When set to true, the list will have inset styling with rounded corners and margin around the edges. This creates a card-like appearance for the list.
Controls whether the list has inset styling.
- Inherited From:
- Default Value:
- false
View Source lib/components/list/list.component.ts, line 1541
Array.<KeyValue>
# items
Stores the current set of items being displayed in the list after processing from the raw data source. This may be a subset of the full data when using pagination or infinite scrolling.
The processed list items ready for display.
- Inherited From:
View Source lib/components/list/list.component.ts, line 1724
number
# lastPage
Keeps track of the previously displayed page number, which is useful for handling navigation and search operations in paginated mode.
The last page number that was displayed.
- Inherited From:
- Default Value:
- 1
View Source lib/components/list/list.component.ts, line 1750
"inset"
|
"full"
|
"none"
# lines
Determines how dividing lines appear between list items. Options include:
- "inset": Lines are inset from the edges
- "full": Lines extend the full width
- "none": No dividing lines
The style of dividing lines between list items.
- Inherited From:
- Default Value:
- "full"
View Source lib/components/list/list.component.ts, line 1530
boolean
# loadMoreData
When set to true, the component will allow loading additional data through infinite scrolling or pagination. When false, the component will not attempt to load more data beyond what is initially displayed.
Controls whether more data can be loaded.
- Inherited From:
- Default Value:
- true
View Source lib/components/list/list.component.ts, line 1517
SpinnerTypes
# loadingSpinner
Specifies the visual style of the loading spinner shown during data fetching operations. Uses Ionic's predefined spinner types.
The type of spinner to display during loading operations.
- Inherited From:
- Default Value:
- "circular"
View Source lib/components/list/list.component.ts, line 1606
string
|
undefined
# loadingText
Specifies the text shown in the loading indicator when the component is fetching data. If not provided, a default loading message will be used.
Custom text to display during loading operations.
number
# maxContentLength
Maximum character count before cell content is truncated.
Maximum character count before cell content is truncated. -1 disables truncation.
- Default Value:
- -1
View Source lib/components/table/table.component.ts, line 46
boolean
# multipleFilter
When true, the filter component allows users to build compound queries with several filter rows. When false, only a single filter row is available.
Controls whether multiple filter groups can be applied simultaneously.
- Inherited From:
- Default Value:
- true
View Source lib/components/list/list.component.ts, line 1629
number
# page
Tracks which page is currently being displayed when the component is in paginated mode. This is used for pagination controls and data fetching.
The current page number in paginated mode.
- Inherited From:
- Default Value:
- 1
View Source lib/components/list/list.component.ts, line 1692
number
# pages
Stores the calculated total number of pages based on the data size and limit. This is used for pagination controls and boundary checking.
The total number of pages available.
- Inherited From:
View Source lib/components/list/list.component.ts, line 1702
Array.<string>
# preserve
Column keys whose values are never truncated regardless of maxContentLength.
Column keys whose values are never truncated regardless of maxContentLength.
- Default Value:
- ['userId']
View Source lib/components/table/table.component.ts, line 52
NgxRouterService
# routerService
Injected NgxRouterService used to read URL query parameters for pre-populating the search state.
Injected NgxRouterService used to read URL query parameters for pre-populating the search state.
"bottom"
|
"top"
# scrollPosition
Determines whether new items are added to the top or bottom of the list when loading more data through infinite scrolling.
The position where new items are added during infinite scrolling.
- Inherited From:
- Default Value:
- "bottom"
View Source lib/components/list/list.component.ts, line 1564
string
# scrollThreshold
Specifies how close to the bottom of the list the user must scroll before the component triggers loading of additional data. This is expressed as a percentage of the list height.
The threshold for triggering infinite scroll loading.
- Inherited From:
- Default Value:
- "15%"
View Source lib/components/list/list.component.ts, line 1553
boolean
# searchbarPlaceholder
When set to true, displays a search bar at the top of the list that allows users to filter the list items. The search functionality works by filtering the existing data or by triggering a new data fetch with search parameters.
Controls the visibility of the search bar.
- Inherited From:
- Default Value:
- true
View Source lib/components/list/list.component.ts, line 1480
boolean
# showRefresher
When set to true, enables the pull-to-refresh functionality that allows users to refresh the list data by pulling down from the top of the list.
Controls the visibility of the pull-to-refresh feature.
- Inherited From:
- Default Value:
- true
View Source lib/components/list/list.component.ts, line 1585
boolean
# showSearchbar
When set to true, displays a search bar at the top of the list that allows users to filter the list items. The search functionality works by filtering the existing data or by triggering a new data fetch with search parameters.
Controls the visibility of the search bar.
- Inherited From:
- Default Value:
- true
View Source lib/components/list/list.component.ts, line 1468
Array.<string>
# skeletonData
Contains placeholder items that are displayed during data loading. The length of this array determines how many skeleton items are shown.
Array used for rendering skeleton loading placeholders.
- Inherited From:
- Default Value:
- new Array(2)
View Source lib/components/list/list.component.ts, line 1713
string
|
FunctionLike
# source
Specifies where the list should fetch its data from. This can be either:
- A string URL or endpoint identifier
- A function that returns data when called The component will call this source when it needs to load or refresh data.
The data source for the list component.
- Inherited From:
View Source lib/components/list/list.component.ts, line 1505
boolean
# truncatePaginationPages
When set to true, truncates the pagination controls to show fewer pages, improving the user interface for lists with a large number of pages.
Controls whether pagination pages are truncated.
- Inherited From:
- Default Value:
- true
View Source lib/components/list/list.component.ts, line 1663
ListComponentsTypes
# type
Determines how the list data is loaded and displayed. Options include:
- INFINITE: Loads more data as the user scrolls (infinite scrolling)
- PAGINATED: Displays data in pages with navigation controls
The display mode for the list component.
- Overrides:
- Default Value:
- ListComponentsTypes.INFINITE
View Source lib/components/list/list.component.ts, line 1456
Methods
# async clearSearch() → {Promise.<void>}
Convenience method that clears the search by calling handleSearch with undefined. This resets the list to show all data without filtering.
Clears the current search and resets the list.
Promise.<void>
# async getFilterOptions() → {Promise.<void>}
Resolves filter options dynamically based on the provided filterModel. Supports both
async functions and repository-based data sources.
Populates filterOptions from a function call or a decorator-bound repository.
Promise.<void>
# async getFromModel(force, start, limit) → {Promise.<Array.<KeyValue>>}
Retrieves data from the configured model using its pagination or find methods, processes it, and updates the component's data state. This method handles both initial data loading and subsequent refresh operations when using a model as the data source.
Fetches data from a model source.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
force |
boolean
|
false | Whether to force a refresh even if data already exists |
start |
number
|
The starting index for pagination |
|
limit |
number
|
The maximum number of items to retrieve |
A promise that resolves to the fetched data
Promise.<Array.<KeyValue>>
# async getFromRequest(force, start, limit) → {Promise.<Array.<KeyValue>>}
Retrieves data from the configured source function or URL, processes it, and updates the component's data state. This method handles both initial data loading and subsequent refresh operations when using an external data source rather than a model.
Fetches data from a request source.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
force |
boolean
|
false | Whether to force a refresh even if data already exists |
start |
number
|
The starting index for pagination |
|
limit |
number
|
The maximum number of items to retrieve |
A promise that resolves to the fetched data
Promise.<Array.<KeyValue>>
# getMoreData(length) → {void}
Calculates whether more data is available and how many pages exist based on the total number of items and the configured limit per page. This information is used to control pagination UI and infinite scrolling behavior.
Updates pagination state based on data length.
Parameters:
| Name | Type | Description |
|---|---|---|
length |
number
|
The total number of items available |
void
# getOperations() → {void}
Checks user permissions for UPDATE and DELETE operations. Updates the cols and headers arrays accordingly.
Determines which row-level CRUD operations are permitted and finalizes the column list.
void
# async handleAction(event, handler, uid, action) → {Promise.<void>}
Invokes a custom handler or navigates to the appropriate route for the given action.
Handles a CRUD action triggered by a row action button.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
IBaseCustomEvent
|
The originating event. |
handler |
UIFunctionLike
|
undefined
|
Optional custom handler. |
uid |
string
|
Primary key value of the target row. |
action |
CrudOperations
|
The CRUD operation type. |
Promise.<void>
# async handleClick(event) → {Promise.<void>}
Listens for global ListItemClickEvent events and passes them to the debounced click subject. This allows the component to respond to clicks on list items regardless of where they originate from.
Handles click events from list items.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
IListItemCustomEvent
|
IBaseCustomEvent
|
The click event |
Promise.<void>
# handleDelete(uid, pk) → {Promise.<void>}
Filters out an item with the specified ID from the data array and refreshes the list display. This is typically used after a delete operation.
Removes an item from the list by ID.
Parameters:
| Name | Type | Description |
|---|---|---|
uid |
string
|
The ID of the item to delete |
pk |
string
|
The primary key field name |
Promise.<void>
# async handleFilter(value) → {Promise.<void>}
Processes filter queries from the filter component and applies them to the list data. This method acts as a bridge between the filter component and the search functionality, converting filter queries into search operations.
Handles filter events from the filter component.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
IFilterQuery
|
undefined
|
The filter query object or undefined to clear filters |
Promise.<void>
# async handleFilterSelectClear(event) → {Promise.<void>}
Resets filterValue and reloads the full data set.
Clears the active filter selection and resets the table to an unfiltered state.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
CustomEvent
|
The clear event emitted by the filter select control. |
Promise.<void>
# async handleObserveEvent(clazz, event, uid) → {Promise.<void>}
Processes repository change events (CREATE, UPDATE, DELETE) and performs the appropriate list operations. This includes adding new items, updating existing ones, or removing deleted items from the list display.
Handles specific repository events and updates the list accordingly.
Parameters:
| Name | Type | Description |
|---|---|---|
clazz |
UIFunctionLike
|
The model instance that changed |
event |
OperationKeys
|
The type of operation (CREATE, UPDATE, DELETE) |
uid |
string
|
number
|
The unique identifier of the affected item |
- Overrides:
Promise.<void>
# async handlePaginate(event) → {Promise.<void>}
Processes pagination events by updating the current page number and refreshing the list data to display the selected page. This method is called when a user interacts with the pagination controls to navigate between pages.
Handles pagination events from the pagination component.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
IPaginationCustomEvent
|
The pagination event containing page information |
Promise.<void>
# async handleRedirect(event, uid, action) → {Promise.<void>}
Verifies the requested action and navigates to the appropriate route.
Navigates to the CRUD action route for the specified row.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event
|
IBaseCustomEvent
|
The originating event. |
uid |
string
|
Primary key value of the target row. |
action |
CrudOperations
|
The CRUD operation to navigate to. |
Promise.<void>
# async handleRefresh(eventopt) → {Promise.<void>}
Processes refresh events triggered by the user pulling down on the list or by programmatic refresh requests. This method refreshes the list data and completes the refresher animation when the data is loaded.
Handles pull-to-refresh events from the refresher component.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
event |
InfiniteScrollCustomEvent
|
CustomEvent
|
<optional> |
The refresh event |
A promise that resolves when the refresh operation is complete
Promise.<void>
# async handleSearch(value) → {Promise.<void>}
Processes search queries from the search bar component, updating the displayed data based on the search term. The behavior differs between infinite and paginated modes to provide the best user experience for each mode.
Handles search events from the search bar.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string
|
undefined
|
The search term or undefined to clear search |
Promise.<void>
# async handleUpdate(model, uid) → {Promise.<void>}
Executes the default update flow inherited from ListComponent and then
finds the already-mapped row in this.items by uid. When found, it synchronizes
each displayed cell value (except the uid field) with the latest values from
model, preserving the mapped row structure used by the table.
Updates the matching rendered table row after an edit operation.
Parameters:
| Name | Type | Description |
|---|---|---|
model |
Model
|
Model instance containing updated values. |
uid |
string
|
number
|
Unique identifier of the row to update. |
- Overrides:
- ListComponent#handleUpdate
View Source lib/components/table/table.component.ts, line 411
Promise.<void>
# async itemMapper(item, mapper, propsopt) → {Promise.<KeyValue>}
Applies transformations and event bindings to each row of data, preparing it for rendering.
Maps a single raw data row to the cell-structured format expected by the table template.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
item |
KeyValue
|
Raw data object representing a single table row. |
||
mapper |
KeyValue
|
Column mapper definitions. |
||
props |
KeyValue
|
<optional> |
{} | Additional rendering props. |
Mapped row object.
Promise.<KeyValue>
# async mapResults(data) → {Promise.<Array.<KeyValue>>}
Resolves all rows concurrently via Promise.all, delegating each item to itemMapper.
Maps an array of raw data objects to the cell-structured rows used by the template.
Parameters:
| Name | Type | Description |
|---|---|---|
data |
Array.<KeyValue>
|
Raw row objects returned by the data source. |
Array of structured row objects.
Promise.<Array.<KeyValue>>
# async ngOnDestroy() → {Promise.<void>}
Performs cleanup operations when the component is being removed from the DOM. This includes clearing references to models and data to prevent memory leaks.
Cleans up resources when the component is destroyed.
Promise.<void>
# async ngOnInit() → {Promise.<void>}
Sets up the table by resolving columns, headers, and filter options. It also reads URL query parameters to pre-populate the search state and triggers the initial data refresh.
Angular lifecycle hook that initializes the table and loads its first page of data.
Promise.<void>
# async openFilterSelectOptions(event) → {Promise.<void>}
Determines the presentation mode and handles user selection.
Opens the filter select UI, allowing the user to narrow table results by a field value.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event
|
The click event that triggered the filter open action. |
Promise.<void>
# parseConditions(value) → {Condition.<Model>}
Transforms search input or complex filter queries into Condition objects that can be used for database querying. Handles both simple string/number searches across indexed fields and complex filter queries with multiple criteria.
For simple searches (string/number):
- Creates conditions that search across all indexed fields
- Uses equality for numeric values and regex for string values
- Combines conditions with OR logic to search multiple fields
For complex filter queries:
- Processes each filter item with its specific condition type
- Supports Equal, Not Equal, Contains, Not Contains, Greater Than, Less Than
- Updates sort configuration based on the filter query
- Combines multiple filter conditions with OR logic
Converts search values or filter queries into database conditions.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string
|
number
|
IFilterQuery
|
The search value or filter query object |
A Condition object for database querying
Condition.<Model>
# async protected parseResult(result) → {Array.<KeyValue>}
Handles different result formats from various data sources, extracting pagination information when available and applying any configured data mapping. This ensures consistent data structure regardless of the source.
Processes query results into a standardized format.
Parameters:
| Name | Type | Description |
|---|---|---|
result |
Array.<KeyValue>
|
Paginator
|
The raw query result |
The processed array of items
Array.<KeyValue>
# parseSearchResults(results, search) → {Array.<KeyValue>}
Processes the current data array to find items that match the provided search string. This uses the arrayQueryByString utility to perform the filtering across all properties of the items.
Filters data based on a search string.
Parameters:
| Name | Type | Description |
|---|---|---|
results |
Array.<KeyValue>
|
The array of items to search through |
search |
string
|
The search string to filter by |
- Overrides:
A promise that resolves to the filtered array of items
Array.<KeyValue>
# async refresh(event) → {Promise.<void>}
This method handles both initial data loading and subsequent refresh operations, including pull-to-refresh and infinite scrolling. It manages the data fetching process, updates the component's state, and handles pagination or infinite scrolling logic based on the component's configuration.
The method performs the following steps:
- Sets the refreshing flag to indicate a data fetch is in progress
- Calculates the appropriate start and limit values based on pagination settings
- Fetches data from the appropriate source (model or request)
- Updates the component's data and emits a refresh event
- Handles pagination or infinite scrolling state updates
- Completes any provided event (like InfiniteScrollCustomEvent)
Refreshes the list data from the configured source.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
event |
InfiniteScrollCustomEvent
|
RefresherCustomEvent
|
boolean
|
false | The event that triggered the refresh, or a boolean flag indicating if this is a forced refresh |
A promise that resolves when the refresh operation is complete
Promise.<void>
# refreshEventEmit(dataopt) → {void}
Creates and emits a refresh event containing the current list data. This notifies parent components that the list data has been refreshed.
Emits a refresh event with the current data.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
data |
Array.<KeyValue>
|
<optional> |
Optional data to include in the event |
- Overrides:
void
# trackItemFn(index, item) → {string|number}
Provides a tracking function for the *ngFor directive in the component template.
This function is used to identify and control the rendering of items in the list,
preventing duplicate or unnecessary rendering.
The trackItemFn function takes two parameters: index (the index of the item in the list)
and item (the actual item from the list). It returns the tracking key, which in this case
is the union of the uid of the item with the model name.
Function for tracking items in the list.
Parameters:
| Name | Type | Description |
|---|---|---|
index |
number
|
The index of the item in the list. |
item |
KeyValue
|
string
|
number
|
The actual item from the list. |
The tracking key for the item.
string
|
number