@swimlane/ngx-datatable

@swimlane/ngx-datatable

Version 24.0.0-alpha.0
Published 11 days ago
2.56 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

Variables

variable ColumnMode

const ColumnMode: {
    readonly standard: 'standard';
    readonly flex: 'flex';
    readonly force: 'force';
};

Deprecated

The constant ColumnMode should no longer be used. Instead use the value directly:

// old
<ngx-datatable [columnMode]="ColumnMode.force"></ngx-datatable>
// new
<ngx-datatable [columnMode]="'force'"></ngx-datatable>

variable ContextmenuType

const ContextmenuType: { readonly header: 'header'; readonly body: 'body' };

Deprecated

The constant ContextmenuType should no longer be used. Instead use the value directly:

// old
const contextmenuType: ContextmenuType = ContextmenuType.header;
// new
const contextmenuType: ContextmenuType = 'header';

variable SelectionType

const SelectionType: {
    readonly single: 'single';
    readonly multi: 'multi';
    readonly multiClick: 'multiClick';
    readonly cell: 'cell';
    readonly checkbox: 'checkbox';
};

Deprecated

The constant SelectionType should no longer be used. Instead use the value directly:

// old
<ngx-datatable [selectionType]="SelectionType.multi"></ngx-datatable>
// new
<ngx-datatable [selectionType]="'multi'"></ngx-datatable>

variable SortDirection

const SortDirection: { readonly asc: 'asc'; readonly desc: 'desc' };

Deprecated

The constant SortDirection should no longer be used. Instead use the value directly:

// old
const sortDir: SortDirection = SortDirection.asc;
// new
const sortDir: SortDirection = 'asc';

variable SortType

const SortType: { readonly single: 'single'; readonly multi: 'multi' };

Deprecated

The constant SortType should no longer be used. Instead use the value directly:

// old
const sortType: SortType = SortType.single;
// new
const sortType: SortType = 'single';

Functions

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>[],
    defaultColumnWidth?: number
) => TableColumnInternal<T>[];

function toPublicColumn

toPublicColumn: (column: TableColumnInternal) => TableColumn;

Classes

class DataTableColumnCellDirective

class DataTableColumnCellDirective {}

property ɵdir

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

property ɵfac

static ɵfac: _angular_core.ɵɵ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: _angular_core.ɵɵDirectiveDeclaration<
    DataTableColumnCellTreeToggle,
    '[ngx-datatable-tree-toggle]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property template

template: TemplateRef<any>;

class DataTableColumnDirective

class DataTableColumnDirective<TRow extends Row> {}

property bindAsUnsafeHtml

readonly bindAsUnsafeHtml: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

property canAutoResize

readonly canAutoResize: _angular_core.InputSignalWithTransform<
    boolean,
    string | boolean
>;

property cellClass

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

property cellTemplateInput

readonly cellTemplateInput: _angular_core.InputSignal<
    TemplateRef<CellContext<TRow>>
>;

property cellTemplateQuery

readonly cellTemplateQuery: Signal<TemplateRef<any>>;

property checkboxable

readonly checkboxable: _angular_core.InputSignalWithTransform<boolean, unknown>;

property column

readonly column: Signal<TableColumn<TRow>>;

Computed property that returns the column configuration as a TableColumn object

property comparator

readonly comparator: _angular_core.InputSignal<
    (valueA: any, valueB: any, rowA: TRow, rowB: TRow) => number
>;

property draggable

readonly draggable: _angular_core.InputSignalWithTransform<
    boolean,
    string | boolean
>;

property flexGrow

readonly flexGrow: _angular_core.InputSignalWithTransform<
    number,
    string | number
>;

property frozenLeft

readonly frozenLeft: _angular_core.InputSignalWithTransform<boolean, unknown>;

property frozenRight

readonly frozenRight: _angular_core.InputSignalWithTransform<boolean, unknown>;

property ghostCellTemplateInput

readonly ghostCellTemplateInput: _angular_core.InputSignal<TemplateRef<void>>;

property ghostCellTemplateQuery

readonly ghostCellTemplateQuery: Signal<TemplateRef<any>>;

property headerCheckboxable

readonly headerCheckboxable: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

property headerClass

readonly headerClass: _angular_core.InputSignal<
    | string
    | ((data: { column: TableColumn }) => string | Record<string, boolean>)
>;

property headerTemplateInput

readonly headerTemplateInput: _angular_core.InputSignal<
    TemplateRef<HeaderCellContext>
>;

property headerTemplateQuery

readonly headerTemplateQuery: Signal<TemplateRef<any>>;

property isTreeColumn

readonly isTreeColumn: _angular_core.InputSignalWithTransform<boolean, unknown>;

property maxWidth

readonly maxWidth: _angular_core.InputSignalWithTransform<
    number,
    string | number
>;

property minWidth

readonly minWidth: _angular_core.InputSignalWithTransform<
    number,
    string | number
>;

property name

readonly name: _angular_core.InputSignal<string>;

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    DataTableColumnDirective<any>,
    'ngx-datatable-column',
    never,
    {
        name: { alias: 'name'; required: false; isSignal: true };
        prop: { alias: 'prop'; required: false; isSignal: true };
        bindAsUnsafeHtml: {
            alias: 'bindAsUnsafeHtml';
            required: false;
            isSignal: true;
        };
        frozenLeft: { alias: 'frozenLeft'; required: false; isSignal: true };
        frozenRight: { alias: 'frozenRight'; required: false; isSignal: true };
        flexGrow: { alias: 'flexGrow'; required: false; isSignal: true };
        resizeable: { alias: 'resizeable'; required: false; isSignal: true };
        comparator: { alias: 'comparator'; required: false; isSignal: true };
        pipe: { alias: 'pipe'; required: false; isSignal: true };
        sortable: { alias: 'sortable'; required: false; isSignal: true };
        draggable: { alias: 'draggable'; required: false; isSignal: true };
        canAutoResize: {
            alias: 'canAutoResize';
            required: false;
            isSignal: true;
        };
        minWidth: { alias: 'minWidth'; required: false; isSignal: true };
        width: { alias: 'width'; required: false; isSignal: true };
        maxWidth: { alias: 'maxWidth'; required: false; isSignal: true };
        checkboxable: { alias: 'checkboxable'; required: false; isSignal: true };
        headerCheckboxable: {
            alias: 'headerCheckboxable';
            required: false;
            isSignal: true;
        };
        headerClass: { alias: 'headerClass'; required: false; isSignal: true };
        cellClass: { alias: 'cellClass'; required: false; isSignal: true };
        isTreeColumn: { alias: 'isTreeColumn'; required: false; isSignal: true };
        treeLevelIndent: {
            alias: 'treeLevelIndent';
            required: false;
            isSignal: true;
        };
        summaryFunc: { alias: 'summaryFunc'; required: false; isSignal: true };
        summaryTemplate: {
            alias: 'summaryTemplate';
            required: false;
            isSignal: true;
        };
        cellTemplateInput: {
            alias: 'cellTemplate';
            required: false;
            isSignal: true;
        };
        headerTemplateInput: {
            alias: 'headerTemplate';
            required: false;
            isSignal: true;
        };
        treeToggleTemplateInput: {
            alias: 'treeToggleTemplate';
            required: false;
            isSignal: true;
        };
        ghostCellTemplateInput: {
            alias: 'ghostCellTemplate';
            required: false;
            isSignal: true;
        };
    },
    {},
    [
        'cellTemplateQuery',
        'headerTemplateQuery',
        'treeToggleTemplateQuery',
        'ghostCellTemplateQuery'
    ],
    never,
    true,
    never
>;

property ɵfac

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

property pipe

readonly pipe: _angular_core.InputSignal<PipeTransform>;

property prop

readonly prop: _angular_core.InputSignal<TableColumnProp>;

property resizeable

readonly resizeable: _angular_core.InputSignalWithTransform<
    boolean,
    string | boolean
>;

property sortable

readonly sortable: _angular_core.InputSignalWithTransform<
    boolean,
    string | boolean
>;

property summaryFunc

readonly summaryFunc: _angular_core.InputSignal<(cells: any[]) => any>;

property summaryTemplate

readonly summaryTemplate: _angular_core.InputSignal<TemplateRef<any>>;

property treeLevelIndent

readonly treeLevelIndent: _angular_core.InputSignal<number>;

property treeToggleTemplateInput

readonly treeToggleTemplateInput: _angular_core.InputSignal<TemplateRef<any>>;

property treeToggleTemplateQuery

readonly treeToggleTemplateQuery: Signal<TemplateRef<any>>;

property width

readonly width: _angular_core.InputSignalWithTransform<number, string | number>;

class DataTableColumnGhostCellDirective

class DataTableColumnGhostCellDirective {}

property ɵdir

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

property ɵfac

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

method ngTemplateContextGuard

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

class DataTableColumnHeaderDirective

class DataTableColumnHeaderDirective {}

property ɵdir

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

property ɵfac

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

method ngTemplateContextGuard

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

class DatatableComponent

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

constructor

constructor();

property activate

readonly activate: _angular_core.OutputEmitterRef<ActivateEvent<TRow>>;

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

property allRowsSelected

readonly allRowsSelected: _angular_core.Signal<boolean>;

Returns if all rows are selected.

property bodyHeight

readonly bodyHeight: _angular_core.Signal<number>;

property checkRowListChanges

readonly checkRowListChanges: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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.

property checkRowPropertyChanges

readonly checkRowPropertyChanges: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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.

property columnMode

readonly columnMode: _angular_core.InputSignal<ColumnMode>;

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

property columns

readonly columns: _angular_core.InputSignal<TableColumn<any>[]>;

Columns to be displayed.

property columnTemplates

readonly columnTemplates: _angular_core.Signal<
    readonly DataTableColumnDirective<TRow>[]
>;

Column templates gathered from ContentChildren if described in your markup.

property correctedOffset

readonly correctedOffset: _angular_core.Signal<number>;

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

property count

readonly count: _angular_core.InputSignalWithTransform<number, unknown>;

The total count of all rows. Default value: 0

property cssClasses

readonly cssClasses: _angular_core.InputSignal<_swimlane_ngx_datatable.NgxDatatableCssClasses>;

Css class overrides

property disableRowCheck

readonly disableRowCheck: _angular_core.InputSignal<(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

readonly displayCheck: _angular_core.InputSignal<
    (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

readonly enableClearingSortState: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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

readonly externalPaging: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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

property externalSorting

readonly externalSorting: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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

property footerHeight

readonly footerHeight: _angular_core.InputSignalWithTransform<number, unknown>;

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

property ghostLoadingIndicator

readonly ghostLoadingIndicator: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

Show ghost loaders on each cell. Default value: false

property groupedRows

readonly groupedRows: _angular_core.InputSignal<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

readonly groupExpansionDefault: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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

readonly groupRowsBy: _angular_core.InputSignal<keyof TRow>;

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

property headerHeight

readonly headerHeight: _angular_core.InputSignal<number | 'auto'>;

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

property limit

readonly limit: _angular_core.InputSignalWithTransform<number, unknown>;

The page size to be shown. Default value: undefined

property loadingIndicator

readonly loadingIndicator: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

Show the linear loading bar. Default value: false

property messages

readonly messages: _angular_core.InputSignal<_swimlane_ngx_datatable.NgxDatatableMessages>;

Message overrides for localization

property offset

readonly offset: _angular_core.ModelSignal<number>;

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

property ɵcmp

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

property ɵfac

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

property page

readonly page: _angular_core.OutputEmitterRef<PageEvent>;

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

property pageSize

readonly pageSize: _angular_core.Signal<number>;

property reorder

readonly reorder: _angular_core.OutputEmitterRef<ReorderEvent>;

Columns were re-ordered.

property reorderable

readonly reorderable: _angular_core.InputSignalWithTransform<boolean, unknown>;

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

property resize

readonly resize: _angular_core.OutputEmitterRef<ColumnResizeEvent>;

Column was resized.

property rowClass

readonly rowClass: _angular_core.InputSignal<
    (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

readonly rowCount: _angular_core.Signal<number>;

property rowDetail

rowDetail?: DatatableRowDetailDirective<any>;

Row Detail templates gathered from the ContentChild

property rowDiffer

rowDiffer: IterableDiffer<TRow>;

property rowDragEvents

readonly rowDragEvents: _angular_core.OutputEmitterRef<DragEventData>;

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

property rowDraggable

readonly rowDraggable: _angular_core.InputSignalWithTransform<boolean, unknown>;

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

readonly rowHeight: _angular_core.InputSignal<
    number | 'auto' | ((row: TRow) => number)
>;

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

property rowIdentity

readonly rowIdentity: _angular_core.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)

property rows

readonly rows: _angular_core.InputSignal<TRow[]>;

Rows that are displayed in the table.

property scroll

readonly scroll: _angular_core.OutputEmitterRef<ScrollEvent>;

Body was scrolled typically in a scrollbarV:true scenario.

property scrollbarH

readonly scrollbarH: _angular_core.InputSignalWithTransform<boolean, unknown>;

Enable horz scrollbars

property scrollbarV

readonly scrollbarV: _angular_core.InputSignalWithTransform<boolean, unknown>;

Enable vertical scrollbars

property scrollbarVDynamic

readonly scrollbarVDynamic: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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

readonly select: _angular_core.OutputEmitterRef<SelectEvent<TRow>>;

A cell or row was selected.

Deprecated

Use two-way binding on selected instead.

Before:

<ngx-datatable [selected]="mySelection" (select)="onSelect($event)"></ngx-datatable>

After:

<ngx-datatable [selected]="mySelection" (selectedChange)="onSelect({selected: $event})"></ngx-datatable>
<!-- or -->
<ngx-datatable [(selected)]="mySelection"></ngx-datatable>

property selectAllRowsOnPage

readonly selectAllRowsOnPage: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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

property selectCheck

readonly selectCheck: _angular_core.InputSignal<
    (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

readonly selected: _angular_core.ModelSignal<TRow[]>;

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

property selectionType

readonly selectionType: _angular_core.InputSignal<SelectionType>;

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

property sort

readonly sort: _angular_core.OutputEmitterRef<SortEvent>;

Column sort was invoked.

Deprecated

Use two-way binding on sorts instead.

Before:

<ngx-datatable [sorts]="mySorts" (sort)="onSort($event)"></ngx-datatable>

After:

<ngx-datatable [sorts]="mySorts" (sortsChange)="onSort({sorts: $event})"></ngx-datatable>
<!-- or -->
<ngx-datatable [(sorts)]="mySorts"></ngx-datatable>

property sorts

readonly sorts: _angular_core.ModelSignal<SortPropDir[]>;

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

property sortType

readonly sortType: _angular_core.InputSignal<SortType>;

The type of sorting

property summaryHeight

readonly summaryHeight: _angular_core.InputSignalWithTransform<number, unknown>;

A height of summary row

property summaryPosition

readonly summaryPosition: _angular_core.InputSignal<string>;

A property holds a summary row position: top/bottom

property summaryRow

readonly summaryRow: _angular_core.InputSignalWithTransform<boolean, unknown>;

A flag for switching summary row on / off

property swapColumns

readonly swapColumns: _angular_core.InputSignalWithTransform<boolean, unknown>;

Swap columns on re-order columns or move them.

property tableContextmenu

readonly tableContextmenu: _angular_core.OutputEmitterRef<
    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

readonly targetMarkerTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;

Template for the target marker of drag target columns.

property trackByProp

readonly trackByProp: _angular_core.InputSignal<keyof TRow>;

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

property treeAction

readonly treeAction: _angular_core.OutputEmitterRef<{
    row: TRow;
    rowIndex: number;
}>;

A row was expanded ot collapsed for tree

property treeFromRelation

readonly treeFromRelation: _angular_core.InputSignal<string>;

Tree from relation

property treeToRelation

readonly treeToRelation: _angular_core.InputSignal<string>;

Tree to relation

property verticalScrollVisible

protected verticalScrollVisible: boolean;

property virtualization

readonly virtualization: _angular_core.InputSignalWithTransform<
    boolean,
    unknown
>;

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 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 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: (selected: TRow[]) => void;

A row was selected from body

method onColumnContextmenu

onColumnContextmenu: ({
    event,
    column,
}: {
    event: MouseEvent;
    column: TableColumnInternal;
}) => 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: (
    forceIdx?: number,
    allowBleed?: boolean
) => TableColumnInternal[];

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 scrollToRow

scrollToRow: (row: TRow, options?: ScrollToRowOptions) => void;

class DatatableFooterDirective

class DatatableFooterDirective {}

property ɵdir

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

property ɵfac

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

property template

readonly template: _angular_core.Signal<TemplateRef<any>>;

class DataTableFooterTemplateDirective

class DataTableFooterTemplateDirective {}

property ɵdir

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

property ɵfac

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

method ngTemplateContextGuard

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

class DatatableGroupHeaderDirective

class DatatableGroupHeaderDirective<TRow extends Row = any> {}

property checkboxable

readonly checkboxable: _angular_core.InputSignal<boolean>;

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

property ɵdir

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

property ɵfac

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

property rowHeight

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

Row height is required when virtual scroll is enabled.

property template

readonly template: _angular_core.Signal<TemplateRef<any>>;

property toggle

readonly toggle: _angular_core.OutputEmitterRef<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: _angular_core.ɵɵDirectiveDeclaration<
    DatatableGroupHeaderTemplateDirective,
    '[ngx-datatable-group-header-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

method ngTemplateContextGuard

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

class DatatablePagerComponent

class DatatablePagerComponent {}

Use this component to construct custom table footer with standard pagination.

It must be used inside the ngx-datatable-footer

Example 1

<ngx-datatable>
  ...
  <ngx-datatable-footer>
    <ng-template>
       <app-custom-content />
       <ngx-datatable-pager />
    </ng-template>
  </ngx-datatable-footer>
</ngx-datatable>

property canNext

protected readonly canNext: _angular_core.Signal<boolean>;

property canPrevious

protected readonly canPrevious: _angular_core.Signal<boolean>;

property count

protected readonly count: _angular_core.Signal<number>;

property messages

readonly messages: any;

property ɵcmp

static ɵcmp: _angular_core.ɵɵComponentDeclaration<
    DatatablePagerComponent,
    'ngx-datatable-pager',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatatablePagerComponent, never>;

property page

protected readonly page: _angular_core.Signal<number>;

property pagerLeftArrowIcon

protected readonly pagerLeftArrowIcon: _angular_core.Signal<string>;

property pagerNextIcon

protected readonly pagerNextIcon: _angular_core.Signal<string>;

property pagerPreviousIcon

protected readonly pagerPreviousIcon: _angular_core.Signal<string>;

property pagerRightArrowIcon

protected readonly pagerRightArrowIcon: _angular_core.Signal<string>;

property pages

protected readonly pages: _angular_core.Signal<Page[]>;

property pageSize

protected readonly pageSize: _angular_core.Signal<number>;

property totalPages

protected readonly totalPages: _angular_core.Signal<number>;

method nextPage

protected nextPage: () => void;

method prevPage

protected prevPage: () => void;

method selectPage

protected selectPage: (page: number) => void;

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: _angular_core.ɵɵComponentDeclaration<
    DatatableRowDefComponent,
    'datatable-row-def',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵ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: _angular_core.ɵɵDirectiveDeclaration<
    DatatableRowDefDirective,
    '[rowDef]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵ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: _angular_core.ɵɵDirectiveDeclaration<
    DatatableRowDetailDirective<any>,
    'ngx-datatable-row-detail',
    never,
    {
        rowHeight: { alias: 'rowHeight'; required: false; isSignal: true };
        _templateInput: { alias: 'template'; required: false; isSignal: true };
    },
    { toggle: 'toggle' },
    ['_templateQuery'],
    never,
    true,
    never
>;

property ɵfac

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

property rowHeight

readonly rowHeight: _angular_core.InputSignal<
    number | ((row?: TRow, index?: number) => number)
>;

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

property template

readonly template: _angular_core.Signal<TemplateRef<RowDetailContext<TRow>>>;

property toggle

readonly toggle: _angular_core.OutputEmitterRef<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: _angular_core.ɵɵDirectiveDeclaration<
    DatatableRowDetailTemplateDirective,
    '[ngx-datatable-row-detail-template]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: _angular_core.ɵɵ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: _angular_core.InputSignalWithTransform<boolean, unknown>;

property ɵdir

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

property ɵfac

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

class NgxDatatableModule

class NgxDatatableModule {}

property ɵfac

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

property ɵinj

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

property ɵmod

static ɵmod: _angular_core.ɵɵ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 DatatablePagerComponent,
        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 DatatablePagerComponent,
        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: 'header';

interface ContextMenuEventBody

interface ContextMenuEventBody<TRow> {}

property content

content: RowOrGroup<TRow>;

property event

event: MouseEvent;

property type

type: '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;

property treeStatusCollapsed

treeStatusCollapsed: string;

property treeStatusExpanded

treeStatusExpanded: string;

property treeStatusLoading

treeStatusLoading: 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 ariaGroupHeaderCheckboxMessage

ariaGroupHeaderCheckboxMessage: string;

Group header checkbox aria label

property ariaHeaderCheckboxMessage

ariaHeaderCheckboxMessage: string;

Header checkbox aria label

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 ariaRowCheckboxMessage

ariaRowCheckboxMessage: string;

Row checkbox aria label

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 ScrollToRowOptions

interface ScrollToRowOptions {}

property behavior

behavior?: ScrollBehavior;

property block

block?: ScrollLogicalPosition;

interface SelectEvent

interface SelectEvent<TRow> {}

@deprecated. Use two-way binding instead. See DatatableComponent.select

property selected

selected: TRow[];

interface SortEvent

interface SortEvent {}

Deprecated
See DatatableComponent.sort

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) => 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

Type Aliases

type ColumnMode

type ColumnMode = (typeof ColumnMode)[keyof typeof ColumnMode];

type ContextMenuEvent

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

type ContextmenuType

type ContextmenuType = (typeof ContextmenuType)[keyof typeof ContextmenuType];

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 SelectionType

type SelectionType = (typeof SelectionType)[keyof typeof SelectionType];

type SortDirection

type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];

type SortType

type SortType = (typeof SortType)[keyof typeof SortType];

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)

types/swimlane-ngx-datatable.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 6 days ago.
Package analyzed in 5888 ms.
Missing or incorrect documentation? Open an issue for this package.

@swimlane/ngx-datatable

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable ColumnMode

Deprecated

variable ContextmenuType

Deprecated

variable SelectionType

Deprecated

variable SortDirection

Deprecated

variable SortType

Deprecated

Functions

function providedNgxDatatableConfig

Parameter overrides

function toInternalColumn

function toPublicColumn

Classes

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 cellTemplateInput

property cellTemplateQuery

property checkboxable

property column

property comparator

property draggable

property flexGrow

property frozenLeft

property frozenRight

property ghostCellTemplateInput

property ghostCellTemplateQuery

property headerCheckboxable

property headerClass

property headerTemplateInput

property headerTemplateQuery

property isTreeColumn

property maxWidth

property minWidth

property name

property ɵdir

property ɵfac

property pipe

property prop

property resizeable

property sortable

property summaryFunc

property summaryTemplate

property treeLevelIndent

property treeToggleTemplateInput

property treeToggleTemplateQuery

property width

class DataTableColumnGhostCellDirective

property ɵdir

property ɵfac

method ngTemplateContextGuard

class DataTableColumnHeaderDirective

property ɵdir

property ɵfac

method ngTemplateContextGuard

class DatatableComponent

constructor