packages/eui/packages/components/eui-table-v2/eui-table-v2.component.ts
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.
AfterContentInit
AfterViewInit
OnDestroy
OnInit
OnChanges
changeDetection | ChangeDetectionStrategy.OnPush |
encapsulation | ViewEncapsulation.None |
HostDirectives |
BaseStatesDirective
|
providers |
EuiTableV2SelectableRowService
EuiTableV2SortService
|
selector | eui-table-v2, table[euiTableV2] |
imports |
NgTemplateOutlet
ScrollingModule
FormsModule
ReactiveFormsModule
TranslateModule
EUI_ICON
EUI_SKELETON
EUI_LIST
EUI_ICON_INPUT
EUI_BUTTON
EUI_INPUT_TEXT
EUI_INPUT_CHECKBOX
|
styleUrls | ./styles/_index.scss |
templateUrl | ./eui-table-v2.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
data |
Type : DATA[]
|
Default value : []
|
Data to display in the table. |
filter |
Type : EuiTableV2FilterComponent
|
|
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 |
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.
|
isVirtualScrollCache |
Type : boolean
|
Default value : false
|
In combination with |
itemSize |
Type : number
|
Default value : 41
|
In combination with |
paginator |
Type : EuiPaginatorComponent
|
|
preselectedRows |
Type : DATA[]
|
Default value : []
|
In combination with |
propId |
Type : string
|
Default value : 'id'
|
Unicity criteria of the data. |
virtualScrollAsyncItemsLength |
Type : number
|
Default value : 0
|
In combination with |
virtualScrollNbRows |
Type : number
|
Default value : 50
|
In combination with |
rowsSelect |
Type : EventEmitter
|
In combination with |
scrollChange |
Type : EventEmitter
|
In combination with |
sortChange |
Type : EventEmitter
|
In combination with |
class |
Type : string
|
Public filterData | ||||||||||||
filterData(filter: string, r: DATA[])
|
||||||||||||
Filters the table's data based on a string declared in
Parameters :
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 :
Returns :
void
|
Public selectAllRows |
selectAllRows()
|
Select all rows
Returns :
void
|
Public setSort |
setSort(sorts: Sort[])
|
Sort the table's data.
Returns :
void
|
Public unselectAllRows |
unselectAllRows()
|
Unselect all rows
Returns :
void
|
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')
|
cssClasses |
getcssClasses()
|
Computes and returns the CSS classes for the component based on its current state.
Returns :
string
|