React-data-grid: Cell Actions not working for the last rows

[Gtosta96]

• Have you already searched for similar issues? Please help us out and double-check first!

• 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 ✅

• [x] 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
• [x] Chrome

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

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [x] 🐛 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 not being able to open a cell action on the last rows. After the first time you click the scroll bar starts blinking (it opens and close the action menu automatically)

Follow the evidence (gif):

You can also see it happening through the official docs:
https://adazzle.github.io/react-data-grid/docs/examples/cell-actions

Please include:
- What the current behavior is
Whenever you try to access a cell action on the last few rows, it starts to blink and it's not possible to click on the actions

- What the desired behvaior is
Be able to click on the actions.

- (If Bug) Steps to reproduce the issue
- (If Feature) The motivation / use case for the feature

We especially love screenshots / videos of problems, and remember
The Best Issue Is A Pull Request™

[eduardosmatheus]

Any thoughts on this? Facing the same problem.

[brakon]

+1 on this

[alexmorez]

Little css approach for those who facing this

.react-grid-Row:nth-child(n + 6) .rdg-cell-action-menu {
    top: 0;
    transform: translateY(-100%);
}

[fabiokiatkowski]

A small improvement that does the trick

.react-grid-Row:nth-last-child(-n + 6) .rdg-cell-action-menu {
  top: 0;
  transform: translateY(-100%);
}

[amanmahajan7]

cellActions prop will be removed in v7 but it is still possible to add cell actions using a custom formatter

https://github.com/adazzle/react-data-grid/blob/canary/CHANGELOG.md
https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--cell-actions
https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/CellActions.tsx