@anguless/angulux/table

table

25 declarations4 demos

import

import { TableModule } from '@anguless/angulux/table';

Basic

Table renders rows through the body slot, so the markup of a row stays yours.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<agl-table [value]="products" [tableStyle]="{ 'min-width': '32rem' }">    <ng-template #header>        <tr>            <th>Code</th>            <th>Name</th>            <th>Category</th>            <th>Quantity</th>        </tr>    </ng-template>    <ng-template #body let-product>        <tr>            <td>{{ product.code }}</td>            <td>{{ product.name }}</td>            <td>{{ product.category }}</td>            <td>{{ product.quantity }}</td>        </tr>    </ng-template></agl-table>

Paginator

Setting paginator and rows is enough; the control appears and drives the page.

Name	Category	Quantity
Bamboo Watch	Accessories	24
Black Watch	Accessories	61

<agl-table [value]="products" [paginator]="true" [rows]="2" [rowsPerPageOptions]="[2, 3, 5]" [tableStyle]="{ 'min-width': '32rem' }">    <ng-template #header>        <tr>            <th>Name</th>            <th>Category</th>            <th>Quantity</th>        </tr>    </ng-template>    <ng-template #body let-product>        <tr>            <td>{{ product.name }}</td>            <td>{{ product.category }}</td>            <td>{{ product.quantity }}</td>        </tr>    </ng-template></agl-table>

Sort

aglSortableColumn makes a header sortable, and agl-sortIcon shows which way.

Name	Category	Quantity
Bamboo Watch	Accessories	24
Black Watch	Accessories	61
Blue Band	Fitness	2
Blue T-Shirt	Clothing	25
Bracelet	Accessories	73

<agl-table [value]="products" [tableStyle]="{ 'min-width': '32rem' }">    <ng-template #header>        <tr>            <th aglSortableColumn="name">Name <agl-sortIcon field="name" /></th>            <th aglSortableColumn="category">Category <agl-sortIcon field="category" /></th>            <th aglSortableColumn="quantity">Quantity <agl-sortIcon field="quantity" /></th>        </tr>    </ng-template>    <ng-template #body let-product>        <tr>            <td>{{ product.name }}</td>            <td>{{ product.category }}</td>            <td>{{ product.quantity }}</td>        </tr>    </ng-template></agl-table>

Selection

Selection is two-way bound, and aglSelectableRow marks what can be selected.

Name	Category
Bamboo Watch	Accessories
Black Watch	Accessories
Blue Band	Fitness
Blue T-Shirt	Clothing
Bracelet	Accessories

Selected: none

<div style="width: 100%">    <agl-table [value]="products" [(selection)]="selected" dataKey="code" selectionMode="single" [tableStyle]="{ 'min-width': '32rem' }">        <ng-template #header>            <tr>                <th>Name</th>                <th>Category</th>            </tr>        </ng-template>        <ng-template #body let-product>            <tr [aglSelectableRow]="product">                <td>{{ product.name }}</td>                <td>{{ product.category }}</td>            </tr>        </ng-template>    </agl-table>    <p>Selected: {{ selected?.name ?? 'none' }}</p></div>

API

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

Table

componentagl-table

Table displays data in tabular format.

Input	Type	Default	Description
frozenColumns	any[] \| undefined	not documented	An array of objects to represent dynamic columns that are frozen.
frozenValue	any[] \| undefined	not documented	An array of objects to display as frozen.
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.
paginator	boolean \| undefined	not documented	When specified as true, enables the pagination.
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, options are "top", "bottom" or "both".
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).
paginatorDropdownScrollHeight	string	not documented	Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
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.
showJumpToPageInput	boolean \| undefined	not documented	Whether to display a input 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. Available only when sortMode is set to single.
selectionMode	'single' \| 'multiple' \| undefined \| null	not documented	Specifies the selection mode, valid values are "single" and "multiple".
selectionPageOnly	boolean \| undefined	not documented	When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page.
contextMenuSelection	any	not documented	Selected row with a context menu.
contextMenuSelectionMode	string	not documented	Defines the behavior of context menu selection, in "separate" mode context menu updates contextMenuSelection property whereas in joint mode selection property is used instead so that when row selection is enabled, both row selection and context menu selection use the same property.
dataKey	string \| undefined	not documented	A property to uniquely identify a record in data.
metaKeySelection	boolean \| undefined	not documented	Defines whether metaKey should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
rowSelectable	(row: { data: any; index: number }) => boolean \| undefined	not documented	Defines if the row is selectable.
rowTrackBy	Function	not documented	Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
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.
compareSelectionBy	'equals' \| 'deepEquals'	not documented	Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
csvSeparator	string	not documented	Character to use as the csv separator.
exportFilename	string	not documented	Name of the exported file.
exportEscapeFormulas	boolean	not documented	Whether to neutralise spreadsheet formulas in the exported CSV. A cell whose first character is `=`, `+`, `-`, `@`, a tab or a carriage return is a FORMULA to Excel, LibreOffice and Google Sheets — quoting does not stop it, because the quotes are removed by CSV parsing before the formula is detected. Exporting a table of user-submitted values therefore hands whoever wrote those values a way to run a formula in the reader's spreadsheet, which can read the surrounding cells and send them out (CWE-1236). Nothing appears wrong at export time; the damage happens in another application entirely. When true, such a cell is prefixed with an apostrophe, which every major spreadsheet reads as "this is text" and does not display. Set it to false only if you are exporting formulas on purpose AND you control every value in the table.
filters	{ [s: string]: FilterMetadata \| FilterMetadata[] }	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.
filterLocale	string \| undefined	not documented	Locale to use in filtering. The default locale is the host environment's current locale.
expandedRowKeys	{ [s: string]: boolean }	not documented	Map instance to keep the expanded rows where key of the map is the data key of the row.
editingRowKeys	{ [s: string]: boolean }	not documented	Map instance to keep the rows being edited where key of the map is the data key of the row.
rowExpandMode	'multiple' \| 'single'	not documented	Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single".
scrollable	boolean \| undefined	not documented	Enables scrollable tables.
rowGroupMode	'subheader' \| 'rowspan' \| undefined	not documented	Type of the row grouping, valid values are "subheader" and "rowspan".
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	Threshold in milliseconds to delay lazy loading during scrolling.
frozenWidth	string \| undefined	not documented	Width of the frozen columns container.
contextMenu	any	not documented	Local ng-template varilable of a ContextMenu.
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.
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.
rowHover	boolean \| undefined	not documented	Adds hover effect to rows without the need for selectionMode. Note that tr elements that can be hovered need to have "p-selectable-row" class for rowHover to work.
customSort	boolean \| undefined	not documented	Whether to use the default sorting or a custom one using sortFunction.
showInitialSortBadge	boolean	not documented	Whether to use the initial sort badge or not.
exportFunction	Function \| undefined	not documented	Export function.
exportHeader	string \| undefined	not documented	Custom export header of the column to be exported as CSV.
stateKey	string \| undefined	not documented	Unique identifier of a stateful table to use in state storage.
stateStorage	'session' \| 'local'	not documented	Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
editMode	'cell' \| 'row'	not documented	Defines the editing mode, valid values are "cell" and "row".
groupRowsBy	any	not documented	Field name to use in row grouping.
size	'small' \| 'large' \| undefined	not documented	Defines the size of the table.
showGridlines	boolean \| undefined	not documented	Whether to show grid lines between cells.
stripedRows	boolean \| undefined	not documented	Whether to display rows with alternating colors.
groupRowsByOrder	number	not documented	Order to sort when default row grouping is enabled.
responsiveLayout deprecated — since v20.0.0, always defaults to scroll, stack mode needs custom implementation	string	not documented	Defines the responsive mode, valid options are "stack" and "scroll".
breakpoint	string	not documented	The breakpoint to define the maximum width boundary when using stack responsive layout.
paginatorLocale	string \| undefined	not documented	Locale to be used in paginator formatting.
value	RowData[]	not documented	An array of objects to display.
columns	any[] \| undefined	not documented	An array of objects to represent dynamic columns.
first	number \| null \| undefined	not documented	Index of the first row to be displayed.
rows	number \| undefined	not documented	Number of rows to display per page.
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	not documented	Order to sort when default sorting is enabled.
multiSortMeta	SortMeta[] \| undefined \| null	not documented	An array of SortMeta objects to sort the data by default in multiple sort mode.
selection	any	not documented	Selected row in single mode or an array of values in multiple mode.
selectAll	boolean \| null	not documented	Whether all data is selected.

Output	Type	Description
contextMenuSelectionChange	EventEmitter<any>	Callback to invoke on context menu selection change.
selectAllChange	EventEmitter<TableSelectAllChangeEvent>	Emits when the all of the items selected or unselected.
selectionChange	EventEmitter<any \| null>	Callback to invoke on selection changed.
onRowSelect	EventEmitter<TableRowSelectEvent<RowData>>	Callback to invoke when a row is selected.
onRowUnselect	EventEmitter<TableRowUnSelectEvent<RowData>>	Callback to invoke when a row is unselected.
onPage	EventEmitter<TablePageEvent>	Callback to invoke when pagination occurs.
onSort	EventEmitter<{ multisortmeta: SortMeta[] } \| any>	Callback to invoke when a column gets sorted.
onFilter	EventEmitter<TableFilterEvent>	Callback to invoke when data is filtered.
onLazyLoad	EventEmitter<TableLazyLoadEvent>	Callback to invoke when paging, sorting or filtering happens in lazy mode.
onRowExpand	EventEmitter<TableRowExpandEvent<RowData>>	Callback to invoke when a row is expanded.
onRowCollapse	EventEmitter<TableRowCollapseEvent>	Callback to invoke when a row is collapsed.
onContextMenuSelect	EventEmitter<TableContextMenuSelectEvent<RowData>>	Callback to invoke when a row is selected with right click.
onColResize	EventEmitter<TableColResizeEvent>	Callback to invoke when a column is resized.
onColReorder	EventEmitter<TableColumnReorderEvent>	Callback to invoke when a column is reordered.
onRowReorder	EventEmitter<TableRowReorderEvent>	Callback to invoke when a row is reordered.
onEditInit	EventEmitter<TableEditInitEvent>	Callback to invoke when a cell switches to edit mode.
onEditComplete	EventEmitter<TableEditCompleteEvent>	Callback to invoke when cell edit is completed.
onEditCancel	EventEmitter<TableEditCancelEvent>	Callback to invoke when cell edit is cancelled with escape key.
onHeaderCheckboxToggle	EventEmitter<TableHeaderCheckboxToggleEvent>	Callback to invoke when state of header checkbox changes.
sortFunction	EventEmitter<any>	A function to implement custom sorting, refer to sorting section for details.
firstChange	EventEmitter<number>	Callback to invoke on pagination.
rowsChange	EventEmitter<number>	Callback to invoke on rows change.
onStateSave	EventEmitter<TableState>	Callback to invoke table state is saved.
onStateRestore	EventEmitter<TableState>	Callback to invoke table state is restored.

Template slot	Description
<ng-template #header>
<ng-template #headergrouped>
<ng-template #body>
<ng-template #loadingbody>
<ng-template #caption>
<ng-template #footer>
<ng-template #footergrouped>
<ng-template #summary>
<ng-template #colgroup>
<ng-template #expandedrow>
<ng-template #groupheader>
<ng-template #groupfooter>
<ng-template #frozenexpandedrow>
<ng-template #frozenbody>
<ng-template #emptymessage>
<ng-template #paginatorleft>
<ng-template #paginatorright>
<ng-template #paginatordropdownitem>
<ng-template #loadingicon>
<ng-template #reorderindicatorupicon>
<ng-template #reorderindicatordownicon>
<ng-template #sorticon>
<ng-template #checkboxicon>
<ng-template #headercheckboxicon>
<ng-template #paginatordropdownicon>
<ng-template #paginatorfirstpagelinkicon>
<ng-template #paginatorlastpagelinkicon>
<ng-template #paginatorpreviouspagelinkicon>
<ng-template #paginatornextpagelinkicon>

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.

TableBody

component[aglTableBody]

Input	Type	Default
aglTableBody property columns	any[] \| undefined	not documented
aglTableBodyTemplate property template	Nullable<TemplateRef<any>>	not documented
value	any[] \| undefined	not documented
frozen	boolean \| undefined	not documented
frozenRows	boolean \| undefined	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.

RowGroupHeader

directive[aglRowGroupHeader]

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.

FrozenColumn

directive[aglFrozenColumn]

Input	Type	Default	Description
frozen	boolean	not documented
alignFrozen	string	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.

SortableColumn

directive[aglSortableColumn]

Input	Type	Default	Description
aglSortableColumn property field	string \| undefined	not documented
aglSortableColumnDisabled	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.

SortIcon

componentagl-sortIcon

Input	Type	Default	Description
field	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.

SelectableRow

directive[aglSelectableRow]

Input	Type	Default
aglSelectableRow property data	any	not documented
aglSelectableRowIndex property index	number \| undefined	not documented
aglSelectableRowDisabled	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.

SelectableRowDblClick

directive[aglSelectableRowDblClick]

Input	Type	Default
aglSelectableRowDblClick property data	any	not documented
aglSelectableRowIndex property index	number \| undefined	not documented
aglSelectableRowDisabled	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.

ContextMenuRow

directive[aglContextMenuRow]

Input	Type	Default
aglContextMenuRow property data	any	not documented
aglContextMenuRowIndex property index	number \| undefined	not documented
aglContextMenuRowDisabled	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.

RowToggler

directive[aglRowToggler]

Input	Type	Default	Description
aglRowToggler property data	any	not documented
aglRowTogglerDisabled	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.

ResizableColumn

directive[aglResizableColumn]

Input	Type	Default	Description
aglResizableColumnDisabled	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.

ReorderableColumn

directive[aglReorderableColumn]

Input	Type	Default	Description
aglReorderableColumnDisabled	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.

EditableColumn

directive[aglEditableColumn]

Input	Type	Default
aglEditableColumn property data	any	not documented
aglEditableColumnField property field	any	not documented
aglEditableColumnRowIndex property rowIndex	number \| undefined	not documented
aglEditableColumnDisabled	boolean \| undefined	not documented
aglFocusCellSelector	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.

EditableRow

directive[aglEditableRow]

Input	Type	Default	Description
aglEditableRow property data	any	not documented
aglEditableRowDisabled	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.

InitEditableRow

directive[aglInitEditableRow]

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.

SaveEditableRow

directive[aglSaveEditableRow]

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.

CancelEditableRow

directive[aglCancelEditableRow]

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.

CellEditor

componentagl-cellEditor

Template slot	Description
<ng-template #input>
<ng-template #output>

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.

TableRadioButton

componentagl-tableRadioButton

Input	Type	Default
value	any	not documented
disabled	boolean \| undefined	not documented
index	number \| undefined	not documented
inputId	string \| undefined	not documented
name	string \| undefined	not documented
ariaLabel	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.

TableCheckbox

componentagl-tableCheckbox

Input	Type	Default
value	any	not documented
disabled	boolean \| undefined	not documented
required	boolean \| undefined	not documented
index	number \| undefined	not documented
inputId	string \| undefined	not documented
name	string \| undefined	not documented
ariaLabel	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.

TableHeaderCheckbox

componentagl-tableHeaderCheckbox

Input	Type	Default
disabled	boolean \| undefined	not documented
inputId	string \| undefined	not documented
name	string \| undefined	not documented
ariaLabel	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.

ReorderableRowHandle

directive[aglReorderableRowHandle]

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.

ReorderableRow

directive[aglReorderableRow]

Input	Type	Default	Description
aglReorderableRow property index	number \| undefined	not documented
aglReorderableRowDisabled	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.

ColumnFilter

componentagl-columnFilter, agl-column-filter, agl-columnfilter

Column Filter Component.

Input	Type	Default	Description
field	string \| undefined	not documented	Property represented by the column.
type	string	not documented	Type of the input.
display	string	not documented	Filter display.
showMenu	boolean	not documented	Decides whether to display filter menu popup.
matchMode	string \| undefined	not documented	Filter match mode.
operator	string	'AND'	Filter operator.
showOperator	boolean	not documented	Decides whether to display filter operator.
showClearButton	boolean	true	Decides whether to display clear filter button when display is menu.
showApplyButton	boolean	not documented	Decides whether to display apply filter button when display is menu.
showMatchModes	boolean	not documented	Decides whether to display filter match modes when display is menu.
showAddButton	boolean	not documented	Decides whether to display add filter button when display is menu.
hideOnClear	boolean	not documented	Decides whether to close popup on clear button click.
placeholder	string \| undefined	not documented	Filter placeholder.
matchModeOptions	SelectItem[] \| undefined	not documented	Filter match mode options.
maxConstraints	number	not documented	Defines maximum amount of constraints.
minFractionDigits	number \| undefined	not documented	Defines minimum fraction of digits.
maxFractionDigits	number \| undefined	not documented	Defines maximum fraction of digits.
prefix	string \| undefined	not documented	Defines prefix of the filter.
suffix	string \| undefined	not documented	Defines suffix of the filter.
locale	string \| undefined	not documented	Defines filter locale.
localeMatcher	string \| undefined	not documented	Defines filter locale matcher.
currency	string \| undefined	not documented	Enables currency input.
currencyDisplay	string \| undefined	not documented	Defines the display of the currency input.
filterOn	string \| undefined	enter	Default trigger to run filtering on built-in text and numeric filters, valid values are 'enter' and 'input'.
useGrouping	boolean	not documented	Defines if filter grouping will be enabled.
showButtons	boolean	not documented	Defines the visibility of buttons.
ariaLabel	string \| undefined	not documented	Defines the aria-label of the form element.
filterButtonProps	TableFilterButtonPropsOptions	{ filter: { severity: 'secondary', text: true, rounded: true }, inline: { clear: { severity: 'secondary', text: true, rounded: true } }, popover: { addRule: { severity: 'info', text: true, size: 'small' }, removeRule: { severity: 'danger', text: true, size: 'small' }, apply: { size: 'small' }, clear: { outlined: true, size: 'small' } } }	Used to pass all filter button property object
motionOptions	MotionOptions \| undefined	not documented

Output	Type	Description
onShow	EventEmitter<{ originalEvent: AnimationEvent }>	Callback to invoke on overlay is shown.
onHide	EventEmitter<{ originalEvent: AnimationEvent }>	Callback to invoke on overlay is hidden.

Template slot	Description
<ng-template #header>	Custom header template.
<ng-template #filter>	Custom filter template.
<ng-template #footer>	Custom footer template.
<ng-template #filtericon>	Custom filter icon template.
<ng-template #removeruleicon>	Custom remove rule button icon template.
<ng-template #addruleicon>	Custom add rule button icon template.

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.

ColumnFilterFormElement

componentagl-columnFilterFormElement

Input	Type	Default
field	string \| undefined	not documented
type	string \| undefined	not documented
filterConstraint	FilterMetadata \| undefined	not documented
filterTemplate	Nullable<TemplateRef<any>>	not documented
placeholder	string \| undefined	not documented
minFractionDigits	number \| undefined	not documented
maxFractionDigits	number \| undefined	not documented
prefix	string \| undefined	not documented
suffix	string \| undefined	not documented
locale	string \| undefined	not documented
localeMatcher	string \| undefined	not documented
currency	string \| undefined	not documented
currencyDisplay	string \| undefined	not documented
useGrouping	boolean	not documented
ariaLabel	string \| undefined	not documented
filterOn	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.