@swimlane/ngx-datatable

@swimlane/ngx-datatable

Version 22.0.0-alpha.1
Published 2 days ago
2.47 MB
1 dependency
MIT license

Install

npm i @swimlane/ngx-datatable

yarn add @swimlane/ngx-datatable

pnpm add @swimlane/ngx-datatable

Overview

ngx-datatable is an Angular table grid component for presenting large and complex data.

Index

Functions

function isNullOrUndefined

isNullOrUndefined: <T>(value: T | null | undefined) => value is null;

function providedNgxDatatableConfig

providedNgxDatatableConfig: (
    overrides: AllPartial<NgxDatatableConfig>
) => Provider;

Provides a global configuration for ngx-datatable.
Parameter overrides
The overrides of the table configuration.

function toInternalColumn

toInternalColumn: <T extends Row>(
    columns: TableColumn<T>[] | QueryList<DataTableColumnDirective<T>>,
    defaultColumnWidth?: number
) => TableColumnInternal<T>[];

Classes

class ColumnChangesService

class ColumnChangesService {}

service to make DatatableComponent aware of changes to input bindings of DataTableColumnDirective

property columnInputChanges$

readonly columnInputChanges$: Observable<void>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ColumnChangesService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<ColumnChangesService>;

method onInputChange

onInputChange: () => void;

class DataTableColumnCellDirective

class DataTableColumnCellDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DataTableColumnCellDirective,
    '[ngx-datatable-cell-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnCellDirective, never>;

property template

template: TemplateRef<CellContext<any>>;

method ngTemplateContextGuard

static ngTemplateContextGuard: (
    dir: DataTableColumnCellDirective,
    ctx: any
) => ctx is CellContext<any>;

class DataTableColumnCellTreeToggle

class DataTableColumnCellTreeToggle {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DataTableColumnCellTreeToggle,
    '[ngx-datatable-tree-toggle]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnCellTreeToggle, never>;

property template

template: TemplateRef<any>;

class DataTableColumnDirective

class DataTableColumnDirective<TRow extends Row> implements TableColumn, OnChanges {}

property bindAsUnsafeHtml

bindAsUnsafeHtml?: boolean;

property canAutoResize

canAutoResize?: boolean;

property cellClass

cellClass?:
    | string
    | ((data: {
          row: TRow;
          group?: TRow[];
          column: TableColumn<TRow>;
          value: any;
          rowHeight: number;
      }) => string | Record<string, boolean>);

property cellTemplate

readonly cellTemplate: any;

property checkboxable

checkboxable?: boolean;

property comparator

comparator?: (
    valueA: any,
    valueB: any,
    rowA: TRow,
    rowB: TRow,
    sortDir: 'desc' | 'asc'
) => number;

property draggable

draggable?: boolean;

property flexGrow

flexGrow?: number;

property frozenLeft

frozenLeft?: boolean;

property frozenRight

frozenRight?: boolean;

property ghostCellTemplate

readonly ghostCellTemplate: any;

property headerCheckboxable

headerCheckboxable?: boolean;

property headerClass

headerClass?:
    | string
    | ((data: { column: TableColumn }) => string | Record<string, boolean>);

property headerTemplate

readonly headerTemplate: any;

property isTreeColumn

isTreeColumn?: boolean;

property maxWidth

maxWidth?: number;

property minWidth

minWidth?: number;

property name

name?: string;

property ngAcceptInputType_bindAsUnsafeHtml

static ngAcceptInputType_bindAsUnsafeHtml: {};

property ngAcceptInputType_canAutoResize

static ngAcceptInputType_canAutoResize: {};

property ngAcceptInputType_checkboxable

static ngAcceptInputType_checkboxable: {};

property ngAcceptInputType_draggable

static ngAcceptInputType_draggable: {};

property ngAcceptInputType_flexGrow

static ngAcceptInputType_flexGrow: {};

property ngAcceptInputType_frozenLeft

static ngAcceptInputType_frozenLeft: {};

property ngAcceptInputType_frozenRight

static ngAcceptInputType_frozenRight: {};

property ngAcceptInputType_headerCheckboxable

static ngAcceptInputType_headerCheckboxable: {};

property ngAcceptInputType_isTreeColumn

static ngAcceptInputType_isTreeColumn: {};

property ngAcceptInputType_maxWidth

static ngAcceptInputType_maxWidth: {};

property ngAcceptInputType_minWidth

static ngAcceptInputType_minWidth: {};

property ngAcceptInputType_resizeable

static ngAcceptInputType_resizeable: {};

property ngAcceptInputType_sortable

static ngAcceptInputType_sortable: {};

property ngAcceptInputType_width

static ngAcceptInputType_width: {};

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DataTableColumnDirective<any>,
    'ngx-datatable-column',
    never,
    {
        name: { alias: 'name'; required: false };
        prop: { alias: 'prop'; required: false };
        bindAsUnsafeHtml: { alias: 'bindAsUnsafeHtml'; required: false };
        frozenLeft: { alias: 'frozenLeft'; required: false };
        frozenRight: { alias: 'frozenRight'; required: false };
        flexGrow: { alias: 'flexGrow'; required: false };
        resizeable: { alias: 'resizeable'; required: false };
        comparator: { alias: 'comparator'; required: false };
        pipe: { alias: 'pipe'; required: false };
        sortable: { alias: 'sortable'; required: false };
        draggable: { alias: 'draggable'; required: false };
        canAutoResize: { alias: 'canAutoResize'; required: false };
        minWidth: { alias: 'minWidth'; required: false };
        width: { alias: 'width'; required: false };
        maxWidth: { alias: 'maxWidth'; required: false };
        checkboxable: { alias: 'checkboxable'; required: false };
        headerCheckboxable: { alias: 'headerCheckboxable'; required: false };
        headerClass: { alias: 'headerClass'; required: false };
        cellClass: { alias: 'cellClass'; required: false };
        isTreeColumn: { alias: 'isTreeColumn'; required: false };
        treeLevelIndent: { alias: 'treeLevelIndent'; required: false };
        summaryFunc: { alias: 'summaryFunc'; required: false };
        summaryTemplate: { alias: 'summaryTemplate'; required: false };
        _cellTemplateInput: { alias: 'cellTemplate'; required: false };
        _headerTemplateInput: { alias: 'headerTemplate'; required: false };
        _treeToggleTemplateInput: {
            alias: 'treeToggleTemplate';
            required: false;
        };
        _ghostCellTemplateInput: { alias: 'ghostCellTemplate'; required: false };
    },
    {},
    [
        '_cellTemplateQuery',
        '_headerTemplateQuery',
        '_treeToggleTemplateQuery',
        '_ghostCellTemplateQuery'
    ],
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnDirective<any>, never>;

property pipe

pipe?: PipeTransform;

property prop

prop?: TableColumnProp;

property resizeable

resizeable?: boolean;

property sortable

sortable?: boolean;

property summaryFunc

summaryFunc?: (cells: any[]) => any;

property summaryTemplate

summaryTemplate?: TemplateRef<any>;

property treeLevelIndent

treeLevelIndent?: number;

property treeToggleTemplate

readonly treeToggleTemplate: any;

property width

width?: number;

method ngOnChanges

ngOnChanges: () => void;

class DataTableColumnGhostCellDirective

class DataTableColumnGhostCellDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DataTableColumnGhostCellDirective,
    '[ngx-datatable-ghost-cell-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnGhostCellDirective, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: (
    directive: DataTableColumnGhostCellDirective,
    context: unknown
) => context is void;

class DataTableColumnHeaderDirective

class DataTableColumnHeaderDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DataTableColumnHeaderDirective,
    '[ngx-datatable-header-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnHeaderDirective, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: (
    directive: DataTableColumnHeaderDirective,
    context: unknown
) => context is HeaderCellContext;

class DatatableComponent

class DatatableComponent<TRow extends Row = any>
    implements OnInit, DoCheck, AfterViewInit, AfterContentInit, OnDestroy {}

constructor

constructor();

property activate

activate: EventEmitter<ActivateEvent<TRow>>;

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

property allRowsSelected

readonly allRowsSelected: boolean;

Returns if all rows are selected.

property bodyComponent

bodyComponent: DataTableBodyComponent<TRow & { treeStatus?: TreeStatus }>;

Reference to the body component for manually invoking functions on the body.

property bodyHeight

bodyHeight: number;

property columnMode

columnMode: ColumnMode | 'standard' | 'flex' | 'force';

Type of column width distribution formula. Example: flex, force, standard

property columns

columns: TableColumn<any>[];

Get the columns.

property columnTemplates

columnTemplates: QueryList<DataTableColumnDirective<TRow>>;

Column templates gathered from ContentChildren if described in your markup.

property count

count: number;

Gets the count.

property cssClasses

cssClasses: Partial<NgxDatatableCssClasses>;

Css class overrides

property disableRowCheck

disableRowCheck?: (row: TRow) => boolean;

A function you can use to check whether you want to disable a row. Example:
(row) => { return row.name !== 'Ethel Price'; }

property displayCheck

displayCheck?: (row: TRow, column: TableColumn, value?: any) => boolean;

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'; }

property element

element: HTMLElement;

property enableClearingSortState

enableClearingSortState: 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.

property externalPaging

externalPaging: boolean;

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

property externalSorting

externalSorting: boolean;

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

footer?: DatatableFooterDirective;

Footer template gathered from the ContentChild

property footerHeight

footerHeight: number;

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

property ghostLoadingIndicator

ghostLoadingIndicator: boolean;

property groupedRows

groupedRows?: Group<TRow>[];

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"} ]} ]

property groupExpansionDefault

groupExpansionDefault: 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.

property groupHeader

groupHeader?: DatatableGroupHeaderDirective<any>;

Group Header templates gathered from the ContentChild

property groupRowsBy

groupRowsBy: string | number | symbol;

property headerComponent

headerComponent: DataTableHeaderComponent;

Reference to the header component for manually invoking functions on the header.

property headerHeight

headerHeight: number;

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

property isCellSelection

readonly isCellSelection: boolean;

CSS class applied to root if cell selection.

property isCheckboxSelection

readonly isCheckboxSelection: boolean;

CSS class applied to root is checkbox selection.

property isFixedHeader

readonly isFixedHeader: boolean;

CSS class applied if the header height if fixed height.

property isFixedRow

readonly isFixedRow: boolean;

CSS class applied to the root element if the row heights are fixed heights.

property isHorScroll

readonly isHorScroll: boolean;

CSS class applied to the root element if the horziontal scrolling is enabled.

property isMultiClickSelection

readonly isMultiClickSelection: boolean;

CSS class added to root element if mulit click select

property isMultiSelection

readonly isMultiSelection: boolean;

CSS class added to root element if mulit select

property isSelectable

readonly isSelectable: boolean;

CSS class applied to root element is selectable.

property isSingleSelection

readonly isSingleSelection: boolean;

CSS class applied to root if single select.

property isVertScroll

readonly isVertScroll: boolean;

CSS class applied to root element if vertical scrolling is enabled.

property isVirtualized

readonly isVirtualized: boolean;

CSS class applied to root element if virtualization is enabled.

property limit

limit: number;

Gets the limit.

property loadingIndicator

loadingIndicator: boolean;

Show the linear loading bar. Default value: false

property messages

messages: Partial<NgxDatatableMessages>;

Message overrides for localization

property ngAcceptInputType_count

static ngAcceptInputType_count: {};

property ngAcceptInputType_enableClearingSortState

static ngAcceptInputType_enableClearingSortState: {};

property ngAcceptInputType_externalPaging

static ngAcceptInputType_externalPaging: {};

property ngAcceptInputType_externalSorting

static ngAcceptInputType_externalSorting: {};

property ngAcceptInputType_footerHeight

static ngAcceptInputType_footerHeight: {};

property ngAcceptInputType_ghostLoadingIndicator

static ngAcceptInputType_ghostLoadingIndicator: {};

property ngAcceptInputType_groupExpansionDefault

static ngAcceptInputType_groupExpansionDefault: {};

property ngAcceptInputType_headerHeight

static ngAcceptInputType_headerHeight: {};

property ngAcceptInputType_limit

static ngAcceptInputType_limit: {};

property ngAcceptInputType_loadingIndicator

static ngAcceptInputType_loadingIndicator: {};

property ngAcceptInputType_offset

static ngAcceptInputType_offset: {};

property ngAcceptInputType_reorderable

static ngAcceptInputType_reorderable: {};

property ngAcceptInputType_rowDraggable

static ngAcceptInputType_rowDraggable: {};

property ngAcceptInputType_scrollbarH

static ngAcceptInputType_scrollbarH: {};

property ngAcceptInputType_scrollbarV

static ngAcceptInputType_scrollbarV: {};

property ngAcceptInputType_scrollbarVDynamic

static ngAcceptInputType_scrollbarVDynamic: {};

property ngAcceptInputType_selectAllRowsOnPage

static ngAcceptInputType_selectAllRowsOnPage: {};

property ngAcceptInputType_summaryHeight

static ngAcceptInputType_summaryHeight: {};

property ngAcceptInputType_summaryRow

static ngAcceptInputType_summaryRow: {};

property ngAcceptInputType_swapColumns

static ngAcceptInputType_swapColumns: {};

property ngAcceptInputType_virtualization

static ngAcceptInputType_virtualization: {};

property offset

offset: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DatatableComponent<any>,
    'ngx-datatable',
    never,
    {
        targetMarkerTemplate: { alias: 'targetMarkerTemplate'; required: false };
        rows: { alias: 'rows'; required: false };
        groupRowsBy: { alias: 'groupRowsBy'; required: false };
        groupedRows: { alias: 'groupedRows'; required: false };
        columns: { alias: 'columns'; required: false };
        selected: { alias: 'selected'; required: false };
        scrollbarV: { alias: 'scrollbarV'; required: false };
        scrollbarVDynamic: { alias: 'scrollbarVDynamic'; required: false };
        scrollbarH: { alias: 'scrollbarH'; required: false };
        rowHeight: { alias: 'rowHeight'; required: false };
        columnMode: { alias: 'columnMode'; required: false };
        headerHeight: { alias: 'headerHeight'; required: false };
        footerHeight: { alias: 'footerHeight'; required: false };
        externalPaging: { alias: 'externalPaging'; required: false };
        externalSorting: { alias: 'externalSorting'; required: false };
        limit: { alias: 'limit'; required: false };
        count: { alias: 'count'; required: false };
        offset: { alias: 'offset'; required: false };
        loadingIndicator: { alias: 'loadingIndicator'; required: false };
        ghostLoadingIndicator: {
            alias: 'ghostLoadingIndicator';
            required: false;
        };
        selectionType: { alias: 'selectionType'; required: false };
        reorderable: { alias: 'reorderable'; required: false };
        swapColumns: { alias: 'swapColumns'; required: false };
        sortType: { alias: 'sortType'; required: false };
        sorts: { alias: 'sorts'; required: false };
        cssClasses: { alias: 'cssClasses'; required: false };
        messages: { alias: 'messages'; required: false };
        rowClass: { alias: 'rowClass'; required: false };
        selectCheck: { alias: 'selectCheck'; required: false };
        displayCheck: { alias: 'displayCheck'; required: false };
        groupExpansionDefault: {
            alias: 'groupExpansionDefault';
            required: false;
        };
        trackByProp: { alias: 'trackByProp'; required: false };
        selectAllRowsOnPage: { alias: 'selectAllRowsOnPage'; required: false };
        virtualization: { alias: 'virtualization'; required: false };
        treeFromRelation: { alias: 'treeFromRelation'; required: false };
        treeToRelation: { alias: 'treeToRelation'; required: false };
        summaryRow: { alias: 'summaryRow'; required: false };
        summaryHeight: { alias: 'summaryHeight'; required: false };
        summaryPosition: { alias: 'summaryPosition'; required: false };
        disableRowCheck: { alias: 'disableRowCheck'; required: false };
        rowDraggable: { alias: 'rowDraggable'; required: false };
        enableClearingSortState: {
            alias: 'enableClearingSortState';
            required: false;
        };
        rowIdentity: { alias: 'rowIdentity'; required: false };
    },
    {
        scroll: 'scroll';
        activate: 'activate';
        select: 'select';
        sort: 'sort';
        page: 'page';
        reorder: 'reorder';
        resize: 'resize';
        tableContextmenu: 'tableContextmenu';
        treeAction: 'treeAction';
        rowDragEvents: 'rowDragEvents';
    },
    ['rowDetail', 'groupHeader', 'footer', 'rowDefTemplate', 'columnTemplates'],
    ['[loading-indicator]', '[empty-content]'],
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DatatableComponent<any>, never>;

property page

page: EventEmitter<PageEvent>;

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

property pageSize

pageSize: number;

property reorder

reorder: EventEmitter<ReorderEvent>;

Columns were re-ordered.

property reorderable

reorderable: boolean;

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

property resize

resize: EventEmitter<ColumnResizeEvent>;

Column was resized.

property rowClass

rowClass?: (row: TRow) => string | Record<string, boolean>;

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

property rowCount

rowCount: number;

property rowDefTemplate

rowDefTemplate?: TemplateRef<any>;

property rowDetail

rowDetail?: DatatableRowDetailDirective<any>;

Row Detail templates gathered from the ContentChild

property rowDiffer

rowDiffer: KeyValueDiffer<TRow, TRow>;

property rowDragEvents

rowDragEvents: EventEmitter<DragEventData>;

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

property rowDraggable

rowDraggable: 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.

property rowHeight

rowHeight: number | 'auto' | ((row: TRow) => number);

The row height; which is necessary to calculate the height for the lazy rendering.

property rowIdentity

rowIdentity: (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)

property rows

rows: TRow[];

Gets the rows.

property scroll

scroll: EventEmitter<ScrollEvent>;

Body was scrolled typically in a scrollbarV:true scenario.

property scrollbarH

scrollbarH: boolean;

Enable horz scrollbars

property scrollbarV

scrollbarV: boolean;

Enable vertical scrollbars

property scrollbarVDynamic

scrollbarVDynamic: 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.

property select

select: EventEmitter<SelectEvent<TRow>>;

A cell or row was selected.

property selectAllRowsOnPage

selectAllRowsOnPage: boolean;

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

property selectCheck

selectCheck?: (value: TRow, index: number, array: TRow[]) => boolean;

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'; }

property selected

selected: TRow[];

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

property selectionType

selectionType?: SelectionType;

Type of row selection. Options are:
- single - multi - checkbox - multiClick - cell
For no selection pass a falsey. Default value: undefined

property sort

sort: EventEmitter<SortEvent>;

Column sort was invoked.

property sorts

sorts: SortPropDir[];

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

property sortType

sortType: SortType;

The type of sorting

property summaryHeight

summaryHeight: number;

A height of summary row

property summaryPosition

summaryPosition: string;

A property holds a summary row position: top/bottom

property summaryRow

summaryRow: boolean;

A flag for switching summary row on / off

property swapColumns

swapColumns: boolean;

Swap columns on re-order columns or move them.

property tableContextmenu

tableContextmenu: EventEmitter<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.

property targetMarkerTemplate

targetMarkerTemplate?: TemplateRef<unknown>;

Template for the target marker of drag target columns.

property trackByProp

trackByProp?: string;

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

property treeAction

treeAction: EventEmitter<{ row: TRow; rowIndex: number }>;

A row was expanded ot collapsed for tree

property treeFromRelation

treeFromRelation?: string;

Tree from relation

property treeToRelation

treeToRelation?: string;

Tree to relation

property verticalScrollVisible

protected verticalScrollVisible: boolean;

property virtualization

virtualization: boolean;

A flag for row virtualization on / off

method calcPageSize

calcPageSize: () => number;

Recalculates the sizes of the page

method calcRowCount

calcRowCount: () => number;

Calculates the row count.

method 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
Parameter originalArray
the original array passed via parameter
Parameter groupBy
the key of the column to group the data by

method ngAfterContentInit

ngAfterContentInit: () => void;

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

method ngAfterViewInit

ngAfterViewInit: () => void;

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

method ngDoCheck

ngDoCheck: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

Lifecycle hook that is called after data-bound properties of a directive are initialized.

method onBodyPage

onBodyPage: (offset: number) => void;

Body triggered a page event.

method onBodyScroll

onBodyScroll: (event: ScrollEvent) => void;

The body triggered a scroll event.

method onBodySelect

onBodySelect: (event: SelectEvent<TRow>) => void;

A row was selected from body

method onColumnContextmenu

onColumnContextmenu: ({
    event,
    column,
}: {
    event: MouseEvent;
    column: TableColumn;
}) => void;

The header triggered a contextmenu event.

method onColumnReorder

onColumnReorder: (event: ReorderEventInternal) => void;

The header triggered a column re-order event.

method onColumnResize

onColumnResize: ({
    column,
    newValue,
    prevValue,
}: ColumnResizeEventInternal) => void;

The header triggered a column resize event.

method onColumnResizing

onColumnResizing: ({ column, newValue }: ColumnResizeEventInternal) => void;

method onColumnSort

onColumnSort: (event: SortEvent) => void;

The header triggered a column sort event.

method onFooterPage

onFooterPage: (event: PagerPageEvent) => void;

The footer triggered a page event.

method onHeaderSelect

onHeaderSelect: () => void;

Toggle all row selection

method onRowContextmenu

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

The body triggered a contextmenu event.

method onTreeAction

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

A row was expanded or collapsed for tree

method onWindowResize

onWindowResize: () => void;

Window resize handler to update sizes.

method recalculate

recalculate: () => void;

Recalc's the sizes of the grid.
Updated automatically on changes to:
- Columns - Rows - Paging related
Also can be manually invoked or upon window resize.

method recalculateColumns

recalculateColumns: (
    columns?: TableColumnInternal[],
    forceIdx?: number,
    allowBleed?: boolean
) => TableColumn[] | undefined;

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

method recalculateDims

recalculateDims: () => void;

Recalculates the dimensions of the table size. Internally calls the page size and row count calcs too.

method recalculatePages

recalculatePages: () => void;

Recalculates the pages after a update.

method translateColumns

translateColumns: (val: QueryList<DataTableColumnDirective<TRow>>) => void;

Translates the templates to the column objects

class DatatableFooterDirective

class DatatableFooterDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DatatableFooterDirective,
    'ngx-datatable-footer',
    never,
    { _templateInput: { alias: 'template'; required: false } },
    {},
    ['_templateQuery'],
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DatatableFooterDirective, never>;

property template

readonly template: any;

class DataTableFooterTemplateDirective

class DataTableFooterTemplateDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DataTableFooterTemplateDirective,
    '[ngx-datatable-footer-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DataTableFooterTemplateDirective, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: (
    directive: DataTableFooterTemplateDirective,
    context: unknown
) => context is FooterContext;

class DatatableGroupHeaderDirective

class DatatableGroupHeaderDirective<TRow extends Row = any> {}

property checkboxable

checkboxable: boolean;

Show checkbox at group header to select all rows of the group.

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DatatableGroupHeaderDirective<any>,
    'ngx-datatable-group-header',
    never,
    {
        rowHeight: { alias: 'rowHeight'; required: false };
        checkboxable: { alias: 'checkboxable'; required: false };
        _templateInput: { alias: 'template'; required: false };
    },
    { toggle: 'toggle' },
    ['_templateQuery'],
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DatatableGroupHeaderDirective<any>, never>;

property rowHeight

rowHeight: number | ((group?: Group<TRow>, index?: number) => number);

Row height is required when virtual scroll is enabled.

property template

readonly template: any;

property toggle

toggle: EventEmitter<GroupToggleEvents<TRow>>;

Track toggling of group visibility

method collapseAllGroups

collapseAllGroups: () => void;

Collapse all groups

method expandAllGroups

expandAllGroups: () => void;

Expand all groups

method toggleExpandGroup

toggleExpandGroup: (group: Group<TRow>) => void;

Toggle the expansion of a group

class DatatableGroupHeaderTemplateDirective

class DatatableGroupHeaderTemplateDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DatatableGroupHeaderTemplateDirective,
    '[ngx-datatable-group-header-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    DatatableGroupHeaderTemplateDirective,
    never
>;

method ngTemplateContextGuard

static ngTemplateContextGuard: (
    directive: DatatableGroupHeaderTemplateDirective,
    context: unknown
) => context is GroupContext<any>;

class DatatableRowDefComponent

class DatatableRowDefComponent {}

This component is passed as ng-template and rendered by BodyComponent. BodyComponent uses rowDefInternal to first inject actual row template. This component will render that actual row template.

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DatatableRowDefComponent,
    'datatable-row-def',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefComponent, never>;

property rowContext

rowContext: {
    disabled: boolean;
    template: TemplateRef<unknown>;
    rowTemplate: TemplateRef<unknown>;
    row: RowOrGroup<unknown>;
    index: number;
};

property rowDef

rowDef: DatatableRowDefInternalDirective;

class DatatableRowDefDirective

class DatatableRowDefDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DatatableRowDefDirective,
    '[rowDef]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefDirective, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: (
    _dir: DatatableRowDefDirective,
    ctx: unknown
) => ctx is RowDefContext;

class DatatableRowDetailDirective

class DatatableRowDetailDirective<TRow extends Row = any> {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DatatableRowDetailDirective<any>,
    'ngx-datatable-row-detail',
    never,
    {
        rowHeight: { alias: 'rowHeight'; required: false };
        _templateInput: { alias: 'template'; required: false };
    },
    { toggle: 'toggle' },
    ['_templateQuery'],
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDetailDirective<any>, never>;

property rowHeight

rowHeight: number | ((row?: TRow, index?: number) => number);

The detail row height is required especially when virtual scroll is enabled.

property template

readonly template: any;

property toggle

toggle: EventEmitter<DetailToggleEvents<TRow>>;

Row detail row visbility was toggled.

method collapseAllRows

collapseAllRows: () => void;

API method to collapse all the rows.

method expandAllRows

expandAllRows: () => void;

API method to expand all the rows.

method toggleExpandRow

toggleExpandRow: (row: TRow) => void;

Toggle the expansion of the row

class DatatableRowDetailTemplateDirective

class DatatableRowDetailTemplateDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DatatableRowDetailTemplateDirective,
    '[ngx-datatable-row-detail-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDetailTemplateDirective, never>;

method ngTemplateContextGuard

static ngTemplateContextGuard: (
    directive: DatatableRowDetailTemplateDirective,
    context: unknown
) => context is RowDetailContext<any>;

class DisableRowDirective

class DisableRowDirective {}

Row Disable Directive Use this to disable/enable all children elements Usage: To disable <div [disabled]="true" disable-row > To enable <div [disabled]="false" disable-row >

constructor

constructor();

property disabled

readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DisableRowDirective,
    '[disable-row]',
    never,
    { disabled: { alias: 'disabled'; required: false; isSignal: true } },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<DisableRowDirective, never>;

class NgxDatatableModule

class NgxDatatableModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgxDatatableModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<NgxDatatableModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    NgxDatatableModule,
    never,
    [
        typeof DataTableFooterTemplateDirective,
        typeof DatatableComponent,
        typeof DataTableColumnDirective,
        typeof DatatableRowDetailDirective,
        typeof DatatableGroupHeaderDirective,
        typeof DatatableRowDetailTemplateDirective,
        typeof DataTableColumnHeaderDirective,
        typeof DataTableColumnCellDirective,
        typeof DataTableColumnGhostCellDirective,
        typeof DataTableColumnCellTreeToggle,
        typeof DatatableFooterDirective,
        typeof DatatableGroupHeaderTemplateDirective,
        typeof DisableRowDirective,
        typeof DatatableRowDefComponent,
        typeof DatatableRowDefDirective
    ],
    [
        typeof DatatableComponent,
        typeof DatatableRowDetailDirective,
        typeof DatatableGroupHeaderDirective,
        typeof DatatableRowDetailTemplateDirective,
        typeof DataTableColumnDirective,
        typeof DataTableColumnHeaderDirective,
        typeof DataTableColumnCellDirective,
        typeof DataTableColumnGhostCellDirective,
        typeof DataTableColumnCellTreeToggle,
        typeof DataTableFooterTemplateDirective,
        typeof DatatableFooterDirective,
        typeof DatatableGroupHeaderTemplateDirective,
        typeof DisableRowDirective,
        typeof DatatableRowDefComponent,
        typeof DatatableRowDefDirective
    ]
>;

method forRoot

static forRoot: (
    configuration: AllPartial<NgxDatatableConfig>
) => ModuleWithProviders<NgxDatatableModule>;

Configure global configuration via INgxDatatableConfig
Parameter configuration

Interfaces

interface ActivateEvent

interface ActivateEvent<TRow> {}

property cellElement

cellElement?: HTMLElement;

property cellIndex

cellIndex?: number;

property column

column?: TableColumn;

property event

event: Event;

property group

group?: TRow[];

property row

row: TRow;

property rowElement

rowElement: HTMLElement;

property rowHeight

rowHeight?: number;

property treeStatus

treeStatus?: TreeStatus;

property type

type: 'checkbox' | 'click' | 'dblclick' | 'keydown' | 'mouseenter';

property value

value?: any;

interface AllDetailToggleEvent

interface AllDetailToggleEvent {}

property type

type: 'all';

property value

value: boolean;

interface AllGroupsToggleEvent

interface AllGroupsToggleEvent {}

property type

type: 'all';

property value

value: boolean;

interface CellContext

interface CellContext<TRow extends Row = any> {}

property activateFn

activateFn: (event: ActivateEvent<TRow>) => void;

property column

column: TableColumn;

property disabled

disabled?: boolean;

property expanded

expanded?: boolean;

property group

group?: TRow[];

property isSelected

isSelected?: boolean;

property onCheckboxChangeFn

onCheckboxChangeFn: (event: Event) => void;

property onTreeAction

onTreeAction: () => void;

property row

row: TRow;

property rowHeight

rowHeight: number;

property rowIndex

rowIndex: number;

property rowInGroupIndex

rowInGroupIndex?: number;

property treeStatus

treeStatus?: TreeStatus;

property value

value: any;

interface ColumnResizeEvent

interface ColumnResizeEvent {}

property column

column: TableColumn;

property newValue

newValue: number;

property prevValue

prevValue: number;

interface ContextMenuEvenHeader

interface ContextMenuEvenHeader {}

property content

content: TableColumn;

property event

event: MouseEvent;

property type

type: ContextmenuType.header;

interface ContextMenuEventBody

interface ContextMenuEventBody<TRow> {}

property content

content: RowOrGroup<TRow>;

property event

event: MouseEvent;

property type

type: ContextmenuType.body;

interface DetailToggleEvent

interface DetailToggleEvent<TRow> {}

property type

type: 'row';

property value

value: TRow;

interface DragEventData

interface DragEventData {}

property dragRow

dragRow: any;

property dropRow

dropRow?: any;

property event

event: DragEvent;

property eventType

eventType: DragEventType;

property srcElement

srcElement: HTMLElement;

property targetElement

targetElement?: HTMLElement;

interface FooterContext

interface FooterContext {}

property curPage

curPage: number;

property offset

offset: number;

property pageSize

pageSize: number;

property rowCount

rowCount: number;

property selectedCount

selectedCount: number;

interface Group

interface Group<TRow> {}

A Group row

property key

key: TRow[keyof TRow];

The value by which to rows are grouped.

property value

value: TRow[];

All rows that are part of the group.

interface GroupContext

interface GroupContext<TRow extends Row = any> {}

property expanded

expanded: boolean;

property group

group: Group<TRow>;

property rowIndex

rowIndex: number;

interface GroupToggleEvent

interface GroupToggleEvent<TRow> {}

property type

type: 'group';

property value

value: Group<TRow>;

interface HeaderCellContext

interface HeaderCellContext {}

property allRowsSelected

allRowsSelected?: boolean;

property column

column: TableColumn;

property selectFn

selectFn: () => void;

property sortDir

sortDir: SortDirection | 'asc' | 'desc' | undefined;

property sortFn

sortFn: () => void;

interface NgxDatatableConfig

interface NgxDatatableConfig {}

Interface definition for ngx-datatable global configuration

property cssClasses

cssClasses?: NgxDatatableCssClasses;

property defaultColumnWidth

defaultColumnWidth?: number;

property footerHeight

footerHeight?: number;

property headerHeight

headerHeight?: number;

property messages

messages?: NgxDatatableMessages;

property rowHeight

rowHeight?: number;

interface NgxDatatableCssClasses

interface NgxDatatableCssClasses {}

CSS classes for icons that override the default table icons.

property pagerLeftArrow

pagerLeftArrow: string;

property pagerNext

pagerNext: string;

property pagerPrevious

pagerPrevious: string;

property pagerRightArrow

pagerRightArrow: string;

property sortAscending

sortAscending: string;

property sortDescending

sortDescending: string;

property sortUnset

sortUnset: string;

interface NgxDatatableMessages

interface NgxDatatableMessages {}

Interface for messages to override default table texts.

property ariaFirstPageMessage

ariaFirstPageMessage: string;

Pager screen reader message for the first page button

property ariaLastPageMessage

ariaLastPageMessage: string;

Pager screen reader message for the last page button

property ariaNextPageMessage

ariaNextPageMessage: string;

Pager screen reader message for the next page button

property ariaPageNMessage

ariaPageNMessage: string;

Pager screen reader message for the n-th page button. It will be rendered as: {{ariaPageNMessage}} {{n}}.

property ariaPreviousPageMessage

ariaPreviousPageMessage: string;

Pager screen reader message for the previous page button

property emptyMessage

emptyMessage: string;

Message to show when the array is present but empty

property selectedMessage

selectedMessage: string;

Footer selected message

property totalMessage

totalMessage: string;

Footer total message

interface PageEvent

interface PageEvent {}

property count

count: number;

property limit

limit: number | undefined;

Deprecated
Use pageSize instead.

property offset

offset: number;

property pageSize

pageSize: number;

property sorts

sorts: SortPropDir[];

interface PagerPageEvent

interface PagerPageEvent {}

property page

page: number;

interface ReorderEvent

interface ReorderEvent {}

property column

column: TableColumn;

property newValue

newValue: number;

property prevValue

prevValue: number;

interface Row

interface Row {}

Consumer provided rows should extend this interface to get access to implicit row properties which are set by the datatable if required.

property level

level?: number;

property treeStatus

treeStatus?: TreeStatus;

index signature

[key: TableColumnProp]: any;

interface RowDetailContext

interface RowDetailContext<TRow extends Row = any> {}

property disabled

disabled?: boolean;

property expanded

expanded: boolean;

property row

row: TRow;

property rowIndex

rowIndex: number;

interface ScrollEvent

interface ScrollEvent {}

property offsetX

offsetX: number;

property offsetY

offsetY: number;

interface SelectEvent

interface SelectEvent<TRow> {}

property selected

selected: TRow[];

interface SortEvent

interface SortEvent {}

property column

column: TableColumn;

property newValue

newValue: SortDirection | undefined;

property prevValue

prevValue: SortDirection | undefined;

property sorts

sorts: SortPropDir[];

interface SortPropDir

interface SortPropDir {}

property dir

dir: SortDirection | 'desc' | 'asc';

property prop

prop: TableColumnProp;

interface TableColumn

interface TableColumn<TRow extends Row = any> {}

Column Type

property bindAsUnsafeHtml

bindAsUnsafeHtml?: boolean;

By default, the property is bound using normal data binding <span>{{content}}</span>. If this property is set to true, the property will be bound as <span [innerHTML]="content" />.
**DANGER** If enabling this feature, make sure the source of the data is trusted. This can be a vector for HTML injection attacks.

property canAutoResize

canAutoResize?: boolean;

Whether the column can automatically resize to fill space in the table.

property cellClass

cellClass?:
    | string
    | ((data: {
          row: TRow;
          group?: TRow[];
          column: TableColumn<TRow>;
          value: any;
          rowHeight: number;
      }) => string | Record<string, boolean>);

CSS Classes for the cell

property cellTemplate

cellTemplate?: TemplateRef<CellContext<TRow>>;

Cell template ref

property checkboxable

checkboxable?: boolean;

Determines if column is checkbox

property comparator

comparator?: (
    valueA: any,
    valueB: any,
    rowA: TRow,
    rowB: TRow,
    sortDir: 'desc' | 'asc'
) => number;

Custom sort comparator

property draggable

draggable?: boolean;

Can the column be re-arranged by dragging

property flexGrow

flexGrow?: number;

The grow factor relative to other columns. Same as the flex-grow API from http =//www.w3.org/TR/css3-flexbox/. Basically; take any available extra width and distribute it proportionally according to all columns' flexGrow values.

property frozenLeft

frozenLeft?: boolean;

Determines if the column is frozen to the left

property frozenRight

frozenRight?: boolean;

Determines if the column is frozen to the right

property ghostCellTemplate

ghostCellTemplate?: TemplateRef<any>;

Ghost Cell template ref

property headerCheckboxable

headerCheckboxable?: boolean;

Header checkbox enabled

property headerClass

headerClass?:
    | string
    | ((data: { column: TableColumn }) => string | Record<string, boolean>);

CSS classes for the header

property headerTemplate

headerTemplate?: TemplateRef<HeaderCellContext>;

Header template ref

property isTreeColumn

isTreeColumn?: boolean;

Is tree displayed on this column

property maxWidth

maxWidth?: number;

Max width of the column

property minWidth

minWidth?: number;

Min width of the column

property name

name?: string;

Column name or label

property pipe

pipe?: PipeTransform;

Custom pipe transforms

property prop

prop?: TableColumnProp;

Property to bind to the row. Example:
someField or some.field.nested, 0 (numeric)
If left blank, will use the name as camel case conversion

property resizeable

resizeable?: boolean;

Can the column be resized

property sortable

sortable?: boolean;

Can the column be sorted

property summaryFunc

summaryFunc?: ((cells: any[]) => any) | null;

Summary function
Null and undefined have different meanings: - undefined will use the default summary function - null will not compute a summary

property summaryTemplate

summaryTemplate?: TemplateRef<any>;

Summary cell template ref

property treeLevelIndent

treeLevelIndent?: number;

Width of the tree level indent

property treeToggleTemplate

treeToggleTemplate?: any;

Tree toggle template ref

property width

width?: number;

The default width of the column, in pixels

Enums

enum ColumnMode

enum ColumnMode {
    standard = 'standard',
    flex = 'flex',
    force = 'force',
}

member flex

flex = 'flex'

member force

force = 'force'

member standard

standard = 'standard'

enum ContextmenuType

enum ContextmenuType {
    header = 'header',
    body = 'body',
}

member body

body = 'body'

member header

header = 'header'

enum SelectionType

enum SelectionType {
    single = 'single',
    multi = 'multi',
    multiClick = 'multiClick',
    cell = 'cell',
    checkbox = 'checkbox',
}

member cell

cell = 'cell'

member checkbox

checkbox = 'checkbox'

member multi

multi = 'multi'

member multiClick

multiClick = 'multiClick'

member single

single = 'single'

enum SortDirection

enum SortDirection {
    asc = 'asc',
    desc = 'desc',
}

member asc

asc = 'asc'

member desc

desc = 'desc'

enum SortType

enum SortType {
    single = 'single',
    multi = 'multi',
}

member multi

multi = 'multi'

member single

single = 'single'

Type Aliases

type ContextMenuEvent

type ContextMenuEvent<TRow> = ContextMenuEventBody<TRow> | ContextMenuEvenHeader;

type DetailToggleEvents

type DetailToggleEvents<TRow> = DetailToggleEvent<TRow> | AllDetailToggleEvent;

type DragEventType

type DragEventType =
    | 'drag'
    | 'dragend'
    | 'dragenter'
    | 'dragleave'
    | 'dragover'
    | 'dragstart'
    | 'drop';

type GroupToggleEvents

type GroupToggleEvents<TRow> = GroupToggleEvent<TRow> | AllGroupsToggleEvent;

type RowOrGroup

type RowOrGroup<TRow> = TRow | Group<TRow>;

Type for either a row or a group

type TableColumnProp

type TableColumnProp = string | number;

Column property that indicates how to retrieve this column's value from a row. 'a.deep.value', 'normalprop', 0 (numeric)

type TreeStatus

type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';

Package Files (1)

index.d.ts

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (4)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@swimlane/ngx-datatable.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@swimlane/ngx-datatable)

HTML

<a href="https://www.jsdocs.io/package/@swimlane/ngx-datatable"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 days ago.
Package analyzed in 8284 ms.
Missing or incorrect documentation? Open an issue for this package.

@swimlane/ngx-datatable

Install

Overview

Index

Functions

Classes

Interfaces

Enums

Type Aliases

Functions

function isNullOrUndefined

function providedNgxDatatableConfig

Parameter overrides

function toInternalColumn

Classes

class ColumnChangesService

property columnInputChanges$

property ɵfac

property ɵprov

method onInputChange

class DataTableColumnCellDirective

property ɵdir

property ɵfac

property template

method ngTemplateContextGuard

class DataTableColumnCellTreeToggle

property ɵdir

property ɵfac

property template

class DataTableColumnDirective

property bindAsUnsafeHtml

property canAutoResize

property cellClass

property cellTemplate

property checkboxable

property comparator

property draggable

property flexGrow

property frozenLeft

property frozenRight

property ghostCellTemplate

property headerCheckboxable

property headerClass

property headerTemplate

property isTreeColumn

property maxWidth

property minWidth

property name

property ngAcceptInputType_bindAsUnsafeHtml

property ngAcceptInputType_canAutoResize

property ngAcceptInputType_checkboxable

property ngAcceptInputType_draggable

property ngAcceptInputType_flexGrow

property ngAcceptInputType_frozenLeft

property ngAcceptInputType_frozenRight

property ngAcceptInputType_headerCheckboxable

property ngAcceptInputType_isTreeColumn

property ngAcceptInputType_maxWidth

property ngAcceptInputType_minWidth

property ngAcceptInputType_resizeable

property ngAcceptInputType_sortable

property ngAcceptInputType_width

property ɵdir

property ɵfac

property pipe

property prop

property resizeable

property sortable

property summaryFunc

property summaryTemplate

property treeLevelIndent

property treeToggleTemplate

property width

method ngOnChanges

class DataTableColumnGhostCellDirective

property ɵdir

property ɵfac

method ngTemplateContextGuard

class DataTableColumnHeaderDirective

property ɵdir