search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 932 forks source link

Checkbox styling #1461

Open olpal opened 4 years ago

olpal commented 4 years ago

I would like to be able to style the checkbox in the headercell independently of the checkboxes in the data row cells, from the source it looks like regardless of whether the checkbox is in the header cell or not it seems to get the same style.

Is there any wya to do this?

patorjk commented 4 years ago

This could probably be done with some JSS and Material UI theme orderrides, however, I'm debating adding a prop to the checkbox component that would identify where it is (ex: row, row header, filter dialog, etc etc). Then this kind of customization could be done using the components props (example). This would also solve https://github.com/gregnb/mui-datatables/issues/1453.

olpal commented 4 years ago

Yes the props solution would be ideal, right now I modified my local source to have header values and then conditional set the style on the checkbox based on the isHeaderCell value, however, this does not take into account any other checkboxes

root: isHeaderCell ? classes.headerCheckboxRoot : classes.checkboxRoot, checked: isHeaderCell ? classes.headerChecked : classes.checked, disabled: isHeaderCell ? classes.headerDisabled : classes.disabled,

patorjk commented 4 years ago

Added a fix for this in version 3.4.0. A "data-description" prop to the custom Checkbox override has been added. Example: https://github.com/gregnb/mui-datatables/blob/master/examples/custom-components/index.js#L35

In your case you'd want to look for "row-select-header".