TableView Empty State Not Rendered When No Height Is Specified
- 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.
### 🖥️ 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
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