packages/eui/packages/components/eui-table/eui-table.component.ts
The eui-table
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 : - 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
OnInit
OnDestroy
AfterViewInit
OnChanges
changeDetection | ChangeDetectionStrategy.OnPush |
encapsulation | ViewEncapsulation.None |
HostDirectives |
BaseStatesDirective
|
providers |
EuiTableSortService
EuiTableSelectableRowService
|
selector | eui-table, table[euiTable] |
imports |
NgTemplateOutlet
|
styleUrls | ./styles/_index.scss |
templateUrl | ./eui-table.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
asyncTable |
Type : boolean
|
Default value : false
|
Whether the table uses async data. In this configuration, the backend manages pagination, filtering, and sorting. When data are async, paginator and filter must not be bound to the eui-table component like in another sample. |
e2eAttr |
Type : string
|
Default value : 'eui-table'
|
e2e attribute. |
euiTableBordered |
Type : boolean
|
Default value : false
|
euiTableCards |
Type : boolean
|
Default value : false
|
euiTableCompact |
Type : boolean
|
Default value : false
|
Whether the table use compact design. |
euiTableDraggable |
Type : boolean
|
Default value : false
|
Whether the table has draggable rows. |
euiTableFixedLayout |
Type : boolean
|
Default value : false
|
euiTableResponsive |
Type : boolean
|
Default value : false
|
Whether the table is responsive. |
filter |
Type : EuiTableFilterComponent
|
|
hasStickyColumns |
Type : boolean
|
Default value : false
|
Whether the table col is sticky. To use the eui-table sticky feature and control the scrolling overflow, we recommend wrapping the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height. Only the first or latest columns can be sticky. |
hasStickyHeader |
Type : boolean
|
Default value : false
|
Whether the table header is sticky. To use the eui-table sticky feature and control the scrolling overflow, we recommend wrapping the table with the provided eui-table-v2__scrollable-wrapper class and set your custom table width and/or height. |
isColsOrderable |
Type : boolean
|
Default value : false
|
Whether the cols can be reordered. |
isHoverable |
Type : boolean
|
Default value : false
|
Whether the cells have a hover effect. |
isSelectOnlyVisibleRows |
Type : boolean
|
Default value : false
|
Whether the 'select all' checkbox in the header will select ONLY items in the current page. If |
loading |
Type : boolean
|
Default value : false
|
Whether a loading spinner is displayed in the table. |
paginable |
Type : boolean
|
Default value : false
|
paginator |
Type : EuiPaginatorComponent
|
|
preselectedRows |
Type : any[]
|
Default value : []
|
In combination with |
propId |
Type : string
|
Default value : 'id'
|
Unicity criteria of the data. |
rows |
Type : any[]
|
Default value : []
|
Data to display in the table. |
selectedRows |
Type : EventEmitter
|
In combination with |
sortChange |
Type : EventEmitter
|
In combination with |
class |
Type : string
|
Public filterRows | ||||||||||||
filterRows(filter: string, r: any[])
|
||||||||||||
Filters the table's data based on a string declared in
Parameters :
Returns :
any[]
The set of data matching the filter |
Public selectAllRows |
selectAllRows()
|
Select all rows
Returns :
void
|
Public selectRows | ||||||||
selectRows(rows: any[])
|
||||||||
Selects a set of rows.
Parameters :
Returns :
void
|
Public setSort | ||||||||||||
setSort(sort: string | null, order: "asc" | "desc" | null)
|
||||||||||||
Sort the table's data.
Parameters :
Returns :
void
|
Public unselectAllRows |
unselectAllRows()
|
Unselect all rows
Returns :
void
|
Public bodyTemplate |
Type : TemplateRef<any>
|
Public captionTemplate |
Type : TemplateRef<any>
|
Public emptyMessageTemplate |
Type : TemplateRef<any>
|
Public filteredRows |
Type : []
|
Default value : []
|
Public footerTemplate |
Type : TemplateRef<any>
|
Public headerTemplate |
Type : TemplateRef<any>
|
Public page |
Type : number
|
Default value : 0
|
Public pageSize |
Type : number
|
Default value : 0
|
Public rowsRendered |
Type : any[]
|
Default value : []
|
Public showStickyHeader |
Default value : false
|
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
|