### 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

- Public bodyTemplate
- Public captionTemplate
- Public emptyMessageTemplate
- Public filteredRows
- Public footerTemplate
- Public headerTemplate
- Public page
- Public pageSize
- Public rowsRendered
- Public showStickyHeader
- tbodyRef
- templates
- tfootRef
- theadRef

###### Methods

- Public filterRows
- Public selectAllRows
- Public selectRows
- Public setSort
- Public unselectAllRows

###### Inputs

- asyncTable
- e2eAttr
- euiTableBordered
- euiTableCards
- euiTableCompact
- euiTableDraggable
- euiTableFixedLayout
- euiTableResponsive
- filter
- hasStickyColumns
- hasStickyHeader
- isColsOrderable
- isHoverable
- isSelectOnlyVisibleRows
- loading
- paginable
- paginator
- preselectedRows
- propId
- rows

###### Outputs

- multiSortChange
- selectedRows
- sortChange

###### HostBindings

- class

###### Accessors

- cssClasses

### 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
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""