Table sorting doesn't re-render

[aelgasser]

Environment

• Package version(s): 4.1.2 (same issue since 4.0.0-rc.3, see below)
• Operating System: MacOS 12.2
• Browser name and version: Chrome 99.0.4844.83

Code Sandbox

Link to a minimal repro (fork this code sandbox):

https://codesandbox.io/s/blueprint-sandbox-forked-4-1-2-not-working-ndf821?file=/src/TableSortableExample.tsx

The code has been copy/pasted with [almost] no modification from :

• https://blueprintjs.com/docs/#table/features.sorting
• https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/table-examples/tableSortableExample.tsx

Steps to reproduce

1. Create a table with column sorting
2. Try to sort data from any column
3. It should refresh the table with data sorted by that column immediately

Actual behavior

The sort command is taken into account but the table doesn't re-render with the newly sorted data.
I have to scroll into the table (and thus the table must have scrollbars; see app.css in the sandbox) to see the changes.

Expected behavior

The table should re-render without user interaction.

Possible solution

This seems to be a regression between versions 4.0.0-rc.1 and 4.0.0-rc.3 of the table component. See the same sandbox here but running version 4.0.0-rc.1 which is working fine (I even removed the scrollbars) :
https://codesandbox.io/s/blueprint-sandbox-forked-4-0-0-rc-1-working-zqhugl?file=/src/TableSortableExample.tsx

I couldn't test version 4.0.0-rc.2 in the sandbox as it's crashing on some Typescript issue ((0 , $csb__tslib.__spreadArray) is not a function).

[adidahiya]

Thanks for the bug report, I can repro this in your sandbox and on the docs site.

I tried fixing this by adding cellRendererDependencies={[this.state.sortedIndexMap]}[0] in this forked sandbox, but that didn't do the trick. We'll have to look into this more closely.

[0] cellRendererDependencies is a newer experimental prop, the only docs for it are here, for now:

blueprint/packages/table/src/table2.tsx

Line 70 in b973fc3

cellRendererDependencies?: React.DependencyList;

[aelgasser]

I just tested with the experimental prop cellRendererDependencies in your sandbox.
It seems that it reacts to the change only every second click on a sort menu item

1. Sort by the first column ASC
2. It does nothing (sort but doesn't re-render)
3. Sort by the second column ASC
4. It re-renders with data sorted by the second column

Don't know if that could help pinpoint the issue, or maybe fixing cellRendererDependencies