Info

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 :

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.

High-performance data table component with extensive features for tabular data presentation. Supports virtual scrolling for large datasets, pagination, sorting, filtering, and row selection. Provides sticky headers/footers/columns, responsive layouts, and async data loading. Implements customizable templates for headers, body rows, footers, and empty states. Commonly used for data grids, reports, dashboards, and any structured data display requiring advanced table functionality.

Basic Usage

Example :

<table euiTable [data]="data" isTableCompact>
    <ng-template euiTemplate="header">
        <tr>
            <th>Country</th>
            <th>Year</th>
            <th>ISO</th>
            <th>Population</th>
            <th>Capital city</th>
        </tr>
    </ng-template>
    <ng-template let-row euiTemplate="body">
        <tr>
            <td>{{ row.country }}</td>
            <td>{{ row.year }}</td>
            <td>{{ row.iso }}</td>
            <td>{{ row.population | number }}</td>
            <td>{{ row.capital }}</td>
        </tr>
    </ng-template>
    <ng-template euiTemplate="footer">
        <tr>
            <td class="eui-u-text-center" colspan="5">Footer</td>
        </tr>
    </ng-template>
</table>

Typescript logic

Example :

data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]

With Pagination and Selection and template when no data

Example :

<table euiTable isTableResponsive [data]="data" [paginator]="paginator" (rowsSelect)="onRowsSelect($event)">
    <ng-template euiTemplate="header">
        <tr [isHeaderSelectable]="hasSelectionFeature">
            <th>Country</th>
            <th>Year</th>
            <th>ISO</th>
            <th>Population</th>
            <th>Capital city</th>
        </tr>
    </ng-template>
    <ng-template let-row euiTemplate="body">
        <tr [isDataSelectable]="row">
            <td data-col-label="Country">{{ row.country }}</td>
            <td data-col-label="Year">{{ row.year }}</td>
            <td data-col-label="ISO">{{ row.iso }}</td>
            <td data-col-label="Population">{{ row.population | number }}</td>
            <td data-col-label="Capital city">{{ row.capital }}</td>
        </tr>
    </ng-template>
    <ng-template euiTemplate="footer">
        <tr>
            <td class="eui-u-text-center" colspan="5">Footer</td>
        </tr>
    </ng-template>
    <ng-template let-row euiTemplate="noData">
        <tr>
            <td class="eui-u-text-center" colspan="5">There are currently no data to display</td>
        </tr>
    </ng-template>
</table>
<eui-paginator #paginator [pageSizeOptions]="[5, 10, 25, 50]" [pageSize]="10" (pageChange)="onPageChange($event)" [isHidden]="!hasPagination"></eui-paginator>

Typescript logic

Example :

data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]

onRowsSelect(selected: Country[]): void {
    console.log(selected);
}

Imports

Example :

import { EUI_TABLE } from '@eui/components/eui-table';
import { EuiTemplateDirective } from '@eui/components/directives';

imports: [...EUI_TABLE, EuiTemplateDirective]

Accessibility

Use semantic table elements (thead, tbody, tfoot, th, td)
Provide scope="col" or scope="row" on header cells
Use caption element to describe table purpose
Ensure sufficient color contrast for text and borders

Notes

Virtual scrolling improves performance for large datasets (1000+ rows)
Sticky headers/footers/columns require explicit height on container
Use [isTableCompact]="true" for dense data display
Sortable columns require isSortable directive on th elements

Implements

AfterContentInit AfterViewInit OnDestroy OnInit OnChanges

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
encapsulation	`ViewEncapsulation.None`
HostDirectives	`BaseStatesDirective`
providers	`EuiTableSelectableRowService` `EuiTableSortService`
selector	`eui-table, table[euiTable]`
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.component.html`

Index

Inputs

data

Type : DATA[]

Default value : []

Data to display in the table.

filter

Type : EuiTableFilterComponent

eui-table-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__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__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__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

Whether the table use bordered styles.

isTableCompact

Type : boolean

Default value : false

Whether the table use compact design.

isTableFixedLayout

Type : boolean

Default value : false

Wheter the table has a fixed layout which forces a table to use fixed column widths, ignoring content size for faster and more predictable layout.

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

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

Methods

Public filterData

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

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

File

Description

Basic Usage

With Pagination and Selection and template when no data

Imports

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""