@swimlane/ngx-datatable

property columnInputChanges$

readonly columnInputChanges$: Observable<undefined>;

method onInputChange

onInputChange: () => void;

constructor

constructor(element: ElementRef, cd: ChangeDetectorRef);

property activate

activate: EventEmitter<any>;

property activateFn

activateFn: any;

property cellContext

cellContext: any;

property cellTemplate

cellTemplate: ViewContainerRef;

property column

column: TableColumn;

property columnCssClasses

readonly columnCssClasses: any;

property displayCheck

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

property expanded

expanded: boolean;

property group

group: any;

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 onCheckboxChangeFn

onCheckboxChangeFn: any;

property row

row: any;

property rowHeight

rowHeight: number;

property rowIndex

rowIndex: number;

property sanitizedValue

sanitizedValue: any;

property sortDir

sortDir: SortDirection;

property sorts

sorts: any[];

property treeAction

treeAction: EventEmitter<any>;

property treeStatus

treeStatus: TreeStatus;

property value

value: any;

property width

readonly width: number;

method calcLeftMargin

calcLeftMargin: (column: any, row: any) => number;

method calcSortDir

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

method checkValueUpdates

checkValueUpdates: () => void;

method ngDoCheck

ngDoCheck: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onBlur

onBlur: () => void;

method onCheckboxChange

onCheckboxChange: (event: any) => 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;

constructor

constructor(cd: ChangeDetectorRef);

• Creates an instance of DataTableBodyComponent.

property activate

activate: EventEmitter<any>;

property bodyHeight

bodyHeight: any;

property bodyWidth

readonly bodyWidth: string;

property columnGroupWidths

columnGroupWidths: any;

property columnGroupWidthsWithoutGroup

columnGroupWidthsWithoutGroup: any;

property columns

columns: any[];

property detailToggle

detailToggle: EventEmitter<any>;

property displayCheck

displayCheck: any;

property emptyMessage

emptyMessage: string;

property externalPaging

externalPaging: boolean;

property getDetailRowHeight

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

• Get the height of the detail row.

property groupedRows

groupedRows: any;

property groupExpansionDefault

groupExpansionDefault: boolean;

property groupHeader

groupHeader: any;

property groupRowsBy

groupRowsBy: string;

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 page

page: EventEmitter<any>;

property pageSize

pageSize: number;

property rowClass

rowClass: any;

property rowContextmenu

rowContextmenu: EventEmitter<{ event: MouseEvent; row: any }>;

property rowCount

rowCount: number;

property rowDetail

rowDetail: any;

property rowExpansions

rowExpansions: any[];

property rowHeight

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

property rowHeightsCache

rowHeightsCache: RowHeightCache;

property rowIdentity

rowIdentity: any;

property rowIndexes

rowIndexes: any;

property rows

rows: any[];

property rowTrackingFn

rowTrackingFn: any;

property scroll

scroll: EventEmitter<any>;

property scrollbarH

scrollbarH: boolean;

property scrollbarV

scrollbarV: boolean;

property scroller

scroller: ScrollerComponent;

property scrollHeight

readonly scrollHeight: number;

• 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<any>;

property selectCheck

selectCheck: any;

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 temp

temp: any[];

property trackByProp

trackByProp: string;

property treeAction

treeAction: EventEmitter<any>;

property virtualization

virtualization: boolean;

method columnTrackingFn

columnTrackingFn: (index: number, column: any) => any;

• Tracks the column

method getAdjustedViewPortIndex

getAdjustedViewPortIndex: () => number;

• Gets the index for the view port

method getBottomSummaryRowStyles

getBottomSummaryRowStyles: () => any;

• Calculate bottom summary row offset for scrollbar mode. For more information about cache and offset calculation see description for getRowsStyles method

  Returns

  the CSS3 style to be applied

  DataTableBodyComponent

method getGroupHeight

getGroupHeight: (group: any) => number;

• Parameter group

  the group with all rows

method getRowAndDetailHeight

getRowAndDetailHeight: (row: any) => number;

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

method getRowExpanded

getRowExpanded: (row: any) => boolean;

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

method getRowExpandedIdx

getRowExpandedIdx: (row: any, expanded: any[]) => number;

method getRowHeight

getRowHeight: (row: any) => number;

• Get the row height

method getRowIndex

getRowIndex: (row: any) => number;

• Gets the row index given a row

method getRowsStyles

getRowsStyles: (rows: any) => 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).

  Parameter rows

  the row that needs to be placed in the 2D space.

  Returns

  the CSS3 style to be applied

  DataTableBodyComponent

method hideIndicator

hideIndicator: () => void;

• Hides the loading indicator

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: any) => 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 stylesByGroup

stylesByGroup: (group: string) => { width: string };

• Gets the row pinning group styles

method toggleAllRows

toggleAllRows: (expanded: boolean) => void;

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

method toggleRowExpansion

toggleRowExpansion: (row: any) => 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 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: () => void;

• Updates the rows in the view port

constructor

constructor(
    differs: KeyValueDiffers,
    scrollbarHelper: ScrollbarHelper,
    cd: ChangeDetectorRef,
    element: ElementRef
);

property activate

activate: EventEmitter<any>;

property columns

columns: any[];

property columnsTotalWidths

readonly columnsTotalWidths: string;

property cssClass

readonly cssClass: string;

property displayCheck

displayCheck: any;

property expanded

expanded: boolean;

property group

group: any;

property innerWidth

innerWidth: number;

property isSelected

isSelected: boolean;

property offsetX

offsetX: number;

property row

row: any;

property rowClass

rowClass: any;

property rowHeight

rowHeight: number;

property rowIndex

rowIndex: number;

property treeAction

treeAction: EventEmitter<any>;

property treeStatus

treeStatus: TreeStatus;

method buildStylesByGroup

buildStylesByGroup: () => void;

method calcStylesByGroup

calcStylesByGroup: (group: string) => { width: string };

method columnTrackingFn

columnTrackingFn: (index: number, column: any) => any;

method ngDoCheck

ngDoCheck: () => void;

method onActivate

onActivate: (event: any, index: number) => void;

method onKeyDown

onKeyDown: (event: KeyboardEvent) => void;

method onMouseenter

onMouseenter: (event: any) => void;

method onTreeAction

onTreeAction: () => void;

method recalculateColumns

recalculateColumns: (val?: any[]) => void;

method trackByGroups

trackByGroups: (index: number, colGroup: any) => any;

constructor

constructor(template: TemplateRef<any>);

property template

template: TemplateRef<any>;

constructor

constructor(template: TemplateRef<any>);

property template

template: TemplateRef<any>;

constructor

constructor(columnChangesService: ColumnChangesService);

property canAutoResize

canAutoResize: boolean;

property cellClass

cellClass: string | ((data: any) => string | any);

property cellTemplate

readonly cellTemplate: TemplateRef<any>;

property checkboxable

checkboxable: boolean;

property comparator

comparator: any;

property draggable

draggable: boolean;

property flexGrow

flexGrow: number;

property frozenLeft

frozenLeft: any;

property frozenRight

frozenRight: any;

property headerCheckboxable

headerCheckboxable: boolean;

property headerClass

headerClass: string | ((data: any) => string | any);

property headerTemplate

readonly headerTemplate: TemplateRef<any>;

property isTreeColumn

isTreeColumn: boolean;

property maxWidth

maxWidth: number;

property minWidth

minWidth: number;

property name

name: string;

property pipe

pipe: any;

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;

constructor

constructor(template: TemplateRef<any>);

property template

template: TemplateRef<any>;

constructor

constructor(
    scrollbarHelper: ScrollbarHelper,
    dimensionsHelper: DimensionsHelper,
    cd: ChangeDetectorRef,
    element: ElementRef,
    differs: KeyValueDiffers,
    columnChangesService: ColumnChangesService,
    configuration: INgxDatatableConfig
);

property activate

activate: EventEmitter<any>;

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

• 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[];

• Get the columns.

property columnTemplates

columnTemplates: QueryList<DataTableColumnDirective>;

• Returns the column templates.

property count

count: number;

• Gets the count.

property cssClasses

cssClasses: any;

• Css class overrides

property displayCheck

displayCheck: (row: any, column?: any, 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 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.

property footer

footer: DatatableFooterDirective;

• Footer template gathered from the ContentChild

property footerHeight

footerHeight: number;

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

property groupedRows

groupedRows: any[];

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

• Group Header templates gathered from the ContentChild

property groupRowsBy

groupRowsBy: string;

property headerComponent

headerComponent: DataTableHeaderComponent;

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

  DatatableComponent

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

• Message overrides for localization

  emptyMessage [default] = 'No data to display' totalMessage [default] = 'total' selectedMessage [default] = 'selected'

property offset

offset: number;

property page

page: EventEmitter<any>;