@swimlane/ngx-datatable

@swimlane/ngx-datatable

Version 19.0.0
Published 5 months ago
3.98 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: any, expectedWidth: any) => 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: any,
    all: any
) => { left: number; center: number; right: number; total: number };

Returns the widths of all group sets of a column

function columnsByPin

columnsByPin: (cols: any[]) => { left: any; center: any; right: any };

Returns the columns by pin.

function columnsByPinArr

columnsByPinArr: (val: any) => any[];

function columnsTotalWidth

columnsTotalWidth: (columns: any, prop?: any) => number;

Calculates the total width of all columns and their groups

function columnTotalWidth

columnTotalWidth: (columns: any[], 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 elementsFromPoint

elementsFromPoint: (x: number, y: number) => any[];

Polyfill for elementsFromPoint
https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint https://gist.github.com/iddan/54d5d9e58311b0495a91bf06de661380 https://gist.github.com/oslego/7265412

function emptyStringGetter

emptyStringGetter: () => string;

Always returns the empty string ''

function forceFillColumnWidths

forceFillColumnWidths: (
    allColumns: any[],
    expectedWidth: number,
    startIdx: number,
    allowBleed: boolean,
    defaultColWidth?: 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: any[]) => number;

Calculates the Total Flex Grow

function getVendorPrefixedName

getVendorPrefixedName: (property: string) => any;

function groupRowsByParents

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

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
) => 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: (selected: any[], row: any, comparefn: any) => any[];

function selectRowsBetween

selectRowsBetween: (
    selected: any[],
    rows: any[],
    index: number,
    prevIndex: number,
    comparefn: any
) => any[];

function setColumnDefaults

setColumnDefaults: (columns: TableColumn[]) => 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 sortRows

sortRows: (rows: any[], columns: any[], dirs: SortPropDir[]) => any[];

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: (templates: DataTableColumnDirective[]) => any[];

Translates templates definitions to objects

function translateXY

translateXY: (styles: any, x: number, y: number) => void;

Classes

class ColumnChangesService

class ColumnChangesService {}

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

property columnInputChanges$

readonly columnInputChanges$: any;

method onInputChange

onInputChange: () => void;

class DataTableBodyCellComponent

class DataTableBodyCellComponent implements DoCheck, OnDestroy {}

constructor

constructor(element: any, cd: any);

property activate

activate: any;

property activateFn

activateFn: any;

property cellContext

cellContext: any;

property cellTemplate

cellTemplate: any;

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

class DataTableBodyComponent

class DataTableBodyComponent implements OnInit, OnDestroy {}

constructor

constructor(cd: any);

Creates an instance of DataTableBodyComponent.

property activate

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

property pageSize

pageSize: number;

property rowClass

rowClass: any;

property rowContextmenu

rowContextmenu: 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: 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: 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: 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

class DataTableBodyRowComponent

class DataTableBodyRowComponent implements DoCheck {}

constructor

constructor(
    differs: any,
    scrollbarHelper: ScrollbarHelper,
    cd: any,
    element: any
);

property activate

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

class DataTableColumnCellDirective

class DataTableColumnCellDirective {}

constructor

constructor(template: any);

property template

template: any;

class DataTableColumnCellTreeToggle

class DataTableColumnCellTreeToggle {}

constructor

constructor(template: any);

property template

template: any;

class DataTableColumnDirective

class DataTableColumnDirective implements OnChanges {}

constructor

constructor(columnChangesService: ColumnChangesService);

property canAutoResize

canAutoResize: boolean;

property cellClass

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

property cellTemplate

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

property treeLevelIndent

treeLevelIndent: number;

property treeToggleTemplate

readonly treeToggleTemplate: any;

property width

width: number;

method ngOnChanges

ngOnChanges: () => void;

class DataTableColumnHeaderDirective

class DataTableColumnHeaderDirective {}

constructor

constructor(template: any);

property template

template: any;

class DatatableComponent

class DatatableComponent implements OnInit, DoCheck, AfterViewInit {}

constructor

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

property activate

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

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.

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

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

property pageSize

pageSize: number;

property reorder

reorder: any;

Columns were re-ordered.

property reorderable

reorderable: boolean;

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

property resize

resize: any;

Column was resized.

property rowClass

rowClass: any;

Row specific classes. Similar implementation to ngClass.
[rowClass]="'first second'" [rowClass]="{ 'first': true, 'second': true, 'third': false }"

property rowCount

rowCount: number;

property rowDetail

rowDetail: DatatableRowDetailDirective;

Row Detail templates gathered from the ContentChild

property rowDiffer

rowDiffer: any;

property rowHeight

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

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

property rowIdentity

rowIdentity: (x: any) => any;

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

Gets the rows.

property scroll

scroll: any;

Body was scrolled typically in a scrollbarV:true scenario.

property scrollbarH

scrollbarH: boolean;

Enable horz scrollbars

property scrollbarV

scrollbarV: boolean;

Enable vertical scrollbars

property select

select: any;

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.
DatatableComponent

property selectCheck

selectCheck: any;

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

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

Column sort was invoked.

property sorts

sorts: any[];

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

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

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

A row was expanded ot collapsed for tree

property treeFromRelation

treeFromRelation: string;

Tree from relation

property treeToRelation

treeToRelation: string;

Tree to relation

property virtualization

virtualization: boolean;

A flag for row virtualization on / off

method calcPageSize

calcPageSize: (val?: any[]) => number;

Recalculates the sizes of the page

method calcRowCount

calcRowCount: (val?: any[]) => number;

Calculates the row count.

method groupArrayBy

groupArrayBy: (originalArray: any, groupBy: any) => { key: any; value: any }[];

Creates a map with the data grouped by the user choice of grouping index
Parameter originalArray
the original array passed via parameter
Parameter groupByIndex
the index 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 }: any) => void;

Body triggered a page event.

method onBodyScroll

onBodyScroll: (event: MouseEvent) => void;

The body triggered a scroll event.

method onBodySelect

onBodySelect: (event: any) => void;

A row was selected from body

method onColumnContextmenu

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

The header triggered a contextmenu event.

method onColumnReorder

onColumnReorder: ({ column, newValue, prevValue }: any) => void;

The header triggered a column re-order event.

method onColumnResize

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

The header triggered a column resize event.

method onColumnSort

onColumnSort: (event: any) => void;

The header triggered a column sort event.

method onFooterPage

onFooterPage: (event: any) => void;

The footer triggered a page event.

method onHeaderSelect

onHeaderSelect: (event: any) => void;

Toggle all row selection

method onRowContextmenu

onRowContextmenu: ({ event, row }: any) => void;

The body triggered a contextmenu event.

method onTreeAction

onTreeAction: (event: any) => 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?: any[],
    forceIdx?: number,
    allowBleed?: boolean
) => any[] | 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: any) => 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 page

page: any;

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 pagerLeftArrowIcon

pagerLeftArrowIcon: string;

property pagerNextIcon

pagerNextIcon: string;

property pagerPreviousIcon

pagerPreviousIcon: string;

property pagerRightArrowIcon

pagerRightArrowIcon: string;

property selectedMessage

selectedMessage: string | boolean;

property template

readonly template: any;

property totalMessage

totalMessage: string;

class DataTableFooterTemplateDirective

class DataTableFooterTemplateDirective {}

constructor

constructor(template: any);

property template

template: any;

class DatatableGroupHeaderDirective

class DatatableGroupHeaderDirective {}

property rowHeight

rowHeight: number | ((group?: any, index?: number) => number);

Row height is required when virtual scroll is enabled.

property template

readonly template: any;

property toggle

toggle: any;

Track toggling of group visibility

method collapseAllGroups

collapseAllGroups: () => void;

Collapse all groups

method expandAllGroups

expandAllGroups: () => void;

Expand all groups

method toggleExpandGroup

toggleExpandGroup: (group: any) => void;

Toggle the expansion of a group

class DatatableGroupHeaderTemplateDirective

class DatatableGroupHeaderTemplateDirective {}

constructor

constructor(template: any);

property template

template: any;

class DataTableHeaderCellComponent

class DataTableHeaderCellComponent {}

constructor

constructor(cd: any);

property allRowsSelected

allRowsSelected: boolean;

property cellContext

cellContext: any;

property column

column: TableColumn;

property columnContextmenu

columnContextmenu: any;

property columnCssClasses

readonly columnCssClasses: any;

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 select

select: any;

property selectFn

selectFn: any;

property selectionType

selectionType: SelectionType;

property sort

sort: any;

property sortAscendingIcon

sortAscendingIcon: string;

property sortClass

sortClass: string;

property sortDescendingIcon

sortDescendingIcon: string;

property sortDir

sortDir: SortDirection;

property sortFn

sortFn: any;

property sorts

sorts: any[];

property sortType

sortType: SortType;

property sortUnsetIcon

sortUnsetIcon: string;

property targetMarkerContext

targetMarkerContext: any;

property targetMarkerTemplate

targetMarkerTemplate: any;

property width

readonly width: number;

method calcSortClass

calcSortClass: (sortDir: SortDirection) => string;

method calcSortDir

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

method ngOnInit

ngOnInit: () => void;

method onContextmenu

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

method onSort

onSort: () => void;

class DataTableHeaderComponent

class DataTableHeaderComponent implements OnDestroy {}

constructor

constructor(cd: any);

property allRowsSelected

allRowsSelected: boolean;

property columnContextmenu

columnContextmenu: any;

property columns

columns: any[];

property dealsWithGroup

dealsWithGroup: boolean;

property dragEventTarget

dragEventTarget: any;

property headerHeight

headerHeight: any;

property headerWidth

readonly headerWidth: string;

property innerWidth

innerWidth: number;

property offsetX

offsetX: number;

property reorder

reorder: any;

property reorderable

reorderable: boolean;

property resize

resize: any;

property scrollbarH

scrollbarH: boolean;

property select

select: any;

property selectionType

selectionType: SelectionType;

property sort

sort: any;

property sortAscendingIcon

sortAscendingIcon: any;

property sortDescendingIcon

sortDescendingIcon: any;

property sorts

sorts: any[];

property sortType

sortType: SortType;

property sortUnsetIcon

sortUnsetIcon: any;

property targetMarkerContext

targetMarkerContext: any;

property targetMarkerTemplate

targetMarkerTemplate: any;

method calcNewSorts

calcNewSorts: (column: any, prevValue: number, newValue: number) => any[];

method calcStylesByGroup

calcStylesByGroup: (group: string) => any;

method columnTrackingFn

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

method getColumn

getColumn: (index: number) => any;

method ngOnDestroy

ngOnDestroy: () => void;

method onColumnReordered

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

method onColumnResized

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

method onLongPressEnd

onLongPressEnd: ({ event, model }: { event: any; model: any }) => void;

method onLongPressStart

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

method onSort

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

method onTargetChanged

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

method setStylesByGroup

setStylesByGroup: () => void;

method trackByGroups

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

class DataTablePagerComponent

class DataTablePagerComponent {}

property change

change: any;

property count

count: number;

property page

page: number;

property pagerLeftArrowIcon

pagerLeftArrowIcon: string;

property pagerNextIcon

pagerNextIcon: string;

property pagerPreviousIcon

pagerPreviousIcon: string;

property pagerRightArrowIcon

pagerRightArrowIcon: string;

property pages

pages: any;

property size

size: number;

property totalPages

readonly totalPages: number;

method calcPages

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

method canNext

canNext: () => boolean;

method canPrevious

canPrevious: () => boolean;

method nextPage

nextPage: () => void;

method prevPage

prevPage: () => void;

method selectPage

selectPage: (page: number) => void;

class DatatableRowDetailDirective

class DatatableRowDetailDirective {}

property rowHeight

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

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

property template

readonly template: any;

property toggle

toggle: 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: any) => void;

Toggle the expansion of the row

class DatatableRowDetailTemplateDirective

class DatatableRowDetailTemplateDirective {}

constructor

constructor(template: any);

property template

template: any;

class DataTableRowWrapperComponent

class DataTableRowWrapperComponent implements DoCheck {}

constructor

constructor(cd: any, differs: any);

property detailRowHeight

detailRowHeight: any;

property expanded

expanded: boolean;

property groupContext

groupContext: any;

property groupedRows

groupedRows: any;

property groupHeader

groupHeader: any;

property innerWidth

innerWidth: number;

property offsetX

offsetX: number;

property row

row: any;

property rowContext

rowContext: any;

property rowContextmenu

rowContextmenu: any;

property rowDetail

rowDetail: any;

property rowIndex

rowIndex: number;

method getGroupHeaderStyle

getGroupHeaderStyle: () => any;

method ngDoCheck

ngDoCheck: () => void;

method onContextmenu

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

class DataTableSelectionComponent

class DataTableSelectionComponent {}

property activate

activate: any;

property prevIndex

prevIndex: number;

property rowIdentity

rowIdentity: any;

property rows

rows: any[];

property select

select: any;

property selectCheck

selectCheck: any;

property selected

selected: any[];

property selectEnabled

selectEnabled: boolean;

property selectionType

selectionType: SelectionType;

method focusCell

focusCell: (
    cellElement: any,
    rowElement: any,
    keyCode: number,
    cellIndex: number
) => void;

method focusRow

focusRow: (rowElement: any, keyCode: number) => void;

method getPrevNextRow

getPrevNextRow: (rowElement: any, keyCode: number) => any;

method getRowSelected

getRowSelected: (row: any) => boolean;

method getRowSelectedIdx

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

method onActivate

onActivate: (model: Model, index: number) => void;

method onKeyboardFocus

onKeyboardFocus: (model: Model) => void;

method selectRow

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

class DataTableSummaryRowComponent

class DataTableSummaryRowComponent implements OnChanges {}

property columns

columns: ISummaryColumn[];

property innerWidth

innerWidth: number;

property offsetX

offsetX: number;

property rowHeight

rowHeight: number;

property rows

rows: any[];

property summaryRow

summaryRow: any;

method ngOnChanges

ngOnChanges: () => void;

class DimensionsHelper

class DimensionsHelper {}

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

method getDimensions

getDimensions: (element: Element) => ClientRect;

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

constructor

constructor(element: any);

property dragEnd

dragEnd: any;

property dragEventTarget

dragEventTarget: any;

property dragging

dragging: any;

property dragModel

dragModel: any;

property dragStart

dragStart: any;

property dragX

dragX: boolean;

property dragY

dragY: boolean;

property element

element: HTMLElement;

property isDragging

isDragging: boolean;

property subscription

subscription: any;

method move

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

method ngOnChanges

ngOnChanges: (changes: any) => 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: any;

property longPressing

longPressing: any;

property longPressStart

longPressStart: any;

property mouseX

mouseX: number;

property mouseY

mouseY: number;

property press

readonly press: boolean;

property pressEnabled

pressEnabled: boolean;

property pressing

pressing: boolean;

property pressModel

pressModel: any;

property subscription

subscription: any;

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 {}

method forRoot

static forRoot: (configuration: INgxDatatableConfig) => any;

Configure global configuration via INgxDatatableConfig
Parameter configuration

class OrderableDirective

class OrderableDirective implements AfterContentInit, OnDestroy {}

constructor

constructor(differs: any, document: any);

property differ

differ: any;

property draggables

draggables: any;

property lastDraggingIndex

lastDraggingIndex: number;

property positions

positions: any;

property reorder

reorder: any;

property targetChanged

targetChanged: any;

method isTarget

isTarget: (model: any, event: any) => any;

method ngAfterContentInit

ngAfterContentInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method onDragEnd

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

method onDragging

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

method onDragStart

onDragStart: () => void;

method updateSubscriptions

updateSubscriptions: () => void;

class ProgressBarComponent

class ProgressBarComponent {}

class ResizeableDirective

class ResizeableDirective implements OnDestroy, AfterViewInit {}

constructor

constructor(element: any, renderer: any);

property element

element: HTMLElement;

property maxWidth

maxWidth: number;

property minWidth

minWidth: number;

property resize

resize: any;

property resizeEnabled

resizeEnabled: boolean;

property resizing

resizing: boolean;

property subscription

subscription: any;

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

constructor

constructor(document: any);

property width

width: number;

method getWidth

getWidth: () => number;

class ScrollerComponent

class ScrollerComponent implements OnInit, OnDestroy {}

constructor

constructor(ngZone: any, element: any, renderer: any);

property element

element: any;

property onScrollListener

onScrollListener: any;

property parentElement

parentElement: any;

property prevScrollXPos

prevScrollXPos: number;

property prevScrollYPos

prevScrollYPos: number;

property scroll

scroll: 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)">

constructor

constructor(element: any, zone: any);

property isVisible

isVisible: boolean;

property timeout

timeout: any;

property visible

visible: any;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onVisibilityChange

onVisibilityChange: () => void;

method runCheck

runCheck: () => void;

Interfaces

interface INgxDatatableConfig

interface INgxDatatableConfig {}

Interface definition for INgxDatatableConfig global configuration

property messages

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

interface ISummaryColumn

interface ISummaryColumn {}

property pipe

pipe?: PipeTransform;

property prop

prop: string;

property summaryFunc

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

property summaryTemplate

summaryTemplate?: TemplateRef<any>;

interface Model

interface Model {}

property cellElement

cellElement: any;

property cellIndex

cellIndex: number;

property event

event: MouseEvent | KeyboardEvent;

property row

row: any;

property rowElement

rowElement: any;

property type

type: string;

interface SortPropDir

interface SortPropDir {}

property dir

dir: SortDirection;

property prop

prop: TableColumnProp;

interface TableColumn

interface TableColumn {}

Column Type

property $$id

$$id?: string;

Internal unique id
TableColumn

property $$oldWidth

$$oldWidth?: number;

Internal for column width distributions
TableColumn

property $$valueGetter

$$valueGetter?: ValueGetter;

Internal for setColumnDefaults
TableColumn

@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 elementsFromPoint

function emptyStringGetter

function forceFillColumnWidths

function getterForProp

function getTotalFlexGrow

function getVendorPrefixedName

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 sortRows

function throttle

function throttleable

function translateTemplates

function translateXY

Classes

class ColumnChangesService

property columnInputChanges$

method onInputChange

class DataTableBodyCellComponent

constructor

property activate

property activateFn

property cellContext

property cellTemplate

property column

property columnCssClasses

property displayCheck

property expanded

property group

property height

property isFocused

property isSelected

property maxWidth

property minWidth

property onCheckboxChangeFn

property row

property rowHeight

property rowIndex

property sanitizedValue

property sortDir

property sorts

property treeAction

property treeStatus

property value

property width

method calcLeftMargin

method calcSortDir