Mui-datatables: How to change selected row background color?

[anjumpaul]

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | |
| MUI-datatables | |
| React | |
| browser | |
| etc | |

[gabrielliwerant]

Look into the custom styling section in the docs: https://github.com/gabrielliwerant/mui-datatables#customize-styling.

The JSS needed would look like this:

MuiTableRow: {
  root: {
    '&$selected': {
      backgroundColor: 'yellow'
    }
  }
},

[ruthzalo]

and when is the selected state changes?

[gabrielliwerant]

@ruthzalo Can you rephrase? I'm not sure what's being asked. You want to know what selection means in the context of the table? If so, it's when you select a row via checkbox.

[NYannick]

Hi @gabrielliwerant, i know you aren't a Typescript guy but i need to selected a row without checkbox and eventually change his background color. So actually selectableRowsOnClick doesn't type in MUIDataTableOptions.

[gabrielliwerant]

@NYannick This is a bit offtopic, but if you want type support, you'll need to add it yourself to the definitely typed library. You can achieve the look you want by hiding the checkbox via style overrides.

[hibc]

@NYannick

This might be a temporary solution, but I was sort of able to change the color of a row using a onRowClick and getElementById(MUIDataTableBodyRow-${rowIndex}) and this might remove other style effect of the row. (ex, hover over a row, etc)

Ah unfortunately, this would not work if you are sorting or filtering rows. :(

// Table options
options= {
    onRowClick: (rowData, rowIndex) => {
        changeRowColor(rowIndex.rowIndex);
    }
}

changeRowColor(index){
    let row = document.getElementById(`MUIDataTableBodyRow-${index}`);
    row.setAttribute('style', 'background: yellow');
}

[kublyblu]

Has anything changed regarding this?
https://github.com/gregnb/mui-datatables/issues/448#issuecomment-469430049 does not work

[SagarHassanS]

Look into the custom styling section in the docs: https://github.com/gabrielliwerant/mui-datatables#customize-styling.

The JSS needed would look like this:

MuiTableRow: {
  root: {
    '&$selected': {
      backgroundColor: 'yellow'
    }
  }
},

Is there any Update on this because this is not working

[SagarHassanS]

@NYannick

This might be a temporary solution, but I was sort of able to change the color of a row using a onRowClick and getElementById(MUIDataTableBodyRow-${rowIndex}) and this might remove other style effect of the row. (ex, hover over a row, etc)

Ah unfortunately, this would not work if you are sorting or filtering rows. :(

// Table options
options= {
    onRowClick: (rowData, rowIndex) => {
        changeRowColor(rowIndex.rowIndex);
    }
}

changeRowColor(index){
    let row = document.getElementById(`MUIDataTableBodyRow-${index}`);
    row.setAttribute('style', 'background: yellow');
}

This works when we have a single page, If we have multiple pages the row.setAttribute fails as we have a null value is there any way to get the DOM of the row based on page number