Question: How to style expanded rows?

[saskaB]

Hi, i'm new to React and Datatables and have trouble styling expandable rows (the text in expandable row is brekaing with every word and has no left padding: http://prntscr.com/olv159). I styled everything else in table with the help of CSS classes, but expandable rows are not assigned any CSS class.

I tried with vairations of following CSS but its not working: td.Mui-expanded { background-color: red !important; padding-left: 2rem; } Thanks for any suggestions and help :)

[patorjk]

It looks like you may be having a colSpan issue (your data is being scrunched into 1 table cell), though without code I'm not 100% sure. I would look at the example they have:

https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js

For styling, just add a style property to the cell. Ex:

var myStyle = {
    padding: "10px",
    backgroundColor: "blue",
    fontSize: "20px",
};
return (
  <TableRow>
    <TableCell colSpan={colSpan} style={myStyle}>
      Custom expandable row option. Data: {JSON.stringify(rowData)}
    </TableCell>
  </TableRow>
);

Edit: Actually, I just realized I'm not sure if "style" gets applied to TableCell. If you replace TableRow with tr and TableCell with td, the example above should work. To get things to work with the TableRow and TableCell components, you may need to use the Material UI CSS API. See the docs here for more info: https://material-ui.com/api/table-cell/

[gabrielliwerant]

Hello @saskaB. @patorjk may be right, but it's difficult to tell without looking at your code. We can be more helpful if you show your code for the expanded row. Or check out the example and build from that, as suggested.

[saskaB]

Thank you for your help, it worked 👍