Table layout guidelines

These guidelines help you build clear, accessible tables that are easy to scan at any viewport size.

The key points to remember about:

• The table contents must look right on all container sizes. Always test table and column configurations on small and large screens, and remember about the dynamic layout elements like push flyouts, sidebars and other elements that reduce available width.
• All tables should enable horizontal scrolling on overflow with scrollableInline={true} and tableLayout="auto" to maintain legibility.
• All columns must have the width and truncation properties set to best fit the content - use the em unit for columns with text, and px for static-size elements like plots.
• The actions column, if needed, must use sticky: true and be the last column on the table.
• Column headers should be concise and never truncated. Use iconography in place of lengthy column titles; add nameTootip when additional context is needed.
• User content in cells must not overly extend the column's width.

You can find more details about the rules below.

Kibana engineers

Kibana has a set of column presets available internally that help configure columns for the right type of content. Check out the @kbn/shared-ux-column-presets package to learn more.

Enable horizontal scrolling

Set scrollableInline={true} and tableLayout="auto" on all tables, so they can scroll horizontally on overflow rather than compressing columns into illegibility. All data tables should also set responsiveBreakpoint={false} to disable the mobile card view unless the table has up to 3 columns and there's a valid UX reason to keep it enabled.

Test tables at these viewport sizes to cover wide range of client devices: 400px, 600px (or with push flyout open), 1200px, 2000px. Be aware of content scaling ratios in displays.

Column sizing

Columns must be configured to fit the content they render using the width, minWidth and maxWidth properties.

Begin with the heading cell - the column's title must be short and clear. Set minWidth to fit the whole title without truncation. Next, adjust for the body content:

• Constant size columns like icon indicators or toggle switches should use a static width. Set width, minWidth and maxWidth to the same value to prevent the column expanding and shrinking in undesirable scenarios.
• Predefined value columns like status badges displaying one of the known values, should set minWidth to fit the longest possible value without truncating.
• Dynamic value columns displaying user-provided or generated content must set width, minWidth and maxWidth to precisely control sizing for all possible lengths of inputs. Check the constraints set on the DB level to find the longest possible value.

Name	Status	Orders
Lisa Nguyen	Active	3
Ben Park	Inactive	12

Do: Size columns to fit their content. Headers are fully readable and cells use space efficiently.

Name	Status	Orders
Lisa Nguyen	Active	3
Ben Park	Inactive	12

Don't: Leave too little space for the column name or body content.

Header tooltips

Columns that need description or further explanation should use the nameTooltip prop with icon="question". You should never render <EuiTooltip /> directly in the name prop.

Example:

✄𐘗
tsx code block:
✄𐘗{
  field: 'service_health',
  name: 'Health',
  nameTooltip: {
    icon: 'question',
    content: 'Health status is determined by the latency anomalies detected by the ML jobs',
  },
}

Text alignment

Use the following align settings for each of the content types:

Content type	Alignment	Rationale
Standard text	left (default)	Matches the natural reading direction for most languages.
Numbers and metrics	right	Allows users to compare magnitudes and decimal places visually.
Booleans and icons	center	Provides visual balance for narrow, symmetrical columns.
Actions	right	Keeps the primary interaction point near the edge of the container.

Item	Revenue
Project A	1,234.56
Project B	89.90
Project C	502.00

Do: Right-align numbers so digits and decimal places line up for easy comparison

Item	Revenue
Project A	1,234.56
Project B	89.90
Project C	502.00

Don't: Left-align numbers. Magnitudes become harder to compare at a glance.

Text wrapping and truncation

By default, table cells wrap text to fit the container, unless the maxWidth prop is not configured. However, some content becomes difficult to read when broken across many lines.

• Never wrap or truncate any numeric, boolean, monetary values and short-text columns (e.g., UUIDs). For short yet unknown content length use className="eui-textNoWrap".
• long-text columns displaying important information such as names should never be truncated. You may enable truncation on text over 4 lines of text to preserve readability. Always set maxWidth to prevent overexpansion.