Don't freeze checkbox / selection column

[sontek]

• Have you already searched for similar issues? Please help us out and double-check first!
  Yes, I've also looked at the code.

• Also, please don't be that person who deletes this template. It's here for a reason.

• Thanks!

---

Which version of React JS are you using?

✅ Officially supported ✅

• v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• v15.5.x
• v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• IE 9 / IE 10 / IE 11
• Edge
• Chrome

⚠️ Not officially supported, but "should work" ⚠️

• Firefox
• Safari

---

I'm submitting a ...

• 🐛 Bug Report
• 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

I'm trying to use the rowSelection property to add a checkbox column onto my table. But it is setting frozen: true which is unexpected behavior. I don't want, need, or like the frozen behavior. It means when my table is on mobile the space is used up by the checkbox so they view less data. The setting seems to be here:

react-data-grid/packages/react-data-grid/src/ReactDataGrid.js

Line 632 in faa8811

frozen: true,

Can you at least offer an option like rowSelection { freeze: false }?

[sontek]

This is actually a problem on more than mobile even though that was my original concern. The frozen columns is really delayed and so the user experience isn't great for what we are trying to provide our users. So I think just a setting to say "don't freeze checkbox columns" would be enough for us.

[shreyamdg]

Are you sure? It works great for me!

[sontek]

Are you using an old version? I have no idea how you got it to not freeze that column since you can see in the code I pointed to that its definitely freezing them.

It also appears in the demo:
http://adazzle.github.io/react-data-grid/docs/examples/row-selection

If you shrink the screen enough to get the columns that way.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[sontek]

This is only stale because I haven't received a response yet. This issue still exists.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[sontek]

This still hasn't been addressed

[zekehernandez]

I am having the same issue with frozen columns in general. In Chrome, the issue only happens when I use my MacBook trackpad and not from moving the scrollbar (it also happens no matter what in Firefox, but that's not a supported browser). Simply making the columns not frozen would not be a solution for my use case, however.

Here is an example of me using the codesandbox demo for frozen columns in Chrome:

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[sontek]

I don't think this is stale. We haven't heard from the maintainers on it but its definitely still a problem that is causing me and my customers pain =)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[sontek]

I wish the stale bot would stop closing good tickets

[Brentox]

Issue still exists. Keep open

[eduardosmatheus]

Shouldn't it be buggy because of the ReactJS version in use? I'm having the same issue and my project is using v16.8.6.

I'm looking for a solution as well, and maybe there's not enough support in current releases with 16.x ReactJS features (?). Should take a look in the frozen cells rendering/updating behavior.

[liamzhang40]

The same concern here on mobile. A way to adjust to checkbox column width will also be helpful. Besides, the delayed rendering is really not the most appealing

[liamzhang40]

After investigating the stuttering behavior of frozen columns, I found out that it has something to do with trackpads' inertial scrolling which is the decelerating part of page scrolling after you lift fingers off the trackpad. And scroll/mousewheel events still fire during it. Therefore in Viewport.tsx,

react-data-grid/packages/react-data-grid/src/Viewport.tsx

Line 42 in 4e9efe9

isScrolling: boolean;

isScrolling is updated with a delay with some debouncing on top of it.

Such pattern appears to also cause table headers' horizontal moves more slowly compared to that of table body.
Two obstacles I had attempting to work around this. One is to disable inertial scrolling. The other one is to hijack Canvas.tsx handleScroll because I will need access to scroll events if I want to disable inertial scrolling.

react-data-grid/packages/react-data-grid/src/Canvas.tsx

Line 334 in 4e9efe9

onScroll={this.handleScroll}

I have been stuck on this and any help will be appreciated.

[tareqaal]

I solved it using CSS. I targeted the following cells to stop the transform property which make this user delay experiance:

.react-grid-Row .react-grid-Cell--frozen { transform: translate3d(0px, 0px, 0px) !important! }
.react-grid-HeaderRow .react-grid-HeaderCell--frozen { transform: translate3d(0px, 0px, 0px) !important; }

PS: the header check box cells is separate than the row body.

[liamzhang40]

I solved it using CSS. I targeted the following cells to stop the transform property which make this user delay experiance:

.react-grid-Row .react-grid-Cell--frozen { transform: translate3d(0px, 0px, 0px) !important! }
.react-grid-HeaderRow .react-grid-HeaderCell--frozen { transform: translate3d(0px, 0px, 0px) !important; }

PS: the header check box cells is separate than the row body.

You just made the frozen columns always stay at the left of the viewport but they need to move as users scroll so the columns appear to be frozen. Do you mind showing a demo if it is actually working for you?

[beygorghor]

Hi, i have the same issue, any update ?
The bug is also present on the example...
https://adazzle.github.io/react-data-grid/docs/examples/frozen-columns

[JordanSalinas]

Same issue here. Would like a response.

[amanmahajan7]

This can be achieved in v7 canary

https://github.com/adazzle/react-data-grid/blob/canary/CHANGELOG.md
https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--common-features
https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/CommonFeatures.tsx#L45

you should be able to do

const columns: readonly Column<Row, SummaryRow>[] = [
  { SelectColumn, frozen: false },
  ...