Material-table: Changing the header background color, font size and font color

[cybermizrach]

How can I change the header background color, font size and font color?

[mbrn]

Add a header style on your column definition that you want to style:
{ title: '...', field: '...', headerStyle: {backgroundColor: 'red'}}

If you want to apply a style to all columns just add a header style to options.

[mbrn]

Use this:

<MaterialTable
...
options={{
headerStyle:{backgroundColor:'red'}
}}
/>

[cybermizrach]

Thanks @mbrn!

[betocolon23]

Hi, do you know how to change the color of the title of the table?
title={this.props.title}
/>

[Pragadeeshwaranj]

Hi, how to change the color of the icon?

[MaykonMorais]

Hi @mbrn, how i can change the background of the table?

[vrajpal-jhala]

Hi, do you know how to change the color of the title of the table?

Hi @betocolon23,
I did it using MuiThemeProvider to override default styling, as MuiTypography-h6 component is being used for the table title.

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      h6: {
        fontWeight: 'bolder !important',
        color: darken('#5CDB94', 0.15),
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <MaterialTable
    ...
  />
</ThemeProvider>

other solution is component overriding

import MaterialTable, { MTableToolbar } from 'material-table';

<MaterialTable
    components={{
      Toolbar: props => (
        <div style={{color: darken('#5CDB94', 0.15),}}>
           <MTableToolbar {...props} />
        </div>
       )
    }}
/>

[betocolon23]

Great!! Thanks

[alexanderkho]

Is there any way to access MUI theme palette colors directly in the headerStyle prop? I want to set header color="primary". Would I need a custom override for this?

[asifkabani]

@alexanderkho here is how I did it:

import { makeStyles, useTheme } from "@material-ui/core/styles";
const theme = useTheme()

<MaterialTable
          headerStyle: {
            width: 26,
            whiteSpace: 'nowrap',
            textAlign: 'left',
            flexDirection: 'row',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            paddingLeft: 5,
            paddingRight: 5,
            backgroundColor: theme.palette.primary.table,
            fontWeight: 'bold',
            color: theme.palette.primary.main,
          },
/>