Skip to content

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.

configuration

protected readonly configuration: Signal<{
        messages: {
            emptyMessage: string;
            totalMessage: string;
            selectedMessage: string;
            ariaFirstPageMessage: string;
            ariaPageNMessage: string;
            ariaPreviousPageMessage: string;
            ariaNextPageMessage: string;
            ariaLastPageMessage: string;
            ariaRowCheckboxMessage: string;
            ariaHeaderCheckboxMessage: string;
            ariaGroupHeaderCheckboxMessage: string;
            ariaLoadingMessage: string;
        };
        cssClasses: {
            sortAscending: string;
            sortDescending: string;
            sortUnset: string;
            pagerLeftArrow: string;
            pagerRightArrow: string;
            pagerPrevious: string;
            pagerNext: string;
            treeStatusLoading: string;
            treeStatusExpanded: string;
            treeStatusCollapsed: string;
        };
        headerHeight: NonNullable<number | "auto" | undefined>;
        footerHeight: number;
        rowHeight: NonNullable<number | "auto" | ((row: any) => number) | undefined>;
        defaultColumnWidth: number;
    }>

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.

datatableConfiguration

readonly datatableConfiguration: DatatableConfiguration

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