adobe / adobe/react-spectrum

TableView Empty State Not Rendered When No Height Is Specified

Open
#10,235 3 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

## 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.

Image

### 🖥️ Steps to Reproduce

### StackBlitz

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

### Sample Code

```tsx


Name
URL
Date added

(

No results

)}
>
{[]}

```

### 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_

Contributor guide

Open the contributing guide

Research direction

Reproduce the empty-table case from the linked StackBlitz example in src/Example.tsx, then trace TableView and TableBody sizing when no height or rows are provided. Compare the empty and populated cases, and verify that headers and renderEmptyState are visible without a fixed height while existing fixed-height behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.