Custom tables

If you need more custom behavior than either EuiBasicTable or EuiInMemoryTable allow, you can opt to completely construct your own table from EUI's low-level table building block components, like EuiTableHeader and EuiTableRowCell.

There are several important caveats to keep in mind while doing so:

Selection and filtering

Custom table implementations must completely handle their own selection and filtering.

Mobile headers

You must supply a mobileOptions.header prop equivalent to the column header on each EuiTableRowCell so that the mobile version will use that to populate the per cell headers.

Also, in order to add mobile support for selection and filtering toolbars, you will need to implement the EuiTableHeaderMobile component as a wrapper around these and use EuiTableSortMobile and EuiTableSortMobileItem components to supply mobile sorting. See demo below.

Cell text behavior

Set individual props like the truncateText prop to cells to enforce a single-line behavior and truncate their contents, or set the textOnly prop to false if you need the contents to be a direct descendent of the cell.

Below is one of many ways you might set up a custom table that account for all the above notes:

Loading...

Props

EuiTable

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop compressed# ↦	Description and type Type: boolean ↦	Default value ↵
Prop responsiveBreakpoint# ↦	Description and type Named breakpoint. Below this size, the table will collapse into responsive cards. Pass false to never collapse to a mobile view, or inversely, true to always render mobile-friendly cards. Type: string | boolean ↦	Default value m ↵
Prop tableLayout# ↦	Description and type Sets the table-layout CSS property Type: "fixed" | "auto" ↦	Default value fixed ↵
Prop hasBackground# ↦	Description and type Toggle the table's background Type: boolean ↦	Default value true ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiTableBody

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop bodyRef# ↦	Description and type Type: Ref<HTMLTableSectionElement> ↦	Default value ↵

𐘂𐘂

EuiTableFooter

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiTableFooterCell

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiTableHeader

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop children# ↦	Description and type Children must be valid DOM structure residing within <thead>. Use <td> | <th> by default, or <tr><th/></tr> when wrapWithTableRow=false Type: ReactNode ↦	Default value ↵
Prop wrapWithTableRow# ↦	Description and type Automatically adds a wrapping <tr> element around the children Type: boolean ↦	Default value true ↵

𐘂𐘂

EuiTableHeaderCell

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop align# ↦	Description and type Type: HorizontalAlignment ↦	Default value left ↵
Prop isSortAscending# ↦	Description and type Type: boolean ↦	Default value ↵
Prop isSorted# ↦	Description and type Type: boolean ↦	Default value ↵
Prop mobileOptions# ↦	Description and type Type: Pick<EuiTableRowCellMobileOptionsShape, "show" | "only"> ↦	Default value ↵
Prop onSort# ↦	Description and type Type: NoArgCallback<void> ↦	Default value ↵
Prop scope# ↦	Description and type Type: "col" | "colgroup" | "row" | "rowgroup" ↦	Default value ↵
Prop width# ↦	Description and type Type: string | number ↦	Default value ↵
Prop tooltipProps# ↦	Description and type Allows adding an icon with a tooltip displayed next to the name Type: EuiTableColumnNameTooltipProps ↦	Default value ↵
Prop description# ↦	Description and type Type: string ↦	Default value ↵
Prop readOnly# ↦	Description and type Shows the sort indicator but removes the button Type: boolean ↦	Default value ↵
Prop append# ↦	Description and type Content rendered outside the visible cell content wrapper. Useful for, e.g. screen reader text. Used by EuiBasicTable to render hidden copy markers Type: ReactNode ↦	Default value ↵

𐘂𐘂

EuiTableHeaderCellCheckbox

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop width# ↦	Description and type Type: string | number ↦	Default value ↵
Prop append# ↦	Description and type Type: ReactNode ↦	Default value ↵

𐘂𐘂

EuiTablePagination

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop showPerPageOptions# ↦	Description and type Option to completely hide the "Rows per page" selector. Type: boolean ↦	Default value true ↵
Prop itemsPerPage# ↦	Description and type Current selection for "Rows per page". Pass 0 to display the selected "Show all" option and hide the pagination. Type: number ↦	Default value 10 ↵
Prop itemsPerPageOptions# ↦	Description and type Custom array of options for "Rows per page". Pass 0 as one of the options to create a "Show all" option. Type: number[] ↦	Default value [10, 25, 50] ↵
Prop onChangeItemsPerPage# ↦	Description and type Click handler that passes back selected pageSize number Type: ItemsPerPageChangeHandler ↦	Default value ↵
Prop onChangePage# ↦	Description and type Type: (pageIndex: number) => void ↦	Default value ↵
Prop aria-controls# ↦	Description and type Requires the id of the table being controlled Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop responsive# ↦	Description and type Automatically reduces to the compressed version on smaller screens. Remove completely with false or provide your own list of responsive breakpoints. Type: false | string[] ↦	Default value ↵
Prop compressed# ↦	Description and type If true, will only show next/prev arrows and simplified number set. Type: boolean ↦	Default value ↵
Prop pageCount# ↦	Description and type The total number of pages. Pass 0 if total count is unknown. Type: number ↦	Default value ↵
Prop activePage# ↦	Description and type The current page using a zero based index. So if you set the activePage to 1, it will activate the second page. Pass -1 for forcing to last page. Type: number ↦	Default value ↵

𐘂𐘂

EuiTableRow

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop hasSelection# ↦	Description and type Indicates if the table has a single column of checkboxes for selecting rows (used for mobile styling) Type: boolean ↦	Default value ↵
Prop isSelectable# ↦	Description and type Indicates that the current row's checkbox is selectable / not disabled Type: boolean ↦	Default value ↵
Prop isSelected# ↦	Description and type Indicates the current row has been selected Type: boolean ↦	Default value ↵
Prop hasActions# ↦	Description and type Indicates if the table has a dedicated column for actions (used for mobile styling and desktop action hover behavior) Type: boolean | "custom" ↦	Default value ↵
Prop isExpandable# ↦	Description and type Indicates if the row will have an expanded row Type: boolean ↦	Default value ↵
Prop isExpandedRow# ↦	Description and type Indicates if the row will be the expanded row Type: boolean ↦	Default value ↵

𐘂𐘂

EuiTableRowCell

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop valign# ↦	Description and type Vertical alignment of the content in the cell Type: "top" | "bottom" | "baseline" | "middle" ↦	Default value middle ↵
Prop setScopeRow# ↦	Description and type Indicates whether the cell should be marked as the heading for its row Type: boolean ↦	Default value ↵
Prop hasActions# ↦	Description and type Indicates if the cell is dedicated to row actions (used for mobile styling and desktop action hover behavior) Type: boolean | "custom" ↦	Default value ↵
Prop isExpander# ↦	Description and type Indicates if the column is dedicated as the expandable row toggle Type: boolean ↦	Default value ↵
Prop mobileOptions# ↦	Description and type Mobile options for displaying differently at small screens; See EuiTableRowCellMobileOptionsShape Type: EuiTableRowCellMobileOptionsShape ↦	Default value ↵
Prop append# ↦	Description and type Content rendered outside the visible cell content wrapper. Useful for, e.g. screen reader text. Used by EuiBasicTable to render hidden copy markers Type: ReactNode ↦	Default value ↵
Prop textOnly# ↦	Description and type Creates a text wrapper around cell content that helps word break or truncate long text correctly. Type: boolean ↦	Default value true ↵
Prop truncateText# ↦	Description and type Indicates whether this column should truncate overflowing text content. Set to true to enable single-line truncation. To enable multi-line truncation, use a configuration object with lines set to a number of lines to truncate to. Type: boolean | { lines: number; } ↦	Default value false ↵

𐘂𐘂

EuiTableRowCellCheckbox

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop append# ↦	Description and type Type: ReactNode ↦	Default value ↵

𐘂𐘂

EuiTableSortMobile

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop anchorPosition# ↦	Description and type Type: "upCenter" | "upLeft" | "upRight" | "downCenter" | "downLeft" | "downRight" | "leftCenter" | "leftUp" | "leftDown" | "rightCenter" | "rightUp" | "rightDown" ↦	Default value ↵
Prop items# ↦	Description and type Type: ItemProps[] ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiTableSortMobileItem

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop onSort# ↦	Description and type Callback to know when an item has been clicked Type: () => void ↦	Default value ↵
Prop isSorted# ↦	Description and type Indicates current option is the sorted on column Type: boolean ↦	Default value ↵
Prop isSortAscending# ↦	Description and type Indicates which direction the current column is sorted on Type: boolean ↦	Default value ↵
Prop ariaLabel# ↦	Description and type Type: string ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵

𐘂𐘂

EuiTableHeaderMobile

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop responsiveBreakpoint# ↦	Description and type Named breakpoint. Below this size, the table will collapse into responsive cards. Pass false to never collapse to a mobile view, or inversely, true to always render mobile-friendly cards. Type: string | boolean ↦	Default value m ↵

𐘂𐘂