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



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

## Inputs
- **asyncTable**: `boolean` - 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**: `string` - e2e attribute.
- **euiTableBordered**: `boolean` - 
- **euiTableCards**: `boolean` - 
- **euiTableCompact**: `boolean` - Whether the table use compact design.
- **euiTableDraggable**: `boolean` - Whether the table has draggable rows.
- **euiTableFixedLayout**: `boolean` - 
- **euiTableResponsive**: `boolean` - Whether the table is responsive.
- **filter**: `EuiTableFilterComponent` - `eui-table-filter` reference passed to the table.
- **hasStickyColumns**: `boolean` - 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**: `boolean` - 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**: `boolean` - Whether the cols can be reordered.
- **isHoverable**: `boolean` - Whether the cells have a hover effect.
- **isSelectOnlyVisibleRows**: `boolean` - 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**: `boolean` - Whether a loading spinner is displayed in the table.
- **paginable**: `boolean` - 
- **paginator**: `EuiPaginatorComponent` - `eui-paginator` reference passed to the table.
- **preselectedRows**: `any[]` - In combination with `isDataSelectable`. Rows to be selected by default.
- **propId**: `string` - Unicity criteria of the data.
- **rows**: `any[]` - Data to display in the table.

## Outputs
- **multiSortChange**: `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**: `EventEmitter` - In combination with `isSelectable` on a row. Event emitted when the selection changes with an array of data.
- **sortChange**: `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`.
