[Table] only 4 columns render on table mounted if table horizontal overflow

[PeacePan]

Environment

• Package version(s): @blueprintjs/table: 3.8.1, @blueprintjs/core: 3.19.1
• Browser and OS versions: Chrome 76.0.3809.100, MacOS 10.14.6

reproduce: https://codesandbox.io/s/blueprint-sandbox-4envh

Steps to reproduce

1. create a Blueprintjs Table
2. set many columns and let table overflow
3. default rowNum set to 0
4. setTimeout and update rowNum
5. only render 4 columns on table mounted

Actual behavior

Expected behavior

table columns render expected.

Possible solution

The viewportRect.left when table mounted is undefined

then I scroll the table, the viewportRect.left will set to number

[alecf]

seeing this as well. Related?

• Still persistent issues with table lifecycle methods #3774
• Table Scrolling in Firefox doesn't work well #1712

[ramirs]

+1 still happening with the following blueprint deps

{
"@blueprintjs/core": "^3.19.1",
"@blueprintjs/icons": "^3.10.0",
"@blueprintjs/select": "^3.11.0",
"@blueprintjs/table": "^3.8.1",
}

If it helps, I recently migrated from these older versions of blueprint, I rolled back to remove this rendering error and it's fine.
{
"@blueprintjs/core": "3.15.1",
"@blueprintjs/icons": "3.9.0",
"@blueprintjs/select": "3.8.1",
"@blueprintjs/table": "3.5.0",
}

[wcyoyo44]

+1 still happening with the following blueprint deps

{
"@blueprintjs/core": "^3.19.1",
"@blueprintjs/icons": "^3.10.0",
"@blueprintjs/select": "^3.11.0",
"@blueprintjs/table": "^3.8.1",
}

If it helps, I recently migrated from these older versions of blueprint, I rolled back to remove this rendering error and it's fine.
{
"@blueprintjs/core": "3.15.1",
"@blueprintjs/icons": "3.9.0",
"@blueprintjs/select": "3.8.1",
"@blueprintjs/table": "3.5.0",
}

I also had rendering issues (only left 4 columns would render after a column resize) and it appears to be related to overflow/scrolling. Downgrading to @blueprintjs/table 3.5.0 appears to solve this issue (without introducing new ones/sacrificing any needed features). I did not have to downgrade any of the other packages though.

[florianMo]

Same problem here, downgrading to @blueprintjs/table@3.5.0 solves the problem.

[ramirs]

Thank you for the follow up @wcyoyo44 and @florianMo

[MonkeyAndres]

I solved that by forcing a scrollToRegion(lastColumnRegion) after onCompleteRender. Hope it helps. Let me know if you need more info.

const tableRef = useRef()

const onCompleteRender = useCallback(() => {
  const lastColumnRegion = Regions.column(10) // Your table last column
  tableRef.current.scrollToRegion(lastColumnRegion)
}, [])

<Table
  {...tableProps}
  ref={tableRef}
  onCompleteRender={onCompleteRender}
>
  {tableContent}
</Table

[am4zed]

I think this is possibly linked to #3757 which my colleague raised a while back. We've used the interim fix identified in that issue where we set the number of rows or columns (depending on what you are changing) as the Table key. It would be good to get to the bottom of this strange rendering behaviour though.

We're seeing a similar issue as described here with a few of our usages of the blueprint Table component (but not all). After some testing using a basic create-react-app to render a Table then change the numRows or numColumns using a timeout, as above, my key findings are:

1. The issue occurs when there is a change in a table variable (number of rows or columns) to a number greater than 4. Only four columns render until you scroll the overflow, then all columns appear.
2. It does not matter whether the table variable is increased or decreased.
3. The issue is present so long as the end number of columns is greater than 4.
4. There is no difference in behaviour between a class component and a functional component.
5. If the Table is not inside a container div, the issue is not present.
6. If you put the Table in a container div, the issue is present.
7. If you put an extra div around the Table component, the issue is not present.

[bofa]

I am having the same problems. If the container of the table has height set e.g. { height: '100%' } or { height: 1000 } the 4 column issue happens but if it don't have a height set there is not problem.

[gpascale]

Chiming in to add that I get a four-row bug in addition to the four-column issue others are describing.

I have not created an isolated example, but I've done a little testing to narrow it down. It appears that going from 0 rows (my initial state) to any number of rows that will be taller than the container trigger this. For example, if I add only 20 rows, which fit in the table without scrolling, all is good. If I add 50, I only get 4.

All the rows show up normally as soon as I scroll.

@am4zed's fix (#7) of putting an extra wrapper div (so now I'm wrapping my table in 2 divs) seems to fix the issue for me.

I also notice the same behavior as @bofa. If I use a single wrapper and don't set a height (either % or px), no issue. But then I can't scroll the table...

edit: The second container does not actually seem to fix the problem. I had not set a height on the container and that was why it seemed fixed. So this seems to happen reliably when my table appears inside of a container with a set height.

edit 2: I have further found that this issue is only triggered when the columnWidths are updated. In my example, I first render the table and then later update the column widths. If instead I don't render the table at all until I have the final column widths, this seems to fix this issue. So it appears that updating column widths may be the culprit.

[adidahiya]

This is related to #3774, part of a group of issues in table v3.8.x: https://github.com/palantir/blueprint/milestone/41

for now, I think the only good solution is to downgrade to table v3.7.x (it should work fine with the latest core package). sorry this has not been addressed sooner; I hope to take a closer look at this group of issues in the next few weeks.

[ThanasisMpalatsoukas]

+1 still happening with the following blueprint deps
{
"@blueprintjs/core": "^3.19.1",
"@blueprintjs/icons": "^3.10.0",
"@blueprintjs/select": "^3.11.0",
"@blueprintjs/table": "^3.8.1",
}
If it helps, I recently migrated from these older versions of blueprint, I rolled back to remove this rendering error and it's fine.
{
"@blueprintjs/core": "3.15.1",
"@blueprintjs/icons": "3.9.0",
"@blueprintjs/select": "3.8.1",
"@blueprintjs/table": "3.5.0",
}

I also had rendering issues (only left 4 columns would render after a column resize) and it appears to be related to overflow/scrolling. Downgrading to @blueprintjs/table 3.5.0 appears to solve this issue (without introducing new ones/sacrificing any needed features). I did not have to downgrade any of the other packages though.

<Cell
       onKeyDown={(e) => {this.handleTableMovement(e.keyCode)}}
       onKeyPress={(e) => {this.handleTableMovement(e.keyCode)}}
>

The Cell component doesn't have the onKeyDown or onKeyPress event handlers when i downgrade from 3.8.x to 3.5.0,3.60,3.70.

[choiway]

I downgraded and it still doesn't work.

[tamsanh]

I am also having the same issue. Adding some extra information for debugging efforts: when enableGhostCells is set to true, I'm getting only 1 column rendered, instead of the 4 columns.

This is @blueprintjs/table: ^3.8.27

Downgrading to "@blueprintjs/table": "~3.7" worked for me.

[rogozind]

Is this targeted to be fixed in the upcoming release 4?
We cannot upgrade because of this issue and are stuck in 3.7 land.

[PeacePan]

My current solution.

1. add a wrapper div
2. use ResizeObserver watch the size of wrapper
3. update table rect when size change

codesandbox

work on

@blueprintjs/core": "3.42.0
@blueprintjs/table": "3.8.27
react": "17.0.2
react-dom": "17.0.2

but not a good solution, I think...