Headers with colSpan change columns when scrolling horizontally

This issue has been tracked since 2022-12-03.

Describe the bug

When headers span multiple columns, the headers change columns when scrolling vertically.

To Reproduce

  1. Create a table that has a decent number of columns (enough to have to scroll horizontally)
  2. Create headers that span multiple columns (e.x. colSpan: (args) => (args.type === 'HEADER' ? 4 : undefined),)
  3. Ensure the viewport/window is setup where there is horizontal scrolling required to view all the columns
  4. Scroll and notice that the headers move around and change which columns they span

Link to code example: https://codesandbox.io/s/tender-colden-dp7p0p?file=/src/App.tsx

Expected behavior

Headers should never change columns

Environment

  • react-data-grid version: 7.0.0-beta.20
  • react/react-dom version: 17 and 18

Additional context

Here are some screenshots that show the problem when scrolling horizontally:

image

After scrolling to the right a little bit, the header changes spanned columns

image

colSpan for normal rows appears to be correctly calculated and stable

image

amanmahajan7 wrote this answer on 2022-12-24

The colspan values were incorrect. If a column spans another column then the spanned column should not have colspan. Check the updated example
https://codesandbox.io/s/tender-stallman-0zxqlv?file=/src/App.tsx

paustint wrote this answer on 2022-12-24

Nice, thank you so much!

More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date