Tables

EuiBasicTable is an opinionated high level component that standardizes both display and injection. At its most simple it only accepts two properties:

• items are an array of objects that should be displayed in the table; one item per row. The exact item data that will be rendered in each cell in these rows is determined by the columns property. You can define rowProps and cellProps props which can either be objects or functions that return objects. The returned objects will be applied as props to the rendered rows and row cells, respectively.
• columns defines what columns the table has and how to extract item data to display each cell in each row.

This example shows the most basic form of the EuiBasicTable. It is configured with the required items and columns properties. It shows how each column defines the data it needs to display per item. Some columns display the value as is (e.g. firstName and lastName fields for the user column). Other columns customize the display of the data before it is injected. This customization can be done in two (non-mutual exclusive) ways:

• Provide a hint about the type of data (e.g. the "Date of Birth" column indicates that the data it shows is of type date). Providing data type hints will cause built-in display components to be adjusted (e.g. numbers will become right aligned, just like Excel).
• Provide a render function that given the value (and the item as a second argument) returns the React node that should be displayed as the content of the cell. This can be as simple as formatting values (e.g. the "Date of Birth" column) to utilizing more complex React components (e.g. the "Online", "Github", and "Nationality" columns as seen below).
  Note: the basic table will treat any cells that use a render function as being textOnly: false. This may cause unnecessary word breaks. Apply textOnly: true to ensure it breaks properly.

The following example demonstrates "actions" columns. These are special columns where you define per-row, item level actions. The most basic action you might define is a type button or icon though you can always make your own custom actions as well.

Actions enforce some strict UI/UX guidelines:

• There can only be up to 2 actions visible per row. When more than two actions are defined, the first 2 isPrimary actions will stay visible, an ellipses icon button will hold all actions in a single popover.
• Actions change opacity when user hovers over the row with the mouse. When more than 2 actions are supplied, only the ellipses icon button stays visible at all times.

The EuiInMemoryTable is a higher level component wrapper around EuiBasicTable that aimed at displaying tables data when all the data is in memory. It takes the full set of data (all possible items) and based on its configuration, will display it handling all configured functionality (pagination and sorting) for you.

The example shows how to configure EuiInMemoryTable to display a search bar

Sometimes the value displayed in a column is not appropriate to use for sorting, such as pre-formatting values to be human-readable. In these cases it's possible to pass the sortable prop as a function instead of true or false. The function is used to extract or calculate the intended sort value for each item.

Allowing a table to be responsive means breaking each row down into its own section and individually displaying each table header above the cell contents. There are few times when you may want to exclude this behavior from your table, for instance, when the table has very few columns or the table does not break down easily into this format. For these use cases, you may set responsive = false.

To make your table work responsively, please make sure you add the following additional props to the top level table component (EuiBasicTable or EuiInMemoryTable):

• isSelectable: if the table has a single column of checkboxes for selecting rows
• isExpandable: if the table has rows that can expand
• hasActions: if the table has a column for actions which may/may not be hidden in hover

The mobileOptions object can be passed to the EuiTableRowCell directly or with each column item provided to EuiBasicTable.

{
  field: 'firstName',
  name: 'First Name',
  truncateText: true,
  mobileOptions: {
    render: (item) => (<span>{item.firstName} {item.lastName}</span>), // Custom renderer for mobile view only
    header: false,   // Won't show inline header in mobile view
    fullWidth: true, // Forces 100% width of the cell
    enlarge: true,   // Increase text size compared to rest of cells
    truncateText: false, // Only works if a 'render()' is also provided
  }
}

Note:

You can also change basic table row cell props like truncateText and textOnly for mobile layouts, though you must also be passing a mobile specific render function.

As an alternative to EuiBasicTable you can instead construct a table from individual low level, basic components like EuiTableHeader and EuiTableRowCell. Below is one of many ways you might set this up on your own. Important to note are how you need to 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.

Responsive extras

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, custom table implementations will not auto-populate any header level functions like selection and filtering. In order to add mobile support for these functions, 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.