@anguless/angulux/treetable

treetable

16 declarations1 demos

import

import { TreeTableModule } from '@anguless/angulux/treetable';

Basic

TreeTable is Table over a TreeNode hierarchy, with a toggler for each branch.

Name	Size	Type
Documents	75kb	Folder
Pictures	150kb	Folder

<agl-treeTable [value]="nodes" [tableStyle]="{ 'min-width': '32rem' }">    <ng-template #header>        <tr>            <th>Name</th>            <th>Size</th>            <th>Type</th>        </tr>    </ng-template>    <ng-template #body let-rowNode let-rowData="rowData">        <tr [ttRow]="rowNode">            <td>                <agl-treeTableToggler [rowNode]="rowNode" />                {{ rowData.name }}            </td>            <td>{{ rowData.size }}</td>            <td>{{ rowData.type }}</td>        </tr>    </ng-template></agl-treeTable>

API

Generated from the committed corpus, which check:corpus holds to the built library.

TreeTable

componentagl-treeTable, agl-treetable, agl-tree-table

TreeTable is used to display hierarchical data in tabular format.

Input	Type	Default	Description
columns	any[] \| undefined	not documented	An array of objects to represent dynamic columns.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
tableStyle	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the table.
tableStyleClass	string \| undefined	not documented	Style class of the table.
autoLayout	boolean \| undefined	not documented	Whether the cell widths scale according to their content or not.
lazy	boolean	not documented	Defines if data is loaded and interacted with in lazy manner.
lazyLoadOnInit	boolean	not documented	Whether to call lazy loading on initialization.
paginator	boolean \| undefined	not documented	When specified as true, enables the pagination.
rows	number \| undefined	not documented	Number of rows to display per page.
first	number	not documented	Index of the first row to be displayed.
pageLinks	number	not documented	Number of page links to display in paginator.
rowsPerPageOptions	any[] \| undefined	not documented	Array of integer/object values to display inside rows per page dropdown of paginator
alwaysShowPaginator	boolean	not documented	Whether to show it even there is only one page.
paginatorPosition	'top' \| 'bottom' \| 'both'	not documented	Position of the paginator.
paginatorStyleClass	string \| undefined	not documented	Custom style class for paginator
paginatorDropdownAppendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| string \| null \| undefined \| any	not documented	Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
currentPageReportTemplate	string	not documented	Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
showCurrentPageReport	boolean \| undefined	not documented	Whether to display current page report.
showJumpToPageDropdown	boolean \| undefined	not documented	Whether to display a dropdown to navigate to any page.
showFirstLastIcon	boolean	not documented	When enabled, icons are displayed on paginator to go first and last page.
showPageLinks	boolean	not documented	Whether to show page links.
defaultSortOrder	number	not documented	Sort order to use when an unsorted column gets sorted by user interaction.
sortMode	'single' \| 'multiple'	not documented	Defines whether sorting works on single column or on multiple columns.
resetPageOnSort	boolean	not documented	When true, resets paginator to first page after sorting.
customSort	boolean \| undefined	not documented	Whether to use the default sorting or a custom one using sortFunction.
selectionMode	string \| undefined	not documented	Specifies the selection mode, valid values are "single" and "multiple".
contextMenuSelection	any	not documented	Selected row with a context menu.
contextMenuSelectionMode	string	not documented	Mode of the contet menu selection.
dataKey	string \| undefined	not documented	A property to uniquely identify a record in data.
metaKeySelection	boolean \| undefined	not documented	Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
compareSelectionBy	string	not documented	Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
rowHover	boolean \| undefined	not documented	Adds hover effect to rows without the need for selectionMode.
loading	boolean \| undefined	not documented	Displays a loader to indicate data load is in progress.
loadingIcon	string \| undefined	not documented	The icon to show while indicating data load is in progress.
showLoader	boolean	not documented	Whether to show the loading mask when loading property is true.
scrollable	boolean \| undefined	not documented	When specified, enables horizontal and/or vertical scrolling.
scrollHeight	string \| undefined	not documented	Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
virtualScroll	boolean \| undefined	not documented	Whether the data should be loaded on demand during scroll.
virtualScrollItemSize	number \| undefined	not documented	Height of a row to use in calculations of virtual scrolling.
virtualScrollOptions	ScrollerOptions \| undefined	not documented	Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
virtualScrollDelay	number	not documented	The delay (in milliseconds) before triggering the virtual scroll. This determines the time gap between the user's scroll action and the actual rendering of the next set of items in the virtual scroll.
frozenWidth	string \| undefined	not documented	Width of the frozen columns container.
frozenColumns	{ [klass: string]: any } \| null \| undefined	not documented	An array of objects to represent dynamic columns that are frozen.
resizableColumns	boolean \| undefined	not documented	When enabled, columns can be resized using drag and drop.
columnResizeMode	string	not documented	Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
reorderableColumns	boolean \| undefined	not documented	When enabled, columns can be reordered using drag and drop.
contextMenu	any	not documented	Local ng-template varilable of a ContextMenu.
rowTrackBy	Function	not documented	Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
filters	{ [s: string]: FilterMetadata \| undefined }	not documented	An array of FilterMetadata objects to provide external filters.
globalFilterFields	string[] \| undefined	not documented	An array of fields as string to use in global filtering.
filterDelay	number	not documented	Delay in milliseconds before filtering the data.
filterMode	string	not documented	Mode for filtering valid values are "lenient" and "strict". Default is lenient.
filterLocale	string \| undefined	not documented	Locale to use in filtering. The default locale is the host environment's current locale.
paginatorLocale	string \| undefined	not documented	Locale to be used in paginator formatting.
totalRecords	number	not documented	Number of total records, defaults to length of value when not defined.
sortField	string \| undefined \| null	not documented	Name of the field to sort data by default.
sortOrder	number	1	Order to sort when default sorting is enabled.
multiSortMeta	SortMeta[] \| undefined \| null	null	An array of SortMeta objects to sort the data by default in multiple sort mode.
selection	any	null	Selected row in single mode or an array of values in multiple mode.
value	TreeNode<any>[] \| undefined	null	An array of objects to display.
virtualRowHeight deprecated — use virtualScrollItemSize property instead.	number	28	Indicates the height of rows to be scrolled.
selectionKeys	any	not documented	A map of keys to control the selection state.
showGridlines	boolean	false	Whether to show grid lines between cells.

Output	Type	Description
selectionChange	EventEmitter<TreeTableNode<any> \| TreeTableNode<any>[] \| null>	Callback to invoke on selected node change.
contextMenuSelectionChange	EventEmitter<TreeTableNode>	Callback to invoke on context menu selection change.
onFilter	EventEmitter<TreeTableFilterEvent>	Callback to invoke when data is filtered.
onNodeExpand	EventEmitter<TreeTableNodeExpandEvent>	Callback to invoke when a node is expanded.
onNodeCollapse	EventEmitter<TreeTableNodeCollapseEvent>	Callback to invoke when a node is collapsed.
onPage	EventEmitter<TreeTablePaginatorState>	Callback to invoke when pagination occurs.
onSort	EventEmitter<any>	Callback to invoke when a column gets sorted.
onLazyLoad	EventEmitter<TreeTableLazyLoadEvent>	Callback to invoke when paging, sorting or filtering happens in lazy mode.
sortFunction	EventEmitter<TreeTableSortEvent>	An event emitter to invoke on custom sorting, refer to sorting section for details.
onColResize	EventEmitter<TreeTableColResizeEvent>	Callback to invoke when a column is resized.
onColReorder	EventEmitter<TreeTableColumnReorderEvent>	Callback to invoke when a column is reordered.
onNodeSelect	EventEmitter<TreeTableNode>	Callback to invoke when a node is selected.
onNodeUnselect	EventEmitter<TreeTableNodeUnSelectEvent>	Callback to invoke when a node is unselected.
onContextMenuSelect	EventEmitter<TreeTableContextMenuSelectEvent>	Callback to invoke when a node is selected with right click.
onHeaderCheckboxToggle	EventEmitter<TreeTableHeaderCheckboxToggleEvent>	Callback to invoke when state of header checkbox changes.
onEditInit	EventEmitter<TreeTableEditEvent>	Callback to invoke when a cell switches to edit mode.
onEditComplete	EventEmitter<TreeTableEditEvent>	Callback to invoke when cell edit is completed.
onEditCancel	EventEmitter<TreeTableEditEvent>	Callback to invoke when cell edit is cancelled with escape key.
selectionKeysChange	EventEmitter<any>	Callback to invoke when selectionKeys are changed.

Template slot	Description
<ng-template #colgroup>
<ng-template #caption>
<ng-template #header>
<ng-template #body>
<ng-template #footer>
<ng-template #summary>
<ng-template #emptymessage>
<ng-template #paginatorleft>
<ng-template #paginatorright>
<ng-template #paginatordropdownitem>
<ng-template #frozenheader>
<ng-template #frozenbody>
<ng-template #frozenfooter>
<ng-template #frozencolgroup>
<ng-template #loadingicon>
<ng-template #reorderindicatorupicon>
<ng-template #reorderindicatordownicon>
<ng-template #sorticon>
<ng-template #checkboxicon>
<ng-template #headercheckboxicon>
<ng-template #togglericon>
<ng-template #paginatorfirstpagelinkicon>
<ng-template #paginatorlastpagelinkicon>
<ng-template #paginatorpreviouspagelinkicon>
<ng-template #paginatornextpagelinkicon>
<ng-template #loader>

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTBody

component[aglTreeTableBody]

Input	Type	Default
aglTreeTableBody property columns	any[] \| undefined	not documented
aglTreeTableBodyTemplate property template	Nullable<TemplateRef<any>>	not documented
frozen	boolean \| undefined	not documented
serializedNodes	any	not documented
scrollerOptions	any	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTScrollableView

component[ttScrollableView]

Input	Type	Default
ttScrollableView property columns	any[] \| undefined	not documented
frozen	boolean \| undefined	not documented
scrollHeight	string \| undefined \| null	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTSortableColumn

directive[ttSortableColumn]

Input	Type	Default	Description
ttSortableColumn property field	string \| undefined	not documented
ttSortableColumnDisabled	boolean \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTSortIcon

componentagl-treeTableSortIcon, agl-treetable-sort-icon, agl-tree-table-sort-icon

Input	Type	Default
field	string \| undefined	not documented
ariaLabelDesc	string \| undefined	not documented
ariaLabelAsc	string \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTResizableColumn

directive[ttResizableColumn]

Input	Type	Default	Description
ttResizableColumnDisabled	boolean \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTReorderableColumn

directive[ttReorderableColumn]

Input	Type	Default	Description
ttReorderableColumnDisabled	boolean \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTSelectableRow

directive[ttSelectableRow]

Input	Type	Default	Description
ttSelectableRow property rowNode	any	not documented
ttSelectableRowDisabled	boolean \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTSelectableRowDblClick

directive[ttSelectableRowDblClick]

Input	Type	Default	Description
ttSelectableRowDblClick property rowNode	any	not documented
ttSelectableRowDisabled	boolean \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTContextMenuRow

directive[ttContextMenuRow]

Input	Type	Default	Description
ttContextMenuRow property rowNode	any \| undefined	not documented
ttContextMenuRowDisabled	boolean \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTCheckbox

componentagl-treeTableCheckbox, agl-treetable-checkbox, agl-tree-table-checkbox

Input	Type	Default	Description
disabled	boolean \| undefined	not documented
value property rowNode	any	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTHeaderCheckbox

componentagl-treeTableHeaderCheckbox

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTEditableColumn

directive[ttEditableColumn]

Input	Type	Default
ttEditableColumn property data	any	not documented
ttEditableColumnField property field	any	not documented
ttEditableColumnDisabled	boolean \| undefined	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TreeTableCellEditor

componentagl-treeTableCellEditor, agl-treetablecelleditor, agl-treetable-cell-editor

Template slot	Description
<ng-template #input>	Editing state of the cell.
<ng-template #output>	Display state of the cell.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TTRow

directive[ttRow]

Input	Type	Default	Description
ttRow property rowNode	any	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

TreeTableToggler

componentagl-treeTableToggler, agl-treetabletoggler, agl-treetable-toggler

Input	Type	Default	Description
rowNode	any	not documented

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.