eui documentation
  1. Components
  2. EuiTableComponent

File

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

Description

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.

Implements

AfterContentInit OnInit OnDestroy AfterViewInit OnChanges

Metadata

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

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

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

eui-table-filter reference passed to the table.
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 false, all items across the pages will be selected.
loading
Type : boolean
Default value : false

Whether a loading spinner is displayed in the table.
paginable
Type : boolean
Default value : false
paginator
Type : EuiPaginatorComponent

eui-paginator reference passed to the table.
preselectedRows
Type : any[]
Default value : []

In combination with isDataSelectable. Rows to be selected by default.
propId
Type : string
Default value : 'id'

Unicity criteria of the data.
rows
Type : any[]
Default value : []

Data to display in the table.

Outputs

multiSortChange
Type : EventEmitter

In combination with sortable & isMultiSortable on the cols. Event emitted when the sort changes with the property displayed in the col and the order as ASC or DESC.
selectedRows
Type : EventEmitter

In combination with isSelectable on a row. Event emitted when the selection changes with an array of data.
sortChange
Type : EventEmitter

In combination with sortable 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 filterRows
filterRows(filter: string, r: any[])

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

Parameters :
Name Type Optional Description
filter string No

String to filter the data
r any[] No

Array of data to filter
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 :
Name Type Optional Description
rows any[] No

Rows to select.
Returns : void
Public setSort
setSort(sort: string | null, order: "asc" | "desc" | null)

Sort the table's data.

Parameters :
Name Type Optional Description
sort string | null No

The sort property and order.
order "asc" | "desc" | null No
Returns : void
Public unselectAllRows
unselectAllRows()

Unselect all rows

Returns : void

Properties

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')

Accessors

cssClasses
getcssClasses()

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

Returns : string

results matching ""

    No results matching ""