@swimlane/ngx-datatable
- Version 20.1.0
- Published
- 3.62 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
- adjustColumnWidths()
- camelCase()
- columnGroupWidths()
- columnsByPin()
- columnsByPinArr()
- columnsTotalWidth()
- columnTotalWidth()
- deCamelCase()
- deepValueGetter()
- elementsFromPoint()
- emptyStringGetter()
- forceFillColumnWidths()
- getterForProp()
- getTotalFlexGrow()
- getVendorPrefixedName()
- groupRowsByParents()
- id()
- isNullOrUndefined()
- nextSortDir()
- numericIndexGetter()
- optionalGetterForProp()
- orderByComparator()
- selectRows()
- selectRowsBetween()
- setColumnDefaults()
- shallowValueGetter()
- sortRows()
- throttle()
- throttleable()
- translateTemplates()
- translateXY()
Classes
DataTableBodyCellComponent
- activate
- activateFn
- calcLeftMargin()
- calcSortDir()
- cellContext
- cellTemplate
- checkValueUpdates()
- column
- columnCssClasses
- displayCheck
- expanded
- group
- height
- isFocused
- isSelected
- maxWidth
- minWidth
- ngDoCheck()
- ngOnDestroy()
- onBlur()
- onCheckboxChange()
- onCheckboxChangeFn
- onClick()
- onDblClick()
- onFocus()
- onKeyDown()
- onTreeAction()
- ɵcmp
- ɵfac
- row
- rowHeight
- rowIndex
- sanitizedValue
- sortDir
- sorts
- stripHtml()
- treeAction
- treeStatus
- value
- width
DataTableBodyComponent
- activate
- bodyHeight
- bodyWidth
- columnGroupWidths
- columnGroupWidthsWithoutGroup
- columns
- columnTrackingFn()
- detailToggle
- displayCheck
- emptyMessage
- externalPaging
- getAdjustedViewPortIndex()
- getBottomSummaryRowStyles()
- getDetailRowHeight
- getGroupHeight()
- getRowAndDetailHeight()
- getRowExpanded()
- getRowExpandedIdx()
- getRowHeight()
- getRowIndex()
- getRowsStyles()
- groupedRows
- groupExpansionDefault
- groupHeader
- groupRowsBy
- hideIndicator()
- indexes
- innerWidth
- listener
- loadingIndicator
- ngOnDestroy()
- ngOnInit()
- offset
- offsetX
- offsetY
- onBodyScroll()
- onTreeAction()
- ɵcmp
- ɵfac
- page
- pageSize
- recalcLayout()
- refreshRowHeightCache()
- rowClass
- rowContextmenu
- rowCount
- rowDetail
- rowExpansions
- rowHeight
- rowHeightsCache
- rowIdentity
- rowIndexes
- rows
- rowTrackingFn
- scroll
- scrollbarH
- scrollbarV
- scroller
- scrollHeight
- select
- selectCheck
- selected
- selectEnabled
- selectionType
- stylesByGroup()
- summaryHeight
- summaryPosition
- summaryRow
- temp
- toggleAllRows()
- toggleRowExpansion()
- trackByProp
- treeAction
- updateIndexes()
- updateOffsetY()
- updatePage()
- updateRows()
- virtualization
DataTableBodyRowComponent
- activate
- buildStylesByGroup()
- calcStylesByGroup()
- columns
- columnsTotalWidths
- columnTrackingFn()
- cssClass
- displayCheck
- expanded
- group
- innerWidth
- isSelected
- ngDoCheck()
- offsetX
- onActivate()
- onKeyDown()
- onMouseenter()
- onTreeAction()
- ɵcmp
- ɵfac
- recalculateColumns()
- row
- rowClass
- rowHeight
- rowIndex
- trackByGroups()
- treeAction
- treeStatus
DatatableComponent
- activate
- allRowsSelected
- bodyComponent
- bodyHeight
- calcPageSize()
- calcRowCount()
- columnMode
- columns
- columnTemplates
- count
- cssClasses
- displayCheck
- element
- externalPaging
- externalSorting
- footer
- footerHeight
- groupArrayBy()
- groupedRows
- groupExpansionDefault
- groupHeader
- groupRowsBy
- headerComponent
- headerHeight
- isCellSelection
- isCheckboxSelection
- isFixedHeader
- isFixedRow
- isHorScroll
- isMultiClickSelection
- isMultiSelection
- isSelectable
- isSingleSelection
- isVertScroll
- isVirtualized
- limit
- loadingIndicator
- messages
- ngAfterContentInit()
- ngAfterViewInit()
- ngDoCheck()
- ngOnDestroy()
- ngOnInit()
- offset
- onBodyPage()
- onBodyScroll()
- onBodySelect()
- onColumnContextmenu()
- onColumnReorder()
- onColumnResize()
- onColumnSort()
- onFooterPage()
- onHeaderSelect()
- onRowContextmenu()
- onTreeAction()
- onWindowResize()
- ɵcmp
- ɵfac
- page
- pageSize
- recalculate()
- recalculateColumns()
- recalculateDims()
- recalculatePages()
- reorder
- reorderable
- resize
- rowClass
- rowCount
- rowDetail
- rowDiffer
- rowHeight
- rowIdentity
- rows
- scroll
- scrollbarH
- scrollbarV
- select
- selectAllRowsOnPage
- selectCheck
- selected
- selectionType
- sort
- sorts
- sortType
- summaryHeight
- summaryPosition
- summaryRow
- swapColumns
- tableContextmenu
- targetMarkerTemplate
- trackByProp
- translateColumns()
- treeAction
- treeFromRelation
- treeToRelation
- virtualization
DataTableHeaderCellComponent
- allRowsSelected
- calcSortClass()
- calcSortDir()
- cellContext
- column
- columnContextmenu
- columnCssClasses
- headerHeight
- isCheckboxable
- isTarget
- maxWidth
- minWidth
- name
- ngOnInit()
- onContextmenu()
- onSort()
- ɵcmp
- ɵfac
- select
- selectFn
- selectionType
- sort
- sortAscendingIcon
- sortClass
- sortDescendingIcon
- sortDir
- sortFn
- sorts
- sortType
- sortUnsetIcon
- targetMarkerContext
- targetMarkerTemplate
- width
DataTableHeaderComponent
- allRowsSelected
- calcNewSorts()
- calcStylesByGroup()
- columnContextmenu
- columns
- columnTrackingFn()
- dealsWithGroup
- dragEventTarget
- getColumn()
- headerHeight
- headerWidth
- innerWidth
- ngOnDestroy()
- offsetX
- onColumnReordered()
- onColumnResized()
- onLongPressEnd()
- onLongPressStart()
- onSort()
- onTargetChanged()
- ɵcmp
- ɵfac
- reorder
- reorderable
- resize
- scrollbarH
- select
- selectionType
- setStylesByGroup()
- sort
- sortAscendingIcon
- sortDescendingIcon
- sorts
- sortType
- sortUnsetIcon
- targetMarkerContext
- targetMarkerTemplate
- trackByGroups()
Interfaces
Enums
Type Aliases
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 therows
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$: 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 implements DoCheck, OnDestroy {}
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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableBodyCellComponent, 'datatable-body-cell', never, { displayCheck: 'displayCheck'; group: 'group'; rowHeight: 'rowHeight'; isSelected: 'isSelected'; expanded: 'expanded'; rowIndex: 'rowIndex'; column: 'column'; row: 'row'; sorts: 'sorts'; treeStatus: 'treeStatus'; }, { activate: 'activate'; treeAction: 'treeAction' }, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyCellComponent, never>;
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;
class DataTableBodyComponent
class DataTableBodyComponent implements OnInit, OnDestroy {}
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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableBodyComponent, 'datatable-body', never, { scrollbarV: 'scrollbarV'; scrollbarH: 'scrollbarH'; loadingIndicator: 'loadingIndicator'; externalPaging: 'externalPaging'; rowHeight: 'rowHeight'; offsetX: 'offsetX'; emptyMessage: 'emptyMessage'; selectionType: 'selectionType'; selected: 'selected'; rowIdentity: 'rowIdentity'; rowDetail: 'rowDetail'; groupHeader: 'groupHeader'; selectCheck: 'selectCheck'; displayCheck: 'displayCheck'; trackByProp: 'trackByProp'; rowClass: 'rowClass'; groupedRows: 'groupedRows'; groupExpansionDefault: 'groupExpansionDefault'; innerWidth: 'innerWidth'; groupRowsBy: 'groupRowsBy'; virtualization: 'virtualization'; summaryRow: 'summaryRow'; summaryPosition: 'summaryPosition'; summaryHeight: 'summaryHeight'; pageSize: 'pageSize'; rows: 'rows'; columns: 'columns'; offset: 'offset'; rowCount: 'rowCount'; bodyHeight: 'bodyHeight'; }, { scroll: 'scroll'; page: 'page'; activate: 'activate'; select: 'select'; detailToggle: 'detailToggle'; rowContextmenu: 'rowContextmenu'; treeAction: 'treeAction'; }, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyComponent, never>;
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
methodReturns
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: 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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableBodyRowComponent, 'datatable-body-row', never, { columns: 'columns'; innerWidth: 'innerWidth'; expanded: 'expanded'; rowClass: 'rowClass'; row: 'row'; group: 'group'; isSelected: 'isSelected'; rowIndex: 'rowIndex'; displayCheck: 'displayCheck'; treeStatus: 'treeStatus'; offsetX: 'offsetX'; rowHeight: 'rowHeight'; }, { activate: 'activate'; treeAction: 'treeAction' }, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< DataTableBodyRowComponent, [null, { skipSelf: true }, null, null]>;
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;
class DataTableColumnCellDirective
class DataTableColumnCellDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DataTableColumnCellDirective, '[ngx-datatable-cell-template]', never, {}, {}, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnCellDirective, never>;
property template
template: TemplateRef<any>;
class DataTableColumnCellTreeToggle
class DataTableColumnCellTreeToggle {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DataTableColumnCellTreeToggle, '[ngx-datatable-tree-toggle]', never, {}, {}, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnCellTreeToggle, never>;
property template
template: TemplateRef<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: 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 ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DataTableColumnDirective, 'ngx-datatable-column', never, { name: 'name'; prop: 'prop'; frozenLeft: 'frozenLeft'; frozenRight: 'frozenRight'; flexGrow: 'flexGrow'; resizeable: 'resizeable'; comparator: 'comparator'; pipe: 'pipe'; sortable: 'sortable'; draggable: 'draggable'; canAutoResize: 'canAutoResize'; minWidth: 'minWidth'; width: 'width'; maxWidth: 'maxWidth'; checkboxable: 'checkboxable'; headerCheckboxable: 'headerCheckboxable'; headerClass: 'headerClass'; cellClass: 'cellClass'; isTreeColumn: 'isTreeColumn'; treeLevelIndent: 'treeLevelIndent'; summaryFunc: 'summaryFunc'; summaryTemplate: 'summaryTemplate'; _cellTemplateInput: 'cellTemplate'; _headerTemplateInput: 'headerTemplate'; _treeToggleTemplateInput: 'treeToggleTemplate'; }, {}, ['_cellTemplateQuery', '_headerTemplateQuery', '_treeToggleTemplateQuery']>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnDirective, never>;
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;
class DataTableColumnHeaderDirective
class DataTableColumnHeaderDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DataTableColumnHeaderDirective, '[ngx-datatable-header-template]', never, {}, {}, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnHeaderDirective, never>;
property template
template: TemplateRef<any>;
class DatatableComponent
class DatatableComponent implements OnInit, DoCheck, AfterViewInit {}
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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DatatableComponent, 'ngx-datatable', never, { targetMarkerTemplate: 'targetMarkerTemplate'; rows: 'rows'; groupRowsBy: 'groupRowsBy'; groupedRows: 'groupedRows'; columns: 'columns'; selected: 'selected'; scrollbarV: 'scrollbarV'; scrollbarH: 'scrollbarH'; rowHeight: 'rowHeight'; columnMode: 'columnMode'; headerHeight: 'headerHeight'; footerHeight: 'footerHeight'; externalPaging: 'externalPaging'; externalSorting: 'externalSorting'; limit: 'limit'; count: 'count'; offset: 'offset'; loadingIndicator: 'loadingIndicator'; selectionType: 'selectionType'; reorderable: 'reorderable'; swapColumns: 'swapColumns'; sortType: 'sortType'; sorts: 'sorts'; cssClasses: 'cssClasses'; messages: 'messages'; rowClass: 'rowClass'; selectCheck: 'selectCheck'; displayCheck: 'displayCheck'; groupExpansionDefault: 'groupExpansionDefault'; trackByProp: 'trackByProp'; selectAllRowsOnPage: 'selectAllRowsOnPage'; virtualization: 'virtualization'; treeFromRelation: 'treeFromRelation'; treeToRelation: 'treeToRelation'; summaryRow: 'summaryRow'; summaryHeight: 'summaryHeight'; summaryPosition: 'summaryPosition'; rowIdentity: 'rowIdentity'; }, { scroll: 'scroll'; activate: 'activate'; select: 'select'; sort: 'sort'; page: 'page'; reorder: 'reorder'; resize: 'resize'; tableContextmenu: 'tableContextmenu'; treeAction: 'treeAction'; }, ['rowDetail', 'groupHeader', 'footer', 'columnTemplates'], never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< DatatableComponent, [ { skipSelf: true }, { skipSelf: true }, null, null, null, null, { optional: true } ]>;
property page
page: EventEmitter<any>;
The table was paged either triggered by the pager or the body scroll.
property pageSize
pageSize: number;
property reorder
reorder: EventEmitter<any>;
Columns were re-ordered.
property reorderable
reorderable: boolean;
Enable/Disable ability to re-order columns by dragging them.
property resize
resize: EventEmitter<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: KeyValueDiffer<{}, {}>;
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 ofx === y
)
property rows
rows: any;
Gets the rows.
property scroll
scroll: EventEmitter<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: EventEmitter<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: EventEmitter<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: EventEmitter<{ event: MouseEvent; type: ContextmenuType; content: 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: EventEmitter<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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableFooterComponent, 'datatable-footer', never, { footerHeight: 'footerHeight'; rowCount: 'rowCount'; pageSize: 'pageSize'; offset: 'offset'; pagerLeftArrowIcon: 'pagerLeftArrowIcon'; pagerRightArrowIcon: 'pagerRightArrowIcon'; pagerPreviousIcon: 'pagerPreviousIcon'; pagerNextIcon: 'pagerNextIcon'; totalMessage: 'totalMessage'; footerTemplate: 'footerTemplate'; selectedCount: 'selectedCount'; selectedMessage: 'selectedMessage'; }, { page: 'page' }, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableFooterComponent, never>;
property page
page: EventEmitter<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 ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DatatableFooterDirective, 'ngx-datatable-footer', never, { footerHeight: 'footerHeight'; totalMessage: 'totalMessage'; selectedMessage: 'selectedMessage'; pagerLeftArrowIcon: 'pagerLeftArrowIcon'; pagerRightArrowIcon: 'pagerRightArrowIcon'; pagerPreviousIcon: 'pagerPreviousIcon'; pagerNextIcon: 'pagerNextIcon'; _templateInput: 'template'; }, {}, ['_templateQuery']>;
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<any>;
property totalMessage
totalMessage: string;
class DataTableFooterTemplateDirective
class DataTableFooterTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DataTableFooterTemplateDirective, '[ngx-datatable-footer-template]', never, {}, {}, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableFooterTemplateDirective, never>;
property template
template: TemplateRef<any>;
class DatatableGroupHeaderDirective
class DatatableGroupHeaderDirective {}
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DatatableGroupHeaderDirective, 'ngx-datatable-group-header', never, { rowHeight: 'rowHeight'; _templateInput: 'template' }, { toggle: 'toggle' }, ['_templateQuery']>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DatatableGroupHeaderDirective, never>;
property rowHeight
rowHeight: number | ((group?: any, index?: number) => number);
Row height is required when virtual scroll is enabled.
property template
readonly template: TemplateRef<any>;
property toggle
toggle: EventEmitter<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: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DatatableGroupHeaderTemplateDirective, '[ngx-datatable-group-header-template]', never, {}, {}, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< DatatableGroupHeaderTemplateDirective, never>;
property template
template: TemplateRef<any>;
class DataTableHeaderCellComponent
class DataTableHeaderCellComponent {}
constructor
constructor(cd: ChangeDetectorRef);
property allRowsSelected
allRowsSelected: boolean;
property cellContext
cellContext: any;
property column
column: TableColumn;
property columnContextmenu
columnContextmenu: EventEmitter<{ event: MouseEvent; column: 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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableHeaderCellComponent, 'datatable-header-cell', never, { sortType: 'sortType'; sortAscendingIcon: 'sortAscendingIcon'; sortDescendingIcon: 'sortDescendingIcon'; sortUnsetIcon: 'sortUnsetIcon'; isTarget: 'isTarget'; targetMarkerTemplate: 'targetMarkerTemplate'; targetMarkerContext: 'targetMarkerContext'; allRowsSelected: 'allRowsSelected'; selectionType: 'selectionType'; column: 'column'; headerHeight: 'headerHeight'; sorts: 'sorts'; }, { sort: 'sort'; select: 'select'; columnContextmenu: 'columnContextmenu' }, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableHeaderCellComponent, never>;
property select
select: EventEmitter<any>;
property selectFn
selectFn: any;
property selectionType
selectionType: SelectionType;
property sort
sort: EventEmitter<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: ChangeDetectorRef);
property allRowsSelected
allRowsSelected: boolean;
property columnContextmenu
columnContextmenu: EventEmitter<{ event: MouseEvent; column: 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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableHeaderComponent, 'datatable-header', never, { sortAscendingIcon: 'sortAscendingIcon'; sortDescendingIcon: 'sortDescendingIcon'; sortUnsetIcon: 'sortUnsetIcon'; scrollbarH: 'scrollbarH'; dealsWithGroup: 'dealsWithGroup'; targetMarkerTemplate: 'targetMarkerTemplate'; innerWidth: 'innerWidth'; sorts: 'sorts'; sortType: 'sortType'; allRowsSelected: 'allRowsSelected'; selectionType: 'selectionType'; reorderable: 'reorderable'; headerHeight: 'headerHeight'; columns: 'columns'; offsetX: 'offsetX'; }, { sort: 'sort'; reorder: 'reorder'; resize: 'resize'; select: 'select'; columnContextmenu: 'columnContextmenu'; }, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableHeaderComponent, never>;
property reorder
reorder: EventEmitter<any>;
property reorderable
reorderable: boolean;
property resize
resize: EventEmitter<any>;
property scrollbarH
scrollbarH: boolean;
property select
select: EventEmitter<any>;
property selectionType
selectionType: SelectionType;
property sort
sort: EventEmitter<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: EventEmitter<any>;
property count
count: number;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTablePagerComponent, 'datatable-pager', never, { pagerLeftArrowIcon: 'pagerLeftArrowIcon'; pagerRightArrowIcon: 'pagerRightArrowIcon'; pagerPreviousIcon: 'pagerPreviousIcon'; pagerNextIcon: 'pagerNextIcon'; size: 'size'; count: 'count'; page: 'page'; }, { change: 'change' }, never, 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: 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 ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DatatableRowDetailDirective, 'ngx-datatable-row-detail', never, { rowHeight: 'rowHeight'; _templateInput: 'template' }, { toggle: 'toggle' }, ['_templateQuery']>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDetailDirective, never>;
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: TemplateRef<any>;
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: any) => void;
Toggle the expansion of the row
class DatatableRowDetailTemplateDirective
class DatatableRowDetailTemplateDirective {}
constructor
constructor(template: TemplateRef<any>);
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DatatableRowDetailTemplateDirective, '[ngx-datatable-row-detail-template]', never, {}, {}, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDetailTemplateDirective, never>;
property template
template: TemplateRef<any>;
class DataTableRowWrapperComponent
class DataTableRowWrapperComponent implements DoCheck {}
constructor
constructor(cd: ChangeDetectorRef, differs: KeyValueDiffers);
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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableRowWrapperComponent, 'datatable-row-wrapper', never, { innerWidth: 'innerWidth'; rowDetail: 'rowDetail'; groupHeader: 'groupHeader'; offsetX: 'offsetX'; detailRowHeight: 'detailRowHeight'; row: 'row'; groupedRows: 'groupedRows'; rowIndex: 'rowIndex'; expanded: 'expanded'; }, { rowContextmenu: 'rowContextmenu' }, never, ['*']>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableRowWrapperComponent, never>;
property row
row: any;
property rowContext
rowContext: any;
property rowContextmenu
rowContextmenu: EventEmitter<{ event: MouseEvent; row: 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: EventEmitter<any>;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableSelectionComponent, 'datatable-selection', never, { rows: 'rows'; selected: 'selected'; selectEnabled: 'selectEnabled'; selectionType: 'selectionType'; rowIdentity: 'rowIdentity'; selectCheck: 'selectCheck'; }, { activate: 'activate'; select: 'select' }, never, ['*']>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableSelectionComponent, never>;
property prevIndex
prevIndex: number;
property rowIdentity
rowIdentity: any;
property rows
rows: any[];
property select
select: EventEmitter<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 ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< DataTableSummaryRowComponent, 'datatable-summary-row', never, { rows: 'rows'; columns: 'columns'; rowHeight: 'rowHeight'; offsetX: 'offsetX'; innerWidth: 'innerWidth'; }, {}, never, 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 DimensionsHelper
class DimensionsHelper {}
Gets the width of the scrollbar. Nesc for windows http://stackoverflow.com/a/13382873/888165
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<DimensionsHelper, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<DimensionsHelper>;
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: ElementRef);
property dragEnd
dragEnd: EventEmitter<any>;
property dragEventTarget
dragEventTarget: any;
property dragging
dragging: EventEmitter<any>;
property dragModel
dragModel: any;
property dragStart
dragStart: EventEmitter<any>;
property dragX
dragX: boolean;
property dragY
dragY: boolean;
property element
element: HTMLElement;
property isDragging
isDragging: boolean;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< DraggableDirective, '[draggable]', never, { dragEventTarget: 'dragEventTarget'; dragModel: 'dragModel'; dragX: 'dragX'; dragY: 'dragY'; }, { dragStart: 'dragStart'; dragging: 'dragging'; dragEnd: 'dragEnd' }, 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<any>;
property longPressing
longPressing: EventEmitter<any>;
property longPressStart
longPressStart: EventEmitter<any>;
property mouseX
mouseX: number;
property mouseY
mouseY: number;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< LongPressDirective, '[long-press]', never, { pressEnabled: 'pressEnabled'; pressModel: 'pressModel'; duration: 'duration'; }, { longPressStart: 'longPressStart'; longPressing: 'longPressing'; longPressEnd: 'longPressEnd'; }, 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: 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, [ typeof i1.DataTableFooterTemplateDirective, typeof i2.VisibilityDirective, typeof i3.DraggableDirective, typeof i4.ResizeableDirective, typeof i5.OrderableDirective, typeof i6.LongPressDirective, typeof i7.ScrollerComponent, typeof i8.DatatableComponent, typeof i9.DataTableColumnDirective, typeof i10.DataTableHeaderComponent, typeof i11.DataTableHeaderCellComponent, typeof i12.DataTableBodyComponent, typeof i13.DataTableFooterComponent, typeof i14.DataTablePagerComponent, typeof i15.ProgressBarComponent, typeof i16.DataTableBodyRowComponent, typeof i17.DataTableRowWrapperComponent, typeof i18.DatatableRowDetailDirective, typeof i19.DatatableGroupHeaderDirective, typeof i20.DatatableRowDetailTemplateDirective, typeof i21.DataTableBodyCellComponent, typeof i22.DataTableSelectionComponent, typeof i23.DataTableColumnHeaderDirective, typeof i24.DataTableColumnCellDirective, typeof i25.DataTableColumnCellTreeToggle, typeof i26.DatatableFooterDirective, typeof i27.DatatableGroupHeaderTemplateDirective, typeof i28.DataTableSummaryRowComponent ], [any], [ typeof i8.DatatableComponent, typeof i18.DatatableRowDetailDirective, typeof i19.DatatableGroupHeaderDirective, typeof i20.DatatableRowDetailTemplateDirective, typeof i9.DataTableColumnDirective, typeof i23.DataTableColumnHeaderDirective, typeof i24.DataTableColumnCellDirective, typeof i25.DataTableColumnCellTreeToggle, typeof i1.DataTableFooterTemplateDirective, typeof i26.DatatableFooterDirective, typeof i14.DataTablePagerComponent, typeof i27.DatatableGroupHeaderTemplateDirective ]>;
method forRoot
static forRoot: ( configuration: INgxDatatableConfig) => ModuleWithProviders<NgxDatatableModule>;
Configure global configuration via INgxDatatableConfig
Parameter configuration
class OrderableDirective
class OrderableDirective implements AfterContentInit, OnDestroy {}
constructor
constructor(differs: KeyValueDiffers, document: any);
property differ
differ: any;
property draggables
draggables: QueryList<DraggableDirective>;
property lastDraggingIndex
lastDraggingIndex: number;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< OrderableDirective, '[orderable]', never, {}, { reorder: 'reorder'; targetChanged: 'targetChanged' }, ['draggables']>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<OrderableDirective, never>;
property positions
positions: any;
property reorder
reorder: EventEmitter<any>;
property targetChanged
targetChanged: EventEmitter<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: ElementRef, renderer: Renderer2);
property element
element: HTMLElement;
property maxWidth
maxWidth: number;
property minWidth
minWidth: number;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< ResizeableDirective, '[resizeable]', never, { resizeEnabled: 'resizeEnabled'; minWidth: 'minWidth'; maxWidth: 'maxWidth'; }, { resize: 'resize' }, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<ResizeableDirective, never>;
property resize
resize: EventEmitter<any>;
property resizeEnabled
resizeEnabled: boolean;
property resizing
resizing: boolean;
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
constructor
constructor(document: any);
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 {}
constructor
constructor(ngZone: NgZone, element: ElementRef, renderer: Renderer2);
property element
element: any;
property onScrollListener
onScrollListener: any;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< ScrollerComponent, 'datatable-scroller', never, { scrollbarV: 'scrollbarV'; scrollbarH: 'scrollbarH'; scrollHeight: 'scrollHeight'; scrollWidth: 'scrollWidth'; }, { scroll: 'scroll' }, never, ['*']>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<ScrollerComponent, never>;
property parentElement
parentElement: any;
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)">
constructor
constructor(element: ElementRef, zone: NgZone);
property isVisible
isVisible: boolean;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< VisibilityDirective, '[visibilityObserver]', never, {}, { visible: 'visible' }, 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 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 {}
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
property canAutoResize
canAutoResize?: boolean;
Whether the column can automatically resize to fill space in the table.
TableColumn
property cellClass
cellClass?: string | ((data: any) => string | any);
CSS Classes for the cell
TableColumn
property cellTemplate
cellTemplate?: any;
Cell template ref
TableColumn
property checkboxable
checkboxable?: boolean;
Determines if column is checkbox
TableColumn
property comparator
comparator?: any;
Custom sort comparator
TableColumn
property draggable
draggable?: boolean;
Can the column be re-arranged by dragging
TableColumn
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.
TableColumn
property frozenLeft
frozenLeft?: boolean;
Determines if the column is frozen to the left
TableColumn
property frozenRight
frozenRight?: boolean;
Determines if the column is frozen to the right
TableColumn
property headerCheckboxable
headerCheckboxable?: boolean;
Header checkbox enabled
TableColumn
property headerClass
headerClass?: string | ((data: any) => string | any);
CSS classes for the header
TableColumn
property headerTemplate
headerTemplate?: any;
Header template ref
TableColumn
property isTreeColumn
isTreeColumn?: boolean;
Is tree displayed on this column
TableColumn
property maxWidth
maxWidth?: number;
Max width of the column
TableColumn
property minWidth
minWidth?: number;
Min width of the column
TableColumn
property name
name?: string;
Column name or label
TableColumn
property pipe
pipe?: PipeTransform;
Custom pipe transforms
TableColumn
property prop
prop?: TableColumnProp;
Property to bind to the row. Example:
someField
orsome.field.nested
, 0 (numeric)If left blank, will use the name as camel case conversion
TableColumn
property resizeable
resizeable?: boolean;
Can the column be resized
TableColumn
property sortable
sortable?: boolean;
Can the column be sorted
TableColumn
property summaryFunc
summaryFunc?: (cells: any[]) => any;
Summary function
TableColumn
property summaryTemplate
summaryTemplate?: any;
Summary cell template ref
TableColumn
property treeLevelIndent
treeLevelIndent?: number;
Width of the tree level indent
TableColumn
property treeToggleTemplate
treeToggleTemplate?: any;
Tree toggle template ref
TableColumn
property width
width?: number;
The default width of the column, in pixels
TableColumn
Enums
enum ClickType
enum ClickType { single = 'single', double = 'double',}
enum ColumnMode
enum ColumnMode { standard = 'standard', flex = 'flex', force = 'force',}
enum ContextmenuType
enum ContextmenuType { header = 'header', body = 'body',}
enum Keys
enum Keys { up = 38, down = 40, return = 13, escape = 27, left = 37, right = 39,}
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',}
Type Aliases
type OptionalValueGetter
type OptionalValueGetter = (row: any) => any | undefined;
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 (56)
- lib/components/body/body-cell.component.d.ts
- lib/components/body/body-group-header-template.directive.d.ts
- lib/components/body/body-group-header.directive.d.ts
- lib/components/body/body-row-wrapper.component.d.ts
- lib/components/body/body-row.component.d.ts
- lib/components/body/body.component.d.ts
- lib/components/body/progress-bar.component.d.ts
- lib/components/body/scroller.component.d.ts
- lib/components/body/selection.component.d.ts
- lib/components/body/summary/summary-row.component.d.ts
- lib/components/columns/column-cell.directive.d.ts
- lib/components/columns/column-header.directive.d.ts
- lib/components/columns/column.directive.d.ts
- lib/components/columns/tree.directive.d.ts
- lib/components/datatable.component.d.ts
- lib/components/footer/footer-template.directive.d.ts
- lib/components/footer/footer.component.d.ts
- lib/components/footer/footer.directive.d.ts
- lib/components/footer/pager.component.d.ts
- lib/components/header/header-cell.component.d.ts
- lib/components/header/header.component.d.ts
- lib/components/row-detail/row-detail-template.directive.d.ts
- lib/components/row-detail/row-detail.directive.d.ts
- lib/directives/draggable.directive.d.ts
- lib/directives/long-press.directive.d.ts
- lib/directives/orderable.directive.d.ts
- lib/directives/resizeable.directive.d.ts
- lib/directives/visibility.directive.d.ts
- lib/ngx-datatable.module.d.ts
- lib/services/column-changes.service.d.ts
- lib/services/dimensions-helper.service.d.ts
- lib/services/scrollbar-helper.service.d.ts
- lib/types/click.type.d.ts
- lib/types/column-mode.type.d.ts
- lib/types/contextmenu.type.d.ts
- lib/types/selection.type.d.ts
- lib/types/sort-direction.type.d.ts
- lib/types/sort-prop-dir.type.d.ts
- lib/types/sort.type.d.ts
- lib/types/table-column.type.d.ts
- lib/utils/camel-case.d.ts
- lib/utils/column-helper.d.ts
- lib/utils/column-prop-getters.d.ts
- lib/utils/column.d.ts
- lib/utils/elm-from-point.d.ts
- lib/utils/id.d.ts
- lib/utils/keys.d.ts
- lib/utils/math.d.ts
- lib/utils/prefixes.d.ts
- lib/utils/row-height-cache.d.ts
- lib/utils/selection.d.ts
- lib/utils/sort.d.ts
- lib/utils/throttle.d.ts
- lib/utils/translate.d.ts
- lib/utils/tree.d.ts
- swimlane-ngx-datatable.d.ts
Dependencies (1)
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 .
Package analyzed in 7502 ms. - Missing or incorrect documentation? Open an issue for this package.