@swimlane/ngx-datatable

@swimlane/ngx-datatable

Version 21.0.0-alpha.1
Published 2 months 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

Functions

function adjustColumnWidths

adjustColumnWidths: (allColumns: TableColumn[], expectedWidth: number) => void;

Adjusts the column widths. Inspired by: https://github.com/facebook/fixed-data-table/blob/master/src/FixedDataTableWidthHelper.js

function camelCase

camelCase: (str: string) => string;

Converts strings from something to camel case http://stackoverflow.com/questions/10425287/convert-dash-separated-string-to-camelcase

function columnGroupWidths

columnGroupWidths: (
    groups: TableColumnGroup,
    all: TableColumn[]
) => ColumnGroupWidth;

Returns the widths of all group sets of a column

function columnsByPin

columnsByPin: (cols: TableColumn[]) => TableColumnGroup;

Returns the columns by pin.

function columnsByPinArr

columnsByPinArr: (val: TableColumn[]) => PinnedColumns[];

function columnsTotalWidth

columnsTotalWidth: (columns: TableColumn[], prop?: keyof TableColumn) => number;

Calculates the total width of all columns and their groups

function columnTotalWidth

columnTotalWidth: (columns: TableColumn[], prop?: string) => number;

Calculates the total width of all columns and their groups

function deCamelCase

deCamelCase: (str: string) => string;

Converts strings from camel case to words http://stackoverflow.com/questions/7225407/convert-camelcasetext-to-camel-case-text

function deepValueGetter

deepValueGetter: (obj: any, path: string) => any;

Returns a deep object given a string. zoo['animal.type']

function emptyStringGetter

emptyStringGetter: () => string;

Always returns the empty string ''

function forceFillColumnWidths

forceFillColumnWidths: (
    allColumns: TableColumn[],
    expectedWidth: number,
    startIdx: number,
    allowBleed: boolean,
    defaultColWidth?: number,
    verticalScrollWidth?: number
) => void;

Forces the width of the columns to distribute equally but overflowing when necessary
Rules:
- If combined withs are less than the total width of the grid, proportion the widths given the min / max / normal widths to fill the width.
- If the combined widths, exceed the total width of the grid, use the standard widths.
- If a column is resized, it should always use that width
- The proportional widths should never fall below min size if specified.
- If the grid starts off small but then becomes greater than the size ( + / - ) the width should use the original width; not the newly proportioned widths.

function getterForProp

getterForProp: (prop: TableColumnProp) => ValueGetter;

Returns the appropriate getter function for this kind of prop. If prop == null, returns the emptyStringGetter.

function getTotalFlexGrow

getTotalFlexGrow: (columns: TableColumn[]) => number;

Calculates the Total Flex Grow

function groupRowsByParents

groupRowsByParents: <TRow>(
    rows: TRow[],
    from?: OptionalValueGetter,
    to?: OptionalValueGetter
) => TRow[];

This functions rearrange items by their parents Also sets the level value to each of the items
Note: Expecting each item has a property called parentId Note: This algorithm will fail if a list has two or more items with same ID NOTE: This algorithm will fail if there is a deadlock of relationship
For example,
Input
id -> parent 1 -> 0 2 -> 0 3 -> 1 4 -> 1 5 -> 2 7 -> 8 6 -> 3
Output id -> level 1 -> 0 --3 -> 1 ----6 -> 2 --4 -> 1 2 -> 0 --5 -> 1 7 -> 8
Parameter rows

function id

id: () => string;

Creates a unique object id. http://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js

function isNullOrUndefined

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

function nextSortDir

nextSortDir: (
    sortType: SortType,
    current: SortDirection | 'desc' | 'asc'
) => SortDirection | undefined;

Gets the next sort direction

function numericIndexGetter

numericIndexGetter: (row: any[], index: number) => any;

Returns the value at this numeric index.
Parameter row
array of values
Parameter index
numeric index
Returns
any or '' if invalid index

function optionalGetterForProp

optionalGetterForProp: (prop: TableColumnProp) => OptionalValueGetter;

function orderByComparator

orderByComparator: (a: any, b: any) => number;

Adapted from fueld-ui on 6/216 https://github.com/FuelInteractive/fuel-ui/tree/master/src/pipes/OrderBy

function selectRows

selectRows: <TRow>(selected: TRow[], row: TRow, comparefn: any) => TRow[];

function selectRowsBetween

selectRowsBetween: <TRow>(
    selected: TRow[],
    rows: TRow[],
    index: number,
    prevIndex: number
) => TRow[];

function setColumnDefaults

setColumnDefaults: (columns: TableColumn[], defaultColumnWidth?: number) => void;

Sets the column defaults

function shallowValueGetter

shallowValueGetter: (obj: any, fieldName: string) => any;

Returns the value of a field. (more efficient than deepValueGetter)
Parameter obj
object containing the field
Parameter fieldName
field name string

function sortGroupedRows

sortGroupedRows: <TRow>(
    groupedRows: Group<TRow>[],
    columns: TableColumn[],
    dirs: SortPropDir[],
    sortOnGroupHeader: SortPropDir
) => Group<TRow>[];

function sortRows

sortRows: <TRow>(
    rows: TRow[],
    columns: TableColumn[],
    dirs: SortPropDir[]
) => TRow[];

creates a shallow copy of the rows input and returns the sorted copy. this function does not sort the rows argument in place

function throttle

throttle: (func: any, wait: number, options?: any) => (this: any) => any;

Throttle a function

function throttleable

throttleable: (
    duration: number,
    options?: any
) => (
    target: any,
    key: PropertyKey,
    descriptor: PropertyDescriptor
) => { configurable: boolean; enumerable: boolean; get: () => any };

Throttle decorator
class MyClass { throttleable(10) myFn() { ... } }

function translateTemplates

translateTemplates: <TRow>(
    templates: DataTableColumnDirective<TRow>[]
) => TableColumn[];

Translates templates definitions to objects

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 DataTableBodyCellComponent

class DataTableBodyCellComponent<
    TRow extends {
        level?: number;
    } = any
> implements DoCheck, OnDestroy {}

constructor

constructor();

property activate

activate: EventEmitter<ActivateEvent<TRow>>;

property cellContext

cellContext: CellContext<TRow>;

property cellTemplate

cellTemplate: ViewContainerRef;

property column

column: TableColumn<any>;

property columnCssClasses

readonly columnCssClasses: string;

property disable$

disable$: BehaviorSubject<boolean>;

property displayCheck

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

property expanded

expanded: boolean;

property ghostLoaderTemplate

ghostLoaderTemplate: ViewContainerRef;

property ghostLoadingIndicator

ghostLoadingIndicator: boolean;

property group

group: TRow[];

property height

readonly height: string | number;

property isFocused

isFocused: boolean;

property isSelected

isSelected: boolean;

property maxWidth

readonly maxWidth: number;

property minWidth

readonly minWidth: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableBodyCellComponent<any>,
    'datatable-body-cell',
    never,
    {
        displayCheck: { alias: 'displayCheck'; required: false };
        disable$: { alias: 'disable$'; required: false };
        group: { alias: 'group'; required: false };
        rowHeight: { alias: 'rowHeight'; required: false };
        isSelected: { alias: 'isSelected'; required: false };
        expanded: { alias: 'expanded'; required: false };
        rowIndex: { alias: 'rowIndex'; required: false };
        column: { alias: 'column'; required: false };
        row: { alias: 'row'; required: false };
        sorts: { alias: 'sorts'; required: false };
        treeStatus: { alias: 'treeStatus'; required: false };
        ghostLoadingIndicator: {
            alias: 'ghostLoadingIndicator';
            required: false;
        };
    },
    { activate: 'activate'; treeAction: 'treeAction' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property row

row: { level?: number };

property rowHeight

rowHeight: number;

property rowIndex

rowIndex: number;

property sanitizedValue

sanitizedValue: string;

property sortDir

sortDir: SortDirection;

property sorts

sorts: SortPropDir[];

property treeAction

treeAction: EventEmitter<any>;

property treeStatus

treeStatus: TreeStatus;

property value

value: any;

property width

readonly width: number;

method calcLeftMargin

calcLeftMargin: (column: TableColumn, row: RowOrGroup<TRow>) => number;

method calcSortDir

calcSortDir: (sorts: SortPropDir[]) => SortDirection;

method checkValueUpdates

checkValueUpdates: () => void;

method ngDoCheck

ngDoCheck: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onBlur

onBlur: () => void;

method onCheckboxChange

onCheckboxChange: (event: MouseEvent | KeyboardEvent) => void;

method onClick

onClick: (event: MouseEvent) => void;

method onDblClick

onDblClick: (event: MouseEvent) => void;

method onFocus

onFocus: () => void;

method onKeyDown

onKeyDown: (event: KeyboardEvent) => void;

method onTreeAction

onTreeAction: () => void;

method stripHtml

stripHtml: (html: string) => string;

class DataTableBodyComponent

class DataTableBodyComponent<
    TRow extends {
        treeStatus?: TreeStatus;
    } = any
> implements OnInit, OnDestroy {}

constructor

constructor();

Creates an instance of DataTableBodyComponent.

property activate

activate: EventEmitter<ActivateEvent<TRow>>;

property bodyHeight

bodyHeight: string | number;

property bodyWidth

readonly bodyWidth: string;

property bottomSummaryRowsStyles

bottomSummaryRowsStyles: any;

Calculate bottom summary row offset for scrollbar mode. For more information about cache and offset calculation see description for rowsStyles signal
Returns
the CSS3 style to be applied

property cd

cd: ChangeDetectorRef;

property columnGroupWidths

columnGroupWidths: ColumnGroupWidth;

property columns

columns: any[];

property detailToggle

detailToggle: EventEmitter<any>;

property disableRowCheck

disableRowCheck: (row: TRow) => boolean;

property displayCheck

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

property externalPaging

externalPaging: boolean;

property getDetailRowHeight

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

Get the height of the detail row.

property getGroupHeaderRowHeight

getGroupHeaderRowHeight: (row?: any, index?: any) => number;

property ghostLoadingIndicator

ghostLoadingIndicator: boolean;

property groupedRows

groupedRows: Group<TRow>[];

property groupExpansionDefault

groupExpansionDefault: boolean;

property groupHeader

groupHeader: DatatableGroupHeaderDirective<any>;

property groupRowsBy

groupRowsBy: string | number | symbol;

property indexes

indexes: any;

property innerWidth

innerWidth: number;

property listener

listener: any;

property loadingIndicator

loadingIndicator: boolean;

property offset

offset: number;

property offsetX

offsetX: number;

property offsetY

offsetY: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableBodyComponent<any>,
    'datatable-body',
    never,
    {
        rowDefTemplate: { alias: 'rowDefTemplate'; required: false };
        scrollbarV: { alias: 'scrollbarV'; required: false };
        scrollbarH: { alias: 'scrollbarH'; required: false };
        loadingIndicator: { alias: 'loadingIndicator'; required: false };
        ghostLoadingIndicator: {
            alias: 'ghostLoadingIndicator';
            required: false;
        };
        externalPaging: { alias: 'externalPaging'; required: false };
        rowHeight: { alias: 'rowHeight'; required: false };
        offsetX: { alias: 'offsetX'; required: false };
        selectionType: { alias: 'selectionType'; required: false };
        selected: { alias: 'selected'; required: false };
        rowIdentity: { alias: 'rowIdentity'; required: false };
        rowDetail: { alias: 'rowDetail'; required: false };
        groupHeader: { alias: 'groupHeader'; required: false };
        selectCheck: { alias: 'selectCheck'; required: false };
        displayCheck: { alias: 'displayCheck'; required: false };
        trackByProp: { alias: 'trackByProp'; required: false };
        rowClass: { alias: 'rowClass'; required: false };
        groupedRows: { alias: 'groupedRows'; required: false };
        groupExpansionDefault: {
            alias: 'groupExpansionDefault';
            required: false;
        };
        innerWidth: { alias: 'innerWidth'; required: false };
        groupRowsBy: { alias: 'groupRowsBy'; required: false };
        virtualization: { alias: 'virtualization'; required: false };
        summaryRow: { alias: 'summaryRow'; required: false };
        summaryPosition: { alias: 'summaryPosition'; required: false };
        summaryHeight: { alias: 'summaryHeight'; required: false };
        rowDraggable: { alias: 'rowDraggable'; required: false };
        rowDragEvents: { alias: 'rowDragEvents'; required: false };
        disableRowCheck: { alias: 'disableRowCheck'; required: false };
        pageSize: { alias: 'pageSize'; required: false };
        rows: { alias: 'rows'; required: false };
        columns: { alias: 'columns'; required: false };
        offset: { alias: 'offset'; required: false };
        rowCount: { alias: 'rowCount'; required: false };
        bodyHeight: { alias: 'bodyHeight'; required: false };
        verticalScrollVisible: {
            alias: 'verticalScrollVisible';
            required: false;
        };
    },
    {
        scroll: 'scroll';
        page: 'page';
        activate: 'activate';
        select: 'select';
        detailToggle: 'detailToggle';
        rowContextmenu: 'rowContextmenu';
        treeAction: 'treeAction';
    },
    never,
    ['[loading-indicator]', '[empty-content]'],
    true,
    never
>;

property ɵfac

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

property page

page: EventEmitter<number>;

property pageSize

pageSize: number;

property rowClass

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

property rowContextmenu

rowContextmenu: EventEmitter<{ event: MouseEvent; row: RowOrGroup<TRow> }>;

property rowCount

rowCount: number;

property rowDefTemplate

rowDefTemplate?: TemplateRef<any>;

property rowDetail

rowDetail: DatatableRowDetailDirective<any>;

property rowDragEvents

rowDragEvents: EventEmitter<DragEventData>;

property rowDraggable

rowDraggable: boolean;

property rowExpansions

rowExpansions: any[];

property rowHeight

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

property rowHeightsCache

rowHeightsCache: any;

property rowIdentity

rowIdentity: any;

property rowIndexes

rowIndexes: WeakMap<any, any>;

property rows

rows: TRow[];

property rowsStyles

rowsStyles: any;

Calculates the styles for the row so that the rows can be moved in 2D space during virtual scroll inside the DOM. In the below case the Y position is manipulated. As an example, if the height of row 0 is 30 px and row 1 is 100 px then following styles are generated:
transform: translate3d(0px, 0px, 0px); -> row0 transform: translate3d(0px, 30px, 0px); -> row1 transform: translate3d(0px, 130px, 0px); -> row2
Row heights have to be calculated based on the row heights cache as we wont be able to determine which row is of what height before hand. In the above case the positionY of the translate3d for row2 would be the sum of all the heights of the rows before it (i.e. row0 and row1).
Returns
the CSS3 style to be applied

property rowsToRender

rowsToRender: any;

property rowTrackingFn

rowTrackingFn: TrackByFunction<RowOrGroup<TRow>>;

property scroll

scroll: EventEmitter<ScrollEvent>;

property scrollbarH

scrollbarH: boolean;

property scrollbarV

scrollbarV: boolean;

property scroller

scroller: ScrollerComponent;

property scrollHeight

scrollHeight: any;

Property that would calculate the height of scroll bar based on the row heights cache for virtual scroll and virtualization. Other scenarios calculate scroll height automatically (as height will be undefined).

property select

select: EventEmitter<{ selected: TRow[] }>;

property selectCheck

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

property selected

selected: any[];

property selectEnabled

readonly selectEnabled: boolean;

Returns if selection is enabled.

property selectionType

selectionType: SelectionType;

property summaryHeight

summaryHeight: number;

property summaryPosition

summaryPosition: string;

property summaryRow

summaryRow: boolean;

property trackByProp

trackByProp: string;

property treeAction

treeAction: EventEmitter<{ row: TRow }>;

property verticalScrollVisible

verticalScrollVisible: boolean;

property virtualization

virtualization: boolean;

method drag

drag: (
    event: DragEvent,
    dragRow: RowOrGroup<TRow>,
    rowComponent: DataTableBodyRowComponent<TRow>
) => void;

method dragEnd

dragEnd: (event: DragEvent, dragRow: RowOrGroup<TRow>) => void;

method dragEnter

dragEnter: (
    event: DragEvent,
    dropRow: RowOrGroup<TRow>,
    rowComponent: DataTableBodyRowComponent<TRow>
) => void;

method dragLeave

dragLeave: (
    event: DragEvent,
    dropRow: RowOrGroup<TRow>,
    rowComponent: DataTableBodyRowComponent<TRow>
) => void;

method dragOver

dragOver: (event: DragEvent, dropRow: RowOrGroup<TRow>) => void;

method drop

drop: (
    event: DragEvent,
    dropRow: RowOrGroup<TRow>,
    rowComponent: DataTableBodyRowComponent<TRow>
) => void;

method getAdjustedViewPortIndex

getAdjustedViewPortIndex: () => number;

Gets the index for the view port

method getGroupHeight

getGroupHeight: (group: Group<TRow>) => number;

Parameter group
the group with all rows

method getRowAndDetailHeight

getRowAndDetailHeight: (row: TRow) => number;

Calculate row height based on the expanded state of the row.

method getRowExpanded

getRowExpanded: (row: RowOrGroup<TRow>) => boolean;

Returns if the row was expanded and set default row expansion when row expansion is empty

method getRowExpandedIdx

getRowExpandedIdx: (
    row: RowOrGroup<TRow>,
    expanded: RowOrGroup<TRow>[]
) => number;

method getRowHeight

getRowHeight: (row: RowOrGroup<TRow>) => number;

Get the row height

method getRowIndex

getRowIndex: (row: RowOrGroup<TRow>) => number;

Gets the row index given a row

method isGroup

protected isGroup: {
    (row: RowOrGroup<TRow>[]): row is Group<TRow>[];
    (row: RowOrGroup<TRow>): row is Group<TRow>;
};

method isRow

protected isRow: (row: RowOrGroup<TRow>) => row is TRow;

method ngOnDestroy

ngOnDestroy: () => void;

Called once, before the instance is destroyed.

method ngOnInit

ngOnInit: () => void;

Called after the constructor, initializing input properties

method onBodyScroll

onBodyScroll: (event: any) => void;

Body was scrolled, this is mainly useful for when a user is server-side pagination via virtual scroll.

method onTreeAction

onTreeAction: (row: TRow) => void;

method recalcLayout

recalcLayout: () => void;

Recalculates the table

method refreshRowHeightCache

refreshRowHeightCache: () => void;

Refreshes the full Row Height cache. Should be used when the entire row array state has changed.

method toggleAllRows

toggleAllRows: (expanded: boolean) => void;

Expand/Collapse all the rows no matter what their state is.

method toggleRowExpansion

toggleRowExpansion: (row: TRow) => void;

Toggle the Expansion of the row i.e. if the row is expanded then it will collapse and vice versa. Note that the expanded status is stored as a part of the row object itself as we have to preserve the expanded row status in case of sorting and filtering of the row set.

method updateColumnGroupWidths

updateColumnGroupWidths: () => void;

method updateIndexes

updateIndexes: () => void;

Updates the index of the rows in the viewport

method updateOffsetY

updateOffsetY: (offset?: number) => void;

Updates the Y offset given a new offset.

method updatePage

updatePage: (direction: string) => void;

Updates the page given a direction.

method updateRows

updateRows: () => RowOrGroup<TRow>[];

Updates the rows in the view port

class DataTableBodyRowComponent

class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges {}

property activate

activate: EventEmitter<ActivateEvent<TRow>>;

property columns

columns: TableColumn<any>[];

property columnsTotalWidths

readonly columnsTotalWidths: number;

property cssClass

readonly cssClass: string;

property disable$

disable$: BehaviorSubject<boolean>;

property displayCheck

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

property expanded

expanded: boolean;

property ghostLoadingIndicator

ghostLoadingIndicator: boolean;

property group

group: TRow[];

property innerWidth

innerWidth: number;

property isSelected

isSelected: boolean;

property offsetX

offsetX: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableBodyRowComponent<any>,
    'datatable-body-row',
    never,
    {
        columns: { alias: 'columns'; required: false };
        innerWidth: { alias: 'innerWidth'; required: false };
        expanded: { alias: 'expanded'; required: false };
        rowClass: { alias: 'rowClass'; required: false };
        row: { alias: 'row'; required: false };
        group: { alias: 'group'; required: false };
        isSelected: { alias: 'isSelected'; required: false };
        rowIndex: { alias: 'rowIndex'; required: false };
        displayCheck: { alias: 'displayCheck'; required: false };
        treeStatus: { alias: 'treeStatus'; required: false };
        ghostLoadingIndicator: {
            alias: 'ghostLoadingIndicator';
            required: false;
        };
        verticalScrollVisible: {
            alias: 'verticalScrollVisible';
            required: false;
        };
        disable$: { alias: 'disable$'; required: false };
        offsetX: { alias: 'offsetX'; required: false };
        rowHeight: { alias: 'rowHeight'; required: false };
    },
    { activate: 'activate'; treeAction: 'treeAction' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property row

row: {};

property rowClass

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

property rowHeight

rowHeight: number;

property rowIndex

rowIndex: number;

property treeAction

treeAction: EventEmitter<any>;

property treeStatus

treeStatus?: TreeStatus;

property verticalScrollVisible

verticalScrollVisible: boolean;

method ngDoCheck

ngDoCheck: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method onActivate

onActivate: (event: ActivateEvent<TRow>, index: number) => void;

method onKeyDown

onKeyDown: (event: KeyboardEvent) => void;

method onMouseenter

onMouseenter: (event: MouseEvent) => void;

method onTreeAction

onTreeAction: () => void;

method recalculateColumns

recalculateColumns: (val?: TableColumn<TRow>[]) => 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> 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: TemplateRef<CellContext<TRow>>;

property checkboxable

checkboxable: boolean;

property comparator

comparator: any;

property draggable

draggable: boolean;

property flexGrow

flexGrow: number;

property frozenLeft

frozenLeft: boolean;

property frozenRight

frozenRight: boolean;

property ghostCellTemplate

readonly ghostCellTemplate: TemplateRef<void>;

property headerCheckboxable

headerCheckboxable: boolean;

property headerClass

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

property headerTemplate

readonly headerTemplate: TemplateRef<HeaderCellContext>;

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: TemplateRef<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 = 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<{
    sortAscending: string;
    sortDescending: string;
    sortUnset: string;
    pagerLeftArrow: string;
    pagerRightArrow: string;
    pagerPrevious: string;
    pagerNext: string;
}>;

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<{
    emptyMessage: string;
    totalMessage: string;
    selectedMessage: string;
}>;

Message overrides for localization
emptyMessage [default] = 'No data to display' totalMessage [default] = 'total' selectedMessage [default] = 'selected'

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: Group<TRow> | 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: IterableDiffer<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: TRow | Group<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<{ selected: 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<{
    event: MouseEvent;
    type: ContextmenuType;
    content: TableColumn | RowOrGroup<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[],
    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: { selected: 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: ({ column, newValue, prevValue }: ReorderEvent) => void;

The header triggered a column re-order event.

method onColumnResize

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

The header triggered a column resize event.

method onColumnResizing

onColumnResizing: ({ column, newValue }: ColumnResizeEvent) => 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?: TableColumn[],
    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 DataTableFooterComponent

class DataTableFooterComponent {}

property curPage

readonly curPage: number;

property footerHeight

footerHeight: number;

property footerTemplate

footerTemplate: DatatableFooterDirective;

property isVisible

readonly isVisible: boolean;

property offset

offset: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableFooterComponent,
    'datatable-footer',
    never,
    {
        footerHeight: { alias: 'footerHeight'; required: false };
        rowCount: { alias: 'rowCount'; required: false };
        pageSize: { alias: 'pageSize'; required: false };
        offset: { alias: 'offset'; required: false };
        pagerLeftArrowIcon: { alias: 'pagerLeftArrowIcon'; required: false };
        pagerRightArrowIcon: { alias: 'pagerRightArrowIcon'; required: false };
        pagerPreviousIcon: { alias: 'pagerPreviousIcon'; required: false };
        pagerNextIcon: { alias: 'pagerNextIcon'; required: false };
        totalMessage: { alias: 'totalMessage'; required: false };
        footerTemplate: { alias: 'footerTemplate'; required: false };
        selectedCount: { alias: 'selectedCount'; required: false };
        selectedMessage: { alias: 'selectedMessage'; required: false };
    },
    { page: 'page' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property page

page: EventEmitter<PagerPageEvent>;

property pagerLeftArrowIcon

pagerLeftArrowIcon: string;

property pagerNextIcon

pagerNextIcon: string;

property pagerPreviousIcon

pagerPreviousIcon: string;

property pagerRightArrowIcon

pagerRightArrowIcon: string;

property pageSize

pageSize: number;

property rowCount

rowCount: number;

property selectedCount

selectedCount: number;

property selectedMessage

selectedMessage: string | boolean;

property totalMessage

totalMessage: string;

class DatatableFooterDirective

class DatatableFooterDirective {}

property footerHeight

footerHeight: number;

property ngAcceptInputType_footerHeight

static ngAcceptInputType_footerHeight: {};

property ɵdir

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

property ɵfac

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

property pagerLeftArrowIcon

pagerLeftArrowIcon: string;

property pagerNextIcon

pagerNextIcon: string;

property pagerPreviousIcon

pagerPreviousIcon: string;

property pagerRightArrowIcon

pagerRightArrowIcon: string;

property selectedMessage

selectedMessage: string | boolean;

property template

readonly template: TemplateRef<FooterContext>;

property totalMessage

totalMessage: string;

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 = 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: TemplateRef<GroupContext<TRow>>;

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 DataTableHeaderCellComponent

class DataTableHeaderCellComponent implements OnInit {}

constructor

constructor();

property allRowsSelected

allRowsSelected: boolean;

property cellContext

cellContext: HeaderCellContext;

property column

column: TableColumn<any>;

property columnContextmenu

columnContextmenu: EventEmitter<{ event: MouseEvent; column: TableColumn }>;

property columnCssClasses

readonly columnCssClasses: string;

property enableClearingSortState

enableClearingSortState: boolean;

property headerHeight

headerHeight: number;

property isCheckboxable

readonly isCheckboxable: boolean;

property isTarget

isTarget: boolean;

property maxWidth

readonly maxWidth: number;

property minWidth

readonly minWidth: number;

property name

readonly name: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableHeaderCellComponent,
    'datatable-header-cell',
    never,
    {
        sortType: { alias: 'sortType'; required: false };
        sortAscendingIcon: { alias: 'sortAscendingIcon'; required: false };
        sortDescendingIcon: { alias: 'sortDescendingIcon'; required: false };
        sortUnsetIcon: { alias: 'sortUnsetIcon'; required: false };
        isTarget: { alias: 'isTarget'; required: false };
        targetMarkerTemplate: { alias: 'targetMarkerTemplate'; required: false };
        targetMarkerContext: { alias: 'targetMarkerContext'; required: false };
        enableClearingSortState: {
            alias: 'enableClearingSortState';
            required: false;
        };
        allRowsSelected: { alias: 'allRowsSelected'; required: false };
        selectionType: { alias: 'selectionType'; required: false };
        column: { alias: 'column'; required: false };
        headerHeight: { alias: 'headerHeight'; required: false };
        sorts: { alias: 'sorts'; required: false };
    },
    { sort: 'sort'; select: 'select'; columnContextmenu: 'columnContextmenu' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property select

select: EventEmitter<void>;

property selectionType

selectionType: SelectionType;

property sort

sort: EventEmitter<InnerSortEvent>;

property sortAscendingIcon

sortAscendingIcon: string;

property sortClass

sortClass: string;

property sortDescendingIcon

sortDescendingIcon: string;

property sortDir

sortDir: SortDirection;

property sorts

sorts: SortPropDir[];

property sortType

sortType: SortType;

property sortUnsetIcon

sortUnsetIcon: string;

property tabindex

readonly tabindex: number;

property targetMarkerContext

targetMarkerContext: any;

property targetMarkerTemplate

targetMarkerTemplate: TemplateRef<any>;

property width

readonly width: number;

method calcSortClass

calcSortClass: (sortDir: SortDirection) => string;

method calcSortDir

calcSortDir: (sorts: SortPropDir[]) => any;

method enter

enter: () => void;

method ngOnInit

ngOnInit: () => void;

method onContextmenu

onContextmenu: ($event: MouseEvent) => void;

method onSort

onSort: () => void;

class DataTableHeaderComponent

class DataTableHeaderComponent implements OnDestroy, OnChanges {}

property allRowsSelected

allRowsSelected: boolean;

property columnContextmenu

columnContextmenu: EventEmitter<{ event: MouseEvent; column: TableColumn }>;

property columns

columns: any[];

property dealsWithGroup

dealsWithGroup: boolean;

property dragEventTarget

dragEventTarget?: MouseEvent;

property enableClearingSortState

enableClearingSortState: boolean;

property headerHeight

headerHeight: any;

property headerWidth

readonly headerWidth: string;

property innerWidth

innerWidth: number;

property offsetX

offsetX: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableHeaderComponent,
    'datatable-header',
    never,
    {
        sortAscendingIcon: { alias: 'sortAscendingIcon'; required: false };
        sortDescendingIcon: { alias: 'sortDescendingIcon'; required: false };
        sortUnsetIcon: { alias: 'sortUnsetIcon'; required: false };
        scrollbarH: { alias: 'scrollbarH'; required: false };
        dealsWithGroup: { alias: 'dealsWithGroup'; required: false };
        targetMarkerTemplate: { alias: 'targetMarkerTemplate'; required: false };
        enableClearingSortState: {
            alias: 'enableClearingSortState';
            required: false;
        };
        innerWidth: { alias: 'innerWidth'; required: false };
        sorts: { alias: 'sorts'; required: false };
        sortType: { alias: 'sortType'; required: false };
        allRowsSelected: { alias: 'allRowsSelected'; required: false };
        selectionType: { alias: 'selectionType'; required: false };
        reorderable: { alias: 'reorderable'; required: false };
        verticalScrollVisible: {
            alias: 'verticalScrollVisible';
            required: false;
        };
        headerHeight: { alias: 'headerHeight'; required: false };
        columns: { alias: 'columns'; required: false };
        offsetX: { alias: 'offsetX'; required: false };
    },
    {
        sort: 'sort';
        reorder: 'reorder';
        resize: 'resize';
        resizing: 'resizing';
        select: 'select';
        columnContextmenu: 'columnContextmenu';
    },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property reorder

reorder: EventEmitter<ReorderEvent>;

property reorderable

reorderable: boolean;

property resize

resize: EventEmitter<ColumnResizeEvent>;

property resizing

resizing: EventEmitter<ColumnResizeEvent>;

property scrollbarH

scrollbarH: boolean;

property select

select: EventEmitter<void>;

property selectionType

selectionType: SelectionType;

property sort

sort: EventEmitter<SortEvent>;

property sortAscendingIcon

sortAscendingIcon: string;

property sortDescendingIcon

sortDescendingIcon: string;

property sorts

sorts: SortPropDir[];

property sortType

sortType: SortType;

property sortUnsetIcon

sortUnsetIcon: string;

property targetMarkerTemplate

targetMarkerTemplate: TemplateRef<unknown>;

property verticalScrollVisible

verticalScrollVisible: boolean;

method calcNewSorts

calcNewSorts: (
    column: TableColumn,
    prevValue: SortDirection,
    newValue: SortDirection
) => SortPropDir[];

method calcStylesByGroup

calcStylesByGroup: (group: 'center' | 'right' | 'left') => NgStyle;

method getColumn

getColumn: (index: number) => any;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onColumnReordered

onColumnReordered: ({
    prevIndex,
    newIndex,
    model,
}: OrderableReorderEvent) => void;

method onColumnResized

onColumnResized: (width: number, column: TableColumn) => void;

method onColumnResizing

onColumnResizing: (width: number, column: TableColumn) => void;

method onLongPressEnd

onLongPressEnd: ({ model }: { model: TableColumn }) => void;

method onLongPressStart

onLongPressStart: ({
    event,
    model,
}: {
    event: MouseEvent;
    model: TableColumn;
}) => void;

method onSort

onSort: ({ column, prevValue, newValue }: InnerSortEvent) => void;

method onTargetChanged

onTargetChanged: ({
    prevIndex,
    newIndex,
    initialIndex,
}: TargetChangedEvent) => void;

method setStylesByGroup

setStylesByGroup: () => void;

class DataTablePagerComponent

class DataTablePagerComponent {}

property change

change: EventEmitter<PagerPageEvent>;

property count

count: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTablePagerComponent,
    'datatable-pager',
    never,
    {
        pagerLeftArrowIcon: { alias: 'pagerLeftArrowIcon'; required: false };
        pagerRightArrowIcon: { alias: 'pagerRightArrowIcon'; required: false };
        pagerPreviousIcon: { alias: 'pagerPreviousIcon'; required: false };
        pagerNextIcon: { alias: 'pagerNextIcon'; required: false };
        size: { alias: 'size'; required: false };
        count: { alias: 'count'; required: false };
        page: { alias: 'page'; required: false };
    },
    { change: 'change' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property page

page: number;

property pagerLeftArrowIcon

pagerLeftArrowIcon: string;

property pagerNextIcon

pagerNextIcon: string;

property pagerPreviousIcon

pagerPreviousIcon: string;

property pagerRightArrowIcon

pagerRightArrowIcon: string;

property pages

pages: Page[];

property size

size: number;

property totalPages

readonly totalPages: number;

method calcPages

calcPages: (page?: number) => Page[];

method canNext

canNext: () => boolean;

method canPrevious

canPrevious: () => boolean;

method nextPage

nextPage: () => void;

method prevPage

prevPage: () => void;

method selectPage

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

property ɵfac

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

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 = 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: TemplateRef<RowDetailContext<TRow>>;

property toggle

toggle: EventEmitter<any>;

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 DataTableRowWrapperComponent

class DataTableRowWrapperComponent<TRow = any>
    implements DoCheck, OnInit, OnChanges {}

property checkBoxInput

checkBoxInput: ElementRef<HTMLInputElement>;

property detailRowHeight

detailRowHeight: number;

property disable$

disable$: BehaviorSubject<boolean>;

property disableCheck

disableCheck: (row: RowOrGroup<TRow>) => boolean;

property expanded

expanded: boolean;

property group

protected group: any;

property groupContext

groupContext?: GroupContext<TRow>;

property groupedRows

groupedRows: Group<TRow>[];

property groupHeader

groupHeader: DatatableGroupHeaderDirective<any>;

property groupHeaderRowHeight

groupHeaderRowHeight: number;

property innerWidth

innerWidth: number;

property ngAcceptInputType_expanded

static ngAcceptInputType_expanded: {};

property offsetX

offsetX: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableRowWrapperComponent<any>,
    'datatable-row-wrapper',
    never,
    {
        innerWidth: { alias: 'innerWidth'; required: false };
        rowDetail: { alias: 'rowDetail'; required: false };
        groupHeader: { alias: 'groupHeader'; required: false };
        offsetX: { alias: 'offsetX'; required: false };
        detailRowHeight: { alias: 'detailRowHeight'; required: false };
        groupHeaderRowHeight: { alias: 'groupHeaderRowHeight'; required: false };
        row: { alias: 'row'; required: false };
        groupedRows: { alias: 'groupedRows'; required: false };
        disableCheck: { alias: 'disableCheck'; required: false };
        selected: { alias: 'selected'; required: false };
        rowIndex: { alias: 'rowIndex'; required: false };
        expanded: { alias: 'expanded'; required: false };
    },
    { rowContextmenu: 'rowContextmenu' },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

property row

row: RowOrGroup<TRow>;

property rowContext

rowContext?: RowDetailContext<TRow>;

property rowContextmenu

rowContextmenu: EventEmitter<{ event: MouseEvent; row: RowOrGroup<TRow> }>;

property rowDetail

rowDetail: DatatableRowDetailDirective<any>;

property rowIndex

rowIndex?: number;

property selected

selected: TRow[];

property selectedGroupRows

selectedGroupRows: any;

method isGroup

isGroup: (row: RowOrGroup<TRow>) => row is Group<TRow>;

method ngDoCheck

ngDoCheck: () => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

method onCheckboxChange

onCheckboxChange: (groupSelected: boolean) => void;

method onContextmenu

onContextmenu: ($event: MouseEvent) => void;

class DataTableSelectionComponent

class DataTableSelectionComponent<TRow = any> {}

property activate

activate: EventEmitter<ActivateEvent<TRow>>;

property disableCheck

disableCheck: (row: TRow) => boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableSelectionComponent<any>,
    'datatable-selection',
    never,
    {
        rows: { alias: 'rows'; required: false };
        selected: { alias: 'selected'; required: false };
        selectEnabled: { alias: 'selectEnabled'; required: false };
        selectionType: { alias: 'selectionType'; required: false };
        rowIdentity: { alias: 'rowIdentity'; required: false };
        selectCheck: { alias: 'selectCheck'; required: false };
        disableCheck: { alias: 'disableCheck'; required: false };
    },
    { activate: 'activate'; select: 'select' },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

property prevIndex

prevIndex: number;

property rowIdentity

rowIdentity: any;

property rows

rows: TRow[];

property select

select: EventEmitter<{ selected: TRow[] }>;

property selectCheck

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

property selected

selected: TRow[];

property selectEnabled

selectEnabled: boolean;

property selectionType

selectionType: SelectionType;

method focusCell

focusCell: (
    cellElement: HTMLElement,
    rowElement: HTMLElement,
    key: Keys,
    cellIndex: number
) => void;

method focusRow

focusRow: (rowElement: HTMLElement, key: Keys) => void;

method getPrevNextRow

getPrevNextRow: (rowElement: HTMLElement, key: Keys) => any;

method getRowSelected

getRowSelected: (row: TRow) => boolean;

method getRowSelectedIdx

getRowSelectedIdx: (row: TRow, selected: any[]) => number;

method onActivate

onActivate: (model: ActivateEvent<TRow>, index: number) => void;

method onKeyboardFocus

onKeyboardFocus: (model: ActivateEvent<TRow>) => void;

method selectRow

selectRow: (event: KeyboardEvent | MouseEvent, index: number, row: TRow) => void;

class DataTableSummaryRowComponent

class DataTableSummaryRowComponent implements OnChanges {}

property columns

columns: TableColumn<any>[];

property innerWidth

innerWidth: number;

property offsetX

offsetX: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    DataTableSummaryRowComponent,
    'datatable-summary-row',
    never,
    {
        rows: { alias: 'rows'; required: false };
        columns: { alias: 'columns'; required: false };
        rowHeight: { alias: 'rowHeight'; required: false };
        offsetX: { alias: 'offsetX'; required: false };
        innerWidth: { alias: 'innerWidth'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

property rowHeight

rowHeight: number;

property rows

rows: any[];

property summaryRow

summaryRow: any;

method ngOnChanges

ngOnChanges: () => void;

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 >

property disabled

disabled: boolean;

property ngAcceptInputType_disabled

static ngAcceptInputType_disabled: {};

property ɵdir

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

property ɵfac

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

method disableAllElements

disableAllElements: () => void;

class DraggableDirective

class DraggableDirective implements OnDestroy, OnChanges {}

Draggable Directive for Angular2
Inspiration: https://github.com/AngularClass/angular2-examples/blob/master/rx-draggable/directives/draggable.ts http://stackoverflow.com/questions/35662530/how-to-implement-drag-and-drop-in-angular2

property dragEnd

dragEnd: EventEmitter<DraggableDragEvent>;

property dragEventTarget

dragEventTarget: any;

property dragging

dragging: EventEmitter<DraggableDragEvent>;

property dragModel

dragModel: TableColumn<any>;

property dragStart

dragStart: EventEmitter<DraggableDragEvent>;

property dragX

dragX: boolean;

property dragY

dragY: boolean;

property element

element: any;

property isDragging

isDragging: boolean;

property ngAcceptInputType_dragX

static ngAcceptInputType_dragX: {};

property ngAcceptInputType_dragY

static ngAcceptInputType_dragY: {};

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    DraggableDirective,
    '[draggable]',
    never,
    {
        dragEventTarget: { alias: 'dragEventTarget'; required: false };
        dragModel: { alias: 'dragModel'; required: false };
        dragX: { alias: 'dragX'; required: false };
        dragY: { alias: 'dragY'; required: false };
    },
    { dragStart: 'dragStart'; dragging: 'dragging'; dragEnd: 'dragEnd' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property subscription

subscription: Subscription;

method move

move: (event: MouseEvent, mouseDownPos: { x: number; y: number }) => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onMousedown

onMousedown: (event: MouseEvent) => void;

method onMouseup

onMouseup: (event: MouseEvent) => void;

class LongPressDirective

class LongPressDirective implements OnDestroy {}

property duration

duration: number;

property isLongPress

readonly isLongPress: boolean;

property isLongPressing

isLongPressing: boolean;

property longPressEnd

longPressEnd: EventEmitter<{ model: TableColumn }>;

property longPressing

longPressing: EventEmitter<{ event: MouseEvent; model: TableColumn }>;

property longPressStart

longPressStart: EventEmitter<{ event: MouseEvent; model: TableColumn }>;

property mouseX

mouseX: number;

property mouseY

mouseY: number;

property ngAcceptInputType_duration

static ngAcceptInputType_duration: {};

property ngAcceptInputType_pressEnabled

static ngAcceptInputType_pressEnabled: {};

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    LongPressDirective,
    '[long-press]',
    never,
    {
        pressEnabled: { alias: 'pressEnabled'; required: false };
        pressModel: { alias: 'pressModel'; required: false };
        duration: { alias: 'duration'; required: false };
    },
    {
        longPressStart: 'longPressStart';
        longPressing: 'longPressing';
        longPressEnd: 'longPressEnd';
    },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property press

readonly press: boolean;

property pressEnabled

pressEnabled: boolean;

property pressing

pressing: boolean;

property pressModel

pressModel: TableColumn<any>;

property subscription

subscription: Subscription;

property timeout

timeout: any;

method endPress

endPress: () => void;

method loop

loop: (event: MouseEvent) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onMouseDown

onMouseDown: (event: MouseEvent) => void;

method onMouseMove

onMouseMove: (event: MouseEvent) => void;

method onMouseup

onMouseup: () => void;

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 i1.DataTableFooterTemplateDirective,
        typeof i2.DatatableComponent,
        typeof i3.DataTableColumnDirective,
        typeof i4.DataTablePagerComponent,
        typeof i5.DatatableRowDetailDirective,
        typeof i6.DatatableGroupHeaderDirective,
        typeof i7.DatatableRowDetailTemplateDirective,
        typeof i8.DataTableColumnHeaderDirective,
        typeof i9.DataTableColumnCellDirective,
        typeof i10.DataTableColumnGhostCellDirective,
        typeof i11.DataTableColumnCellTreeToggle,
        typeof i12.DatatableFooterDirective,
        typeof i13.DatatableGroupHeaderTemplateDirective,
        typeof i14.DisableRowDirective,
        typeof i15.DatatableRowDefComponent,
        typeof i15.DatatableRowDefDirective
    ],
    [
        typeof i2.DatatableComponent,
        typeof i5.DatatableRowDetailDirective,
        typeof i6.DatatableGroupHeaderDirective,
        typeof i7.DatatableRowDetailTemplateDirective,
        typeof i3.DataTableColumnDirective,
        typeof i8.DataTableColumnHeaderDirective,
        typeof i9.DataTableColumnCellDirective,
        typeof i10.DataTableColumnGhostCellDirective,
        typeof i11.DataTableColumnCellTreeToggle,
        typeof i1.DataTableFooterTemplateDirective,
        typeof i12.DatatableFooterDirective,
        typeof i4.DataTablePagerComponent,
        typeof i13.DatatableGroupHeaderTemplateDirective,
        typeof i14.DisableRowDirective,
        typeof i15.DatatableRowDefComponent,
        typeof i15.DatatableRowDefDirective
    ]
>;

method forRoot

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

Configure global configuration via INgxDatatableConfig
Parameter configuration

class OrderableDirective

class OrderableDirective implements AfterContentInit, OnDestroy {}

property differ

differ: KeyValueDiffer<string, DraggableDirective>;

property draggables

draggables: QueryList<DraggableDirective>;

property lastDraggingIndex

lastDraggingIndex: number;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    OrderableDirective,
    '[orderable]',
    never,
    {},
    { reorder: 'reorder'; targetChanged: 'targetChanged' },
    ['draggables'],
    never,
    true,
    never
>;

property ɵfac

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

property positions

positions: Record<string, OrderPosition>;

property reorder

reorder: EventEmitter<OrderableReorderEvent>;

property targetChanged

targetChanged: EventEmitter<TargetChangedEvent>;

method isTarget

isTarget: (
    model: TableColumn,
    event: MouseEvent
) => { pos: OrderPosition; i: number };

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onDragEnd

onDragEnd: ({ element, model, event }: DraggableDragEvent) => void;

method onDragging

onDragging: ({ element, model, event }: DraggableDragEvent) => void;

method onDragStart

onDragStart: () => void;

method updateSubscriptions

updateSubscriptions: () => void;

class ProgressBarComponent

class ProgressBarComponent {}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    ProgressBarComponent,
    'datatable-progress',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

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

class ResizeableDirective

class ResizeableDirective implements OnDestroy, AfterViewInit {}

property element

element: any;

property maxWidth

maxWidth: number;

property minWidth

minWidth: number;

property ngAcceptInputType_maxWidth

static ngAcceptInputType_maxWidth: {};

property ngAcceptInputType_minWidth

static ngAcceptInputType_minWidth: {};

property ngAcceptInputType_resizeEnabled

static ngAcceptInputType_resizeEnabled: {};

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    ResizeableDirective,
    '[resizeable]',
    never,
    {
        resizeEnabled: { alias: 'resizeEnabled'; required: false };
        minWidth: { alias: 'minWidth'; required: false };
        maxWidth: { alias: 'maxWidth'; required: false };
    },
    { resize: 'resize'; resizing: 'resizing' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property resize

resize: EventEmitter<any>;

property resizeEnabled

resizeEnabled: boolean;

property resizing

resizing: EventEmitter<any>;

property subscription

subscription: Subscription;

method move

move: (
    event: MouseEvent,
    initialWidth: number,
    mouseDownScreenX: number
) => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onMousedown

onMousedown: (event: MouseEvent) => void;

method onMouseup

onMouseup: () => void;

class RowHeightCache

class RowHeightCache {}

This object contains the cache of the various row heights that are present inside the data table. Its based on Fenwick tree data structure that helps with querying sums that have time complexity of log n.
Fenwick Tree Credits: http://petr-mitrichev.blogspot.com/2013/05/fenwick-tree-range-updates.html https://github.com/mikolalysenko/fenwick-tree

method clearCache

clearCache: () => void;

Clear the Tree array.

method getRowIndex

getRowIndex: (scrollY: number) => number;

Given the ScrollY position i.e. sum, provide the rowIndex that is present in the current view port. Below handles edge cases.

method initCache

initCache: (details: any) => void;

Initialize the Fenwick tree with row Heights.
Parameter rows
The array of rows which contain the expanded status.
Parameter rowHeight
The row height.
Parameter detailRowHeight
The detail row height.

method query

query: (atIndex: number) => number;

Range Sum query from 1 to the rowIndex

method queryBetween

queryBetween: (atIndexA: number, atIndexB: number) => number;

Find the total height between 2 row indexes

method update

update: (atRowIndex: number, byRowHeight: number) => void;

When a row is expanded or rowHeight is changed, update the height. This can be utilized in future when Angular Data table supports dynamic row heights.

class ScrollbarHelper

class ScrollbarHelper {}

Gets the width of the scrollbar. Nesc for windows http://stackoverflow.com/a/13382873/888165

property ɵfac

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

property ɵprov

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

property width

width: number;

method getWidth

getWidth: () => number;

class ScrollerComponent

class ScrollerComponent implements OnInit, OnDestroy {}

property element

element: HTMLElement;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    ScrollerComponent,
    'datatable-scroller',
    never,
    {
        scrollbarV: { alias: 'scrollbarV'; required: false };
        scrollbarH: { alias: 'scrollbarH'; required: false };
        scrollHeight: { alias: 'scrollHeight'; required: false };
        scrollWidth: { alias: 'scrollWidth'; required: false };
    },
    { scroll: 'scroll' },
    never,
    ['*'],
    true,
    never
>;

property ɵfac

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

property parentElement

parentElement: HTMLElement;

property prevScrollXPos

prevScrollXPos: number;

property prevScrollYPos

prevScrollYPos: number;

property scroll

scroll: EventEmitter<any>;

property scrollbarH

scrollbarH: boolean;

property scrollbarV

scrollbarV: boolean;

property scrollHeight

scrollHeight: number;

property scrollWidth

scrollWidth: number;

property scrollXPos

scrollXPos: number;

property scrollYPos

scrollYPos: number;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onScrolled

onScrolled: (event: MouseEvent) => void;

method setOffset

setOffset: (offsetY: number) => void;

method updateOffset

updateOffset: () => void;

class VisibilityDirective

class VisibilityDirective implements OnInit, OnDestroy {}

Visibility Observer Directive
Usage:
<div visibilityObserver (visible)="onVisible($event)">

property isVisible

isVisible: boolean;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    VisibilityDirective,
    '[visibilityObserver]',
    never,
    {},
    { visible: 'visible' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property timeout

timeout: any;

property visible

visible: EventEmitter<any>;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onVisibilityChange

onVisibilityChange: () => void;

method runCheck

runCheck: () => void;

Interfaces

interface ActivateEvent

interface ActivateEvent<TRow> {}

property cellElement

cellElement?: HTMLElement;

property cellIndex

cellIndex?: number;

property column

column?: TableColumn;

property event

event: MouseEvent | KeyboardEvent;

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 AllGroupsToggleEvent

interface AllGroupsToggleEvent {}

property type

type: 'all';

property value

value: boolean;

interface CellContext

interface CellContext<TRow = any> {}

property activateFn

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

property column

column: TableColumn;

property disable$

disable$: BehaviorSubject<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 treeStatus

treeStatus: TreeStatus;

property value

value: any;

interface ColumnResizeEvent

interface ColumnResizeEvent {}

property column

column: TableColumn;

property newValue

newValue: number;

property prevValue

prevValue: number;

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

property sortFn

sortFn: () => void;

interface INgxDatatableConfig

interface INgxDatatableConfig {}

Interface definition for INgxDatatableConfig global configuration

property cssClasses

cssClasses?: {
    sortAscending: string;
    sortDescending: string;
    sortUnset: string;
    pagerLeftArrow: string;
    pagerRightArrow: string;
    pagerPrevious: string;
    pagerNext: string;
};

property defaultColumnWidth

defaultColumnWidth?: number;

property footerHeight

footerHeight?: number;

property headerHeight

headerHeight?: number;

property messages

messages?: {
    emptyMessage: string;
    totalMessage: string;
    selectedMessage: string;
};

property rowHeight

rowHeight?: number;

interface InnerSortEvent

interface InnerSortEvent {}

property column

column: TableColumn;

property newValue

newValue: SortDirection;

property prevValue

prevValue: SortDirection;

interface ISummaryColumn

interface ISummaryColumn {}

property pipe

pipe?: PipeTransform;

property prop

prop?: TableColumnProp;

property summaryFunc

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

property summaryTemplate

summaryTemplate?: TemplateRef<any>;

interface PageEvent

interface PageEvent {}

property count

count: number;

property limit

limit: number;

property offset

offset: number;

property pageSize

pageSize: number;

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 RowDetailContext

interface RowDetailContext<TRow = any> {}

property disableRow$

disableRow$?: Observable<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 SortEvent

interface SortEvent extends InnerSortEvent {}

property sorts

sorts: SortPropDir[];

interface SortPropDir

interface SortPropDir {}

property dir

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

property prop

prop: TableColumnProp;

interface TableColumn

interface TableColumn<TRow = any> {}

Column Type

property $$id

$$id?: string;

Internal unique id

property $$oldWidth

$$oldWidth?: number;

Internal for column width distributions

property $$valueGetter

$$valueGetter?: ValueGetter;

Internal for setColumnDefaults

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?: any;

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;

Summary function

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

interface TableColumnGroup

interface TableColumnGroup {}

property center

center: TableColumn[];

property left

left: TableColumn[];

property right

right: TableColumn[];

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 Keys

enum Keys {
    up = 'ArrowUp',
    down = 'ArrowDown',
    return = 'Enter',
    escape = 'Escape',
    left = 'ArrowLeft',
    right = 'ArrowRight',
}

member down

down = 'ArrowDown'

member escape

escape = 'Escape'

member left

left = 'ArrowLeft'

member return

return = 'Enter'

member right

right = 'ArrowRight'

member up

up = 'ArrowUp'

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 DragEventType

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

type GroupToggleEvents

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

type OptionalValueGetter

type OptionalValueGetter = (row: any) => any | undefined;

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

type ValueGetter

type ValueGetter = (obj: any, prop: TableColumnProp) => any;

Package Files (49)

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 months ago.
Package analyzed in 10600 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 adjustColumnWidths

function camelCase

function columnGroupWidths

function columnsByPin

function columnsByPinArr

function columnsTotalWidth

function columnTotalWidth

function deCamelCase

function deepValueGetter

function emptyStringGetter

function forceFillColumnWidths

function getterForProp

function getTotalFlexGrow

function groupRowsByParents

Parameter rows

function id

function isNullOrUndefined

function nextSortDir

function numericIndexGetter

Parameter row

Parameter index

Returns

function optionalGetterForProp

function orderByComparator

function selectRows

function selectRowsBetween

function setColumnDefaults

function shallowValueGetter

Parameter obj

Parameter fieldName

function sortGroupedRows

function sortRows

function throttle

function throttleable

function translateTemplates

Classes

class ColumnChangesService

property columnInputChanges$

property ɵfac

property ɵprov

method onInputChange

class DataTableBodyCellComponent

constructor

property activate

property cellContext

property cellTemplate

property column

property columnCssClasses

property disable$

property displayCheck

property expanded

property ghostLoaderTemplate

property ghostLoadingIndicator

property group

property height

property isFocused

property isSelected

property maxWidth

property minWidth

property ɵcmp

property ɵfac

property row

property rowHeight

property rowIndex

property sanitizedValue

property sortDir

property sorts

property treeAction

property treeStatus

property value