TableView Empty State Not Rendered When No Height Is Specified

[rima10]

Summary

TableView correctly sizes itself to its content when rows are present and no explicit height is provided. However, when the table contains no rows and relies on renderEmptyState, nothing is rendered unless a height is explicitly specified.

This prevents displaying column headers and the empty state when the dataset is empty.

Expected Behavior

When TableView has no rows:

• Column headers should remain visible.
• renderEmptyState should be rendered.
• The component should not require an explicit height solely to display the empty state.

This behavior is particularly important for tables that naturally size to their content rather than filling a fixed-height container.

😯 Current Behavior

When:

• No height is specified, and
• TableBody contains no rows,

the table collapses and neither the table nor the empty state is visible.

If a height is specified, the empty state appears correctly, but the table always occupies the fixed height, resulting in excessive empty space when only a few rows are present.

💁 Possible Solution

TableView should render enough intrinsic height to display:

• The table header, and
• The content returned by renderEmptyState

when no rows are present, even if no explicit height has been configured.

Possible approaches:

1. Automatically size the table to its content when virtualization is not active and the table is empty.
2. Reserve a minimum height for the empty state container so that headers and the empty state remain visible.
3. Render the empty state outside of the scrollable/virtualized region when there are no rows, allowing the component to determine its height from the empty state content.

This would enable the following common use case:

• Small datasets: table height adjusts naturally to the number of rows.
• Empty datasets: column headers and the empty state are still visible without requiring a fixed height.
• Large datasets: existing virtualization behavior remains unchanged when the table is placed within a container that provides height.

🔦 Context

• With data rows present, the table appears to size itself based on content even without an explicit height.
• The issue only occurs when the table is empty.
• Adding a fixed height is not a viable workaround because it causes large empty areas when only a small number of rows exist.

🖥️ Steps to Reproduce

StackBlitz

https://stackblitz.com/edit/g2hxezpb-aveapg8k?file=src%2FExample.tsx

Sample Code

<TableView
  aria-label="Bookmarks"
  selectionMode="multiple"
  styles={style({width: 'full'})}
>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>URL</Column>
    <Column>Date added</Column>
  </TableHeader>

  <TableBody
    renderEmptyState={() => (
      <IllustratedMessage>
        <Heading>No results</Heading>
      </IllustratedMessage>
    )}
  >
    {[]}
  </TableBody>
</TableView>

Version

1.4

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

mac

🧢 Your Company/Team

Adobe Admin Console

🕷 Tracking Issue

No response