Add select all checkbox for mui-datatables data as object( custom columns)

Question

I have trouble to add a checkbox for select all in mui-datatables when my data is object format(custom columns) instead like an array with strings like a lot of samples out there. Following by the documentation here, I tried use customHeadRender function, but it's not get called, I tried to use customToolbar, it will load select all checkbox, but that trigger when you select row, I need that checkbox on page load.

Thank you

Here's codesanbox

Answer 1

Just use selectableRowsHeader: true, in your options prop and you will be fine.

 ...
   const options = {
      filterType: "textField",
      fixedHeader: true,
      sort: true,
      search: true,
      selectableRows: "multiple",
      responsive: "scrollMaxHeight",
      rowsPerPage: 15,
      rowHove: true,
      selectableRowsHeader: true, //<---------- this should be true (not false)
 ...

Working demo is here