React-data-grid: Customize Select All Checkbox

[phkavitha]

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 ARE YOU USING?

Officially Supported:
[X ] v0.14.x

Community Supported:
[ ] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[ X] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[ ] bug report
[X ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior
Currently, we do not have a way to customize the look and feel of the select all and the row checkbox. The only way to customize it is by css.

Expected/desired behavior
We should have a separate headerRenderer and rowRenderer to customize the select box. Using the renderer function, we can customize it by replacing the checkbox with SVG icons

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

What is the motivation / use case for changing the behavior?

[anil1712]

I want to replace the existing checkbox component with my own inbuilt checkbox component. Is anyone having some solution for the same?

Can we use RowRenderer to achieve this?

[phkavitha]

@anil1712 , If you want to replace the existing checkbox component in the rows, you can use rowActionsCell. For header, even I don't know how to render a custom component

[martinnov92]

Hello, does anyone came up with solution how to replace select all checkbox in header row with something else? Or it is not possible?

thank you

[sjain-mi9]

Even I'm looking forward for this solution. If I use my own checkbox component directly using name or headerRenderer, it works, but if I pass it as a prop, it throws an error.

[kjarnot]

Hi folks. Has anyone found a good solution/work-around for this issue? I'd like to add a simple text label to the select all header, but can't find anything that works.

[jean343]

You can use the prop selectAllRenderer, and pass in a component which is based on https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/formatters/SelectAll.js

JP

[felipenvaz]

selectAllRenderer prop works, but for some reason the prop is not declared on @types/react-data-grid.
I had to uninstall the type for it to work.

[stale[bot]]

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.