palantir/blueprint

Table not rendering additional rows if min-height is greater than the current table height

Open

#5,101 opened on Jan 18, 2022

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: tableType: bughelp wanted

Description

Environment

  • Package version(s): 3.9.13
  • Operating System: MacOS
  • Browser name and version: Chrome 97.0.4692.71

Code Sandbox

https://codesandbox.io/s/serverless-snow-4dhos

Steps to reproduce

  1. Set the min-height on the table to something like 30vh
  2. Start with an empty data set
  3. Add rows one at a time with some external process (for me it was socket.io, the sandbox is just adding them in a loop)

Actual behavior

Rows 1 to 6 are displayed as expected, then further rows are not rendered until you click and scroll down with a mouse or until the row height exceeds the min-height css setting

Expected behavior

New rows should be rendered regardless of min-height css setting.

Workaround

Seems to be fine if min-height css setting is not used and the table must grow in height for each added row.

Also I don't seem to see this issue if only height css setting is used.

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
ReactCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the Table component in Blueprint, specifically the part that handles dynamic row addition and CSS min height. Look at the source code for table rendering logic and how it interacts with container height. The sandbox provided in the issue can be used to reproduce the bug. Check if there is a known issue with scrollable containers and min height. The fix likely involves recalculating or forcing a layout update when rows are added.
Table not rendering additional rows if min-height is greater than the current table height · palantir/blueprint#5101 | Good First Issue