File

packages/eui/packages/components/eui-table-v2/eui-table-v2.component.ts

Description

The eui-table-v2 component has been built to offer various requested features including fast performance and excellent level of control over tabular presentation of data.

The eui-table is quite simple of usage and requires :

Example :
- rows : the data value input as an array of objects, usually fetched from a service (data payload),
- view : this is the template for the presentation with its various options such as the search filter, the paginator, sortable columns, etc.

Implements

AfterContentInit AfterViewInit OnDestroy OnInit OnChanges

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

data
Type : DATA[]
Default value : []

Data to display in the table.

filter
Type : EuiTableV2FilterComponent

eui-table-v2-filter reference passed to the table.

hasStickyCols
Type : boolean
Default value : false

Wheter the table col is sticky. In order to use eui-table sticky feature and control the scrolling overflow, we recommend to wrap the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height.

Only first or latest columns can be sticky.

hasStickyFooter
Type : boolean
Default value : false

Wheter the table footer is sticky. In order to use eui-table sticky feature and control the scrolling overflow, we recommend to wrap the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height.

hasStickyHeader
Type : boolean
Default value : false

Wheter the table header is sticky. In order to use eui-table sticky feature and control the scrolling overflow, we recommend to wrap the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height.

isAsync
Type : boolean
Default value : false

Wheter the table uses async data. In this configuration, pagination, filtering and sorting are managed by the backend.

When data are async, paginator and filter must not be bound to the eui-table component like in other sample.

isColsOrderable
Type : boolean
Default value : false

Wheter the cols can be reordered.

isLoading
Type : boolean
Default value : false

Wheter a loading spinner is displayed in the table.

isSelectOnlyVisibleRows
Type : boolean
Default value : true

Wheter the 'select all' checkbox in the header will select ONLY items in the current page.

If false, all items across the pages will be selected.

isTableBordered
Type : boolean
Default value : false
isTableResponsive
Type : boolean
Default value : false

Wheter the table is reponsive.

isVirtualScroll
Type : boolean
Default value : false

Wheter the table uses virtual scroll to display data.

eui-table-v2 selector needs to be used in order to make virtual scroll working properly.

isVirtualScrollCache
Type : boolean
Default value : false

In combination with isVirtualScroll. Wheter the table caches the data when scroll. Means that if a scroll level has already loads data, the scrollChange event won't be emitted.

itemSize
Type : number
Default value : 41

In combination with isVirtualScroll. Row height use by virtual scroll calculation.

paginator
Type : EuiPaginatorComponent

eui-paginator reference passed to the table.

preselectedRows
Type : DATA[]
Default value : []

In combination with isDataSelectable. Rows to be selected by default.

propId
Type : string
Default value : 'id'

Unicity criteria of the data.

virtualScrollAsyncItemsLength
Type : number
Default value : 0

In combination with isVirtualScroll. Total length of data that are displayed in the table with virtual scroll.

virtualScrollNbRows
Type : number
Default value : 50

In combination with isVirtualScroll. Nb of data items to load in the table.

Outputs

rowsSelect
Type : EventEmitter

In combination with isDataSelectable on a row. Event emitted when the selection changes with an array of data.

scrollChange
Type : EventEmitter

In combination with isVirtualScroll. Event emitted when a scroll is done.

sortChange
Type : EventEmitter

In combination with isSortable on the cols. Event emitted when the sort changes with the property displayed in the col and the order as ASC or DESC.

HostBindings

class
Type : string

Methods

Public filterData
filterData(filter: string, r: DATA[])

Filters the table's data based on a string declared in EuiTableV2FilterComponent

Parameters :
Name Type Optional Description
filter string No

String to filter the data

r DATA[] No

Array of data to filter

Returns : DATA[]

The set of data matching the filter

Public getFilteredData
getFilteredData()

Return an array with the data matching the string filter

Returns : DATA[]
Public moveItem
moveItem(itemId: number | string, fromIndex: number, toIndex: number)

Moves an element within the rendered data array.

Parameters :
Name Type Optional Description
itemId number | string No
  • The identifier (default: id) of the element to move.
fromIndex number No
  • The current index of the element to move.
toIndex number No
  • The new desired position for the element.
Returns : void
Public selectAllRows
selectAllRows()

Select all rows

Returns : void
Public setSort
setSort(sorts: Sort[])

Sort the table's data.

Parameters :
Name Type Optional Description
sorts Sort[] No

An array of SortOrder. See SortOrder

Returns : void
Public unselectAllRows
unselectAllRows()

Unselect all rows

Returns : void

Properties

tbodyRef
Type : ElementRef<HTMLElement>
Decorators :
@ViewChild('tbodyRef')
templates
Type : QueryList<EuiTemplateDirective>
Decorators :
@ContentChildren(EuiTemplateDirective)
tfootRef
Type : ElementRef<HTMLElement>
Decorators :
@ViewChild('tfootRef')
theadRef
Type : ElementRef<HTMLElement>
Decorators :
@ViewChild('theadRef')

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

results matching ""

    No results matching ""