Provide built-in select/select-all functionality
Provide built-in select/select-all functionality

I have a usecase where I need the first column to be rendered checkboxes and for the header of that column to be a checkbox which acts as a select all. I think my requirements are pretty common:
- The select column is bound to the value of another column (e.g. index)
- The set of selected items is maintained in a react state and updates dynamically
- Clicking the checkbox in the header column selects all items on the current page.
You wouldn't believe how many screens-worth of code it takes to brute-force this functionality into a datatable.
I do realize that you currently do have built-in select functionality, but the issues are that:
- You don't have the option of rendering an actual checkbox UI element; clicking the cell itself enables/disables the selection
- As far as I can tell, there is no built-in select all functionality.
I'm not sure how difficult this would be to implement as a core feature of datatables, but it's a common use case & it's not at all intuitive to implement.
Thanks!
Answers
Have you looked at the Select extension? It has checkbox selection built in - see this example and has a select all / none checkbox in the header.
Allan