DatatableComponent¶

declare class DatatableComponent<TRow extends Row = any> implements DoCheck, AfterViewInit, OnDestroy

Constructor¶

constructor¶

constructor()

Constructs a new instance of the DatatableComponent class

Inputs¶

checkRowListChanges¶

checkRowListChanges = input<boolean>()

Controls whether the datatable runs an IterableDiffer against the rows input on every change detection cycle to detect additions, removals and reorderings that happen in-place on the same array reference.

Enabled by default. Set to false as a performance optimization when you always pass a new rows array reference on updates.

checkRowPropertyChanges¶

checkRowPropertyChanges = input<boolean>()

Controls whether each rendered row runs a KeyValueDiffer against its row object on every change detection cycle to detect in-place property mutations (e.g. row.name = 'new' without replacing the row reference).

Enabled by default. Set to false as a performance optimization when row objects are treated as immutable.

columnMode¶

columnMode = input<ColumnMode>()

Column width distribution mode. standard uses configured widths, flex uses the flex-grow algorithm, and force distributes space proportionally.

columns¶

columns = input<TableColumn<any>[] | undefined>()

Columns to be displayed.

count¶

count = input<number>()

The total count of all rows. Default value: 0

cssClasses¶

cssClasses = input<Partial<NgxDatatableCssClasses>>()

CSS class overrides for sort and pager icons.

enableClearingSortState¶

enableClearingSortState = input<boolean>()

A flag to controll behavior of sort states. By default sort on column toggles between ascending and descending without getting removed. Set true to clear sorting of column after performing ascending and descending sort on that column.

externalPaging¶

externalPaging = input<boolean>()

If the table should use external paging otherwise its assumed that all data is preloaded.

externalSorting¶

externalSorting = input<boolean>()

If the table should use external sorting or the built-in basic sorting.

footerHeight¶

footerHeight = input<number>()

The minimum footer height in pixels. Pass falsey for no footer

ghostLoadingIndicator¶

ghostLoadingIndicator = input<boolean>()

Show ghost loaders on each cell. Default value: false

groupedRows¶

groupedRows = input<Group<TRow>[] | undefined>()

This attribute allows the user to set a grouped array in the following format: [ {groupid=1} [ {id=1 name="test1"}, {id=2 name="test2"}, {id=3 name="test3"} ]}, {groupid=2>[ {id=4 name="test4"}, {id=5 name="test5"}, {id=6 name="test6"} ]} ]

groupExpansionDefault¶

groupExpansionDefault = input<boolean>()

A boolean you can use to set the detault behaviour of rows and groups whether they will start expanded or not. If ommited the default is NOT expanded.

groupRowsBy¶

groupRowsBy = input<keyof TRow | undefined>()

This attribute allows the user to set the name of the column to group the data with

headerHeight¶

headerHeight = input<number | "auto">()

The minimum header height in pixels. Pass a falsey for no header

limit¶

limit = input<number | undefined>()

The page size to be shown. Default value: undefined

loadingIndicator¶

loadingIndicator = input<boolean>()

Show the linear loading bar. Default value: false

messages¶

messages = input<Partial<NgxDatatableMessages>>()

Message overrides for localization

offset¶

offset = input<number>()

The current offset ( page - 1 ) shown. Default value: 0

reorderable¶

reorderable = input<boolean>()

Enable/Disable ability to re-order columns by dragging them.

rowDraggable¶

rowDraggable = input<boolean>()

A flag to enable drag behavior of native HTML5 drag and drop API on rows. If set to true, rowDragEvents will emit dragstart and dragend events.

rows¶

rows = input<(TRow | undefined)[] | null | undefined>()

Rows that are displayed in the table.

scrollbarH¶

scrollbarH = input<boolean>()

Enable horz scrollbars

scrollbarV¶

scrollbarV = input<boolean>()

Enable vertical scrollbars

scrollbarVDynamic¶

scrollbarVDynamic = input<boolean>()

Enable vertical scrollbars dynamically on demand. Property scrollbarV needs to be set true too. Width that is gained when no scrollbar is needed is added to the inner table width.

selectAllRowsOnPage¶

selectAllRowsOnPage = input<boolean>()

Property to which you can use for determining select all rows on current page or not.

selected¶

selected = input<TRow[]>()

List of row objects that should be represented as selected in the grid. Default value: []

selectionType¶

selectionType = input<SelectionType | undefined>()

Type of row selection. Options are:

• single - multi - checkbox - multiClick - cell

For no selection pass a falsey. Default value: undefined

sorts¶

sorts = input<SortPropDir[]>()

Array of sorted columns by property and type. Default value: []

sortType¶

sortType = input<SortType>()

Sorting mode. In single mode, sorting a new column replaces existing sorts; in multi mode, it adds an additional column sort.

summaryHeight¶

summaryHeight = input<number>()

A height of summary row

summaryPosition¶

summaryPosition = input<string>()

A property holds a summary row position: top/bottom

summaryRow¶

summaryRow = input<boolean>()

A flag for switching summary row on / off

swapColumns¶

swapColumns = input<boolean>()

Swap columns on re-order columns or move them.

targetMarkerTemplate¶

targetMarkerTemplate = input<TemplateRef<unknown> | undefined>()

Template for the target marker of drag target columns.

trackByProp¶

trackByProp = input<keyof TRow | undefined>()

Property to which you can use for custom tracking of rows. Example: 'name'

treeFromRelation¶

treeFromRelation = input<string | undefined>()

Tree from relation

treeToRelation¶

treeToRelation = input<string | undefined>()

Tree to relation

virtualization¶

virtualization = input<boolean>()

A flag for row virtualization on / off

Outputs¶

activate¶

activate = output<ActivateEvent<TRow>>()

A cell or row was focused via keyboard or mouse click.

page¶

page = output<PageEvent>()

The table was paged either triggered by the pager or the body scroll.

reorder¶

reorder = output<ReorderEvent>()

Columns were re-ordered.

resize¶

resize = output<ColumnResizeEvent>()

Column was resized.

rowDragEvents¶

rowDragEvents = output<DragEventData>()

Emits HTML5 native drag events. Only emits dragenter, dragover, drop events by default. Set rowDraggable to true for dragstart and dragend.

scroll¶

scroll = output<ScrollEvent>()

Body was scrolled typically in a scrollbarV:true scenario.

tableContextmenu¶

tableContextmenu = output<ContextMenuEvent<TRow>>()

The context menu was invoked on the table. type indicates whether the header or the body was clicked. content contains either the column or the row that was clicked.

treeAction¶

treeAction = output<{
        row: TRow;
        rowIndex: number;
    }>()

A row was expanded ot collapsed for tree

Properties¶

allRowsSelected¶

readonly allRowsSelected: Signal<boolean>

Returns if all rows are selected.

bodyHeight¶

readonly bodyHeight: Signal<number>

columnTemplates¶

readonly columnTemplates: Signal<readonly DataTableColumnDirective<TRow>[]>

Column templates gathered from ContentChildren if described in your markup.

correctedOffset¶

readonly correctedOffset: Signal<number>

Computed signal that returns the corrected offset value. It ensures the offset is within valid bounds based on rowCount and pageSize.

disableRowCheck¶

readonly disableRowCheck: InputSignal<((row: TRow) => boolean) | undefined>

A function you can use to check whether you want to disable a row. Example:

(row) => { return row.name !== 'Ethel Price'; }

displayCheck¶

readonly displayCheck: InputSignal<((row: TRow, column: TableColumn, value?: any) => boolean) | undefined>

A function you can use to check whether you want to show the checkbox for a particular row based on a criteria. Example:

(row, column, value) => { return row.name !== 'Ethel Price'; }

element¶

element: HTMLElement

groupHeader¶

groupHeader?: DatatableGroupHeaderDirective

Group Header templates gathered from the ContentChild

pageSize¶

readonly pageSize: Signal<number>

rowClass¶

readonly rowClass: InputSignal<((row: TRow) => string | Record<string, boolean>) | undefined>

A function which is called with the row and should return either: - a string: "class-1 class-2 - a Record: { 'class-1': true, 'class-2': false }

rowCount¶

readonly rowCount: Signal<number>

rowDetail¶

rowDetail?: DatatableRowDetailDirective

Row Detail templates gathered from the ContentChild

rowDiffer¶

rowDiffer: IterableDiffer<TRow | undefined>

rowHeight¶

readonly rowHeight: InputSignal<number | "auto" | ((row: TRow) => number)>

Height of each row. When virtual scrolling is disabled, use 'auto' for fluid heights. With virtual scrolling enabled, provide a number or a function that calculates each row's height.

rowIdentity¶

readonly rowIdentity: InputSignal<(x: RowOrGroup<TRow>) => unknown>

This will be used when displaying or selecting rows. when tracking/comparing them, we'll use the value of this fn,

(fn(x) === fn(y) instead of x === y)

selectCheck¶

readonly selectCheck: InputSignal<((value: TRow, index: number, array: TRow[]) => boolean) | undefined>

A boolean/function you can use to check whether you want to select a particular row based on a criteria. Example:

(selection) => { return selection !== 'Ethel Price'; }

summaryRowDirective¶

readonly summaryRowDirective: Signal<DatatableSummaryRowDirective | undefined>

Custom summary row template gathered from the ContentChild

totalColumnGroupWidths¶

readonly totalColumnGroupWidths: Signal<number>

verticalScrollVisible¶

protected verticalScrollVisible: boolean

Functions¶

calcPageSize¶

calcPageSize(): number

Recalculates the sizes of the page

calcRowCount¶

calcRowCount(): number

Calculates the row count.

groupArrayBy¶

groupArrayBy(originalArray: (TRow | undefined)[], groupBy: keyof TRow): {
        key: TRow[keyof TRow];
        value: TRow[];
    }[]

Creates a map with the data grouped by the user choice of grouping index

ngAfterViewInit¶

ngAfterViewInit(): void

Lifecycle hook that is called after a component's view has been fully initialized.

ngDoCheck¶

ngDoCheck(): void

ngOnDestroy¶

ngOnDestroy(): void

onBodyPage¶

onBodyPage(offset: number): void

Body triggered a page event.

onBodyScroll¶

onBodyScroll(event: ScrollEvent): void

The body triggered a scroll event.

onColumnContextmenu¶

onColumnContextmenu(input: {
        event: MouseEvent;
        column: TableColumnInternal;
    }): void

The header triggered a contextmenu event.

onColumnReorder¶

onColumnReorder(event: ReorderEventInternal): void

The header triggered a column re-order event.

onColumnResize¶

onColumnResize(input: ColumnResizeEventInternal): void

The header triggered a column resize event.

onColumnResizing¶

onColumnResizing(input: ColumnResizeEventInternal): void

onColumnSort¶

onColumnSort(event: SortEvent): void

The header triggered a column sort event.

onFooterPage¶

onFooterPage(event: PagerPageEvent): void

The footer triggered a page event.

onHeaderSelect¶

onHeaderSelect(): void

Toggle all row selection

onRowContextmenu¶

onRowContextmenu(input: {
        event: MouseEvent;
        row: RowOrGroup<TRow>;
    }): void

The body triggered a contextmenu event.

onTreeAction¶

onTreeAction(event: {
        row: TRow;
    }): void

A row was expanded or collapsed for tree

onWindowResize¶

onWindowResize(): void

recalculate¶

recalculate(): void

recalculateColumns¶

recalculateColumns(forceIdx?: number, allowBleed?: boolean): TableColumnInternal[]

Recalulcates the column widths based on column width distribution mode and scrollbar offsets.

recalculateDims¶

recalculateDims(): void

scrollToRow¶

scrollToRow(row: TRow, options?: ScrollToRowOptions): void