palantir/blueprint

Table2 `columnWidths` prop is not working as expected

Open

#5778 opened on Nov 30, 2022

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

Description

Environment

"@blueprintjs/table": "4.7.9"

Code Sandbox

Link to a minimal repro: demo

Steps to reproduce

Checkout the demo code:

  • initially colWidths contains null value for the 1st column width and 230 for the 2nd column;
  • further we have an effect which updates colWidths: we set 400 width for the 1st column, 2nd column remains the same;
  • finally we have a toggle which allows to set both columns' widths to 300;

Now follow these steps:

  1. Load the page
  2. Click the "Set all cols 300 width" button
  3. Click "Set all cols 300 width" again

Actual behavior

  1. Once loaded column widths are: some "default" value for 1st col and 230 for the 2nd one
  2. Upon 1st click column widths are: 400 and 230
  3. Upon 2nd click column widths are: 300 and 300

Expected behavior

  1. Once loaded, column width should be 400 and 230 due to effect we ran on mount
  2. Upon 1st click on "Set all cols 300 width" rendered columns should have 300 and 300 widths

Possible solution

Adding colWidths (which is passed via columnWidths prop) to cellRendererDependencies "fixes" the issue;

Additional observations

  1. It seems like Table2 uses previous value of columnWidths, hence lagging the most recent value;
  2. If you try scrolling the table, it "forces" table to re-render with proper column widths;

P.s. this separate issue creation was requested in #5264.

Contributor guide