Mui-datatables: Customize color of table headers

[Eithcowich]

I need to customize the colors of the two table headers:

1. The one that has the the search, print, save buttons, and the table title, and

2. The header that has the column labels.

Here's an example:

I'm working with a a theme,

const getMuiTheme = () => createMuiTheme({ ...

but I'm not sure which components are responsible for each header.

Thanks for your help.

[wdh2100]

https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js

[Eithcowich]

Great, this answers many of my questions. Thank you very much @wdh2100.

[appukuttan-shailesh]

@Eithcowich : did you figure out which component styles were to be overwritten? Could you post the same here, it would be useful for me and others. Thanks.

[Eithcowich]

@appukuttan-shailesh sorry, I did not figure out how to do this. You can look at the example @wdh2100 posted above, which is good and has a lot of info, but that's pretty much it so far.

[patorjk]

In the example mentioned, try these overrides: (tested in material-ui v4)

  getMuiTheme = () => createMuiTheme({
    overrides: {
      MUIDataTable: {
        root: {
          backgroundColor: "#AAF",
        },
        paper: {
          boxShadow: "none",
        }
      },
      MUIDataTableBodyCell: {
        root: {
          backgroundColor: "#FFF"
        }
      },
      MuiToolbar: {
        root: {
          backgroundColor: '#f00'
        }
      },
      MuiTableCell: {
        head: {
          backgroundColor: 'purple',
        }
      },
      MUIDataTableSelectCell: {
        headerCell: {
          backgroundColor: 'blue',
        }
      },
    }
  });

The last 3 overrides target the toolbar and the header cells.

[appukuttan-shailesh]

Thanks @patorjk ! I had also worked out a few of them, but didn't know all of the ones you listed.

Pasting my own code snippet in case it's useful to others:

getMuiTheme = () => createMuiTheme({
    overrides: {
        // handles table title bar color
        MUIDataTableToolbar: {
            root: {
                backgroundColor: Theme.tableHeader,
                color: Theme.textPrimary
            }
        },
        // handles table data header color
        MUIDataTableHeadCell: {
            fixedHeaderCommon: {
                backgroundColor: Theme.tableDataHeader
            }
        },
        // handles data row color; clashes and blocks MuiTableRow
        // MUIDataTableBodyCell: {
        //  root: {
        //      backgroundColor: Theme.tableDataRow,
        //      color: Theme.textPrimary,
        //      // borderBottom: "none"
        //  }
        // },
        // handles data footer color
        MUIDataTablePagination: {
            root: {
                backgroundColor: Theme.tableFooter,
                color: Theme.textPrimary
            }
        },
        // handles row hover color and selected row color
        MuiTableRow: {
            hover: { '&$root': { '&:hover': { backgroundColor: Theme.tableRowHoverColor }, } },
            root: {
                '&$selected': {
                    backgroundColor: Theme.tableRowSelectColor
                }
            }
        },
    }
})

Note: Theme.* is my stylesheet object.