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

###### Properties
tbodyRef templates tfootRef theadRef
###### Methods
Public filterData Public getFilteredData Public moveItem Public selectAllRows Public setSort Public unselectAllRows
###### Inputs
data filter hasStickyCols hasStickyFooter hasStickyHeader isAsync isColsOrderable isLoading isSelectOnlyVisibleRows isTableBordered isTableCompact isTableFixedLayout isTableResponsive isVirtualScroll isVirtualScrollCache itemSize paginator preselectedRows propId virtualScrollAsyncItemsLength virtualScrollNbRows
###### Outputs
rowsSelect scrollChange sortChange
###### HostBindings
class
###### Accessors
cssClasses

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

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

# results matching ""

# No results matching ""