Problem Statement

As part of improving the flyout UI experience in Discover, we wanted to showcase some relevant fields to users while keeping the actions on hover, following the same pattern we already use in other areas of Discover.

To achieve this, we need to use the EuiDataGrid, but since it includes a header row, we’d like to hide the headers for a cleaner UI experience. This avoids redundancy, especially in cases where the same component might appear multiple times in the same context.

Proposed Solution

Add a new prop to EuiDataGrid to have a headless option.

With header	Without header

Use Case

This will be used in the Observability Discover flyouts as a pattern to highlight specific fields.

Value / Impact

After speaking with the EUI team, it seems this request has come up in other situations as well, so more than one place could benefit from it.

Urgency

We’re going to use this first for the trace and logs document flyouts in Discover, but the idea is to extend it to other flyouts in the future.

It's not a dependency right now, we agreed on shipping it with headers first and remove them once EuiDataGrid properly supports it.

Do alternatives or workarounds exist?

We suggested a custom css workaround but we were not encouraged to use it.
Looked something like:

      '.euiDataGridHeader': { height: `calc(${euiTheme.size.base} * 1.5)` },
      '.euiDataGridHeaderCell': { display: 'none' },

Related code or customizations

We agreed to keep the header visible until we can properly remove it by using EuiDataGrid capabilities.