[Bug][Grid] Misaligned headers when having both hidden and locked columns

[vveesseelliinnaa]

I'm submitting a...

• Bug report <!-- Please search for a similar issue before you submit a bug report. --

Current behavior

when using a Grid where the first and last columns are locked and you dynamically hide a column in the middle, the table header is rendered incorrectly.

Minimal reproduction of the problem with instructions

1. Go to https://stackblitz.com/edit/react-dsahzp-s4up6s?file=app%2Fapp.tsx
2. Click the "Toggle" button to show the hidden column

Result: Observe that the header of the "In Stock" column is jumped to the right.

Additional details

The culprit is this inline style: style="left: 75px; right: 0px;" which is created in the header cell constructor due to locked columns, but is never updated again. Even if the number of columns changes.

Reported in Ticket ID: 1666488