# EuiTableComponent

**Type:** component



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.

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
```html
<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
```ts
data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]
```

### With Pagination and Selection and template when no data
```html
<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
```ts
data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]

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

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


**Selector:** `eui-table, table[euiTable]`

## Inputs
- **data**: `DATA[]` - Data to display in the table.
- **filter**: `EuiTableFilterComponent` - `eui-table-filter` reference passed to the table.
- **hasStickyCols**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `boolean` - 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**: `boolean` - Wheter the cols can be reordered.
- **isLoading**: `boolean` - Wheter a loading spinner is displayed in the table.
- **isSelectOnlyVisibleRows**: `boolean` - 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**: `boolean` - Whether the table use bordered styles.
- **isTableCompact**: `boolean` - Whether the table use compact design.
- **isTableFixedLayout**: `boolean` - 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**: `boolean` - Wheter the table is reponsive.
- **isVirtualScroll**: `boolean` - 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**: `boolean` - 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**: `number` - In combination with `isVirtualScroll`. Row height use by virtual scroll calculation.
- **paginator**: `EuiPaginatorComponent` - `eui-paginator` reference passed to the table.
- **preselectedRows**: `DATA[]` - In combination with `isDataSelectable`. Rows to be selected by default.
- **propId**: `string` - Unicity criteria of the data.
- **virtualScrollAsyncItemsLength**: `number` - In combination with `isVirtualScroll`. Total length of data that are displayed in the table with virtual scroll.
- **virtualScrollNbRows**: `number` - In combination with `isVirtualScroll`. Nb of data items to load in the table.

## Outputs
- **rowsSelect**: `EventEmitter` - In combination with `isDataSelectable` on a row. Event emitted when the selection changes with an array of data.
- **scrollChange**: `EventEmitter` - In combination with `isVirtualScroll`. Event emitted when a scroll is done.
- **sortChange**: `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`.