CODEWITHSUNDEEP
reactjsreact-admin
Trung
Trung

Reputation: 1032

How to style the header of react-admin Datagrid?

I tried to follow https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme to style the header of Datagrid (to use bold font style) as below:

const myTheme = createMuiTheme({
  overrides: {
    Datagrid: {
      header: {
        fontWeight: 'bold',
      }
    }
  }
})

const App = () => (
  <Admin theme={myTheme}>
    // ...
  </Admin>
);

However, the code above does not work.

What's wrong with that code? And any ideas change styles the header of all of Datagrid instances?

Thanks,

Upvotes: 2

Views: 7991

Answers (4)

Raj
Raj

Reputation: 1147

I wanted to customise the header of the ra-datagrid.
Here is how it looked before: before

Here is how it looked after as required: enter image description here

To do the above I added following styles:

    const useStyles = makeStyles({
      headerCell: {
        backgroundColor: '#def2ff',
        color: 'white',
        fontWeight: 'bold',
      },
      row: {
        '&:nth-of-type(odd)': {
          backgroundColor: '#def2ff',
        },
        '&:last-child td, &:last-child th': {
          border: 0,
        },
      },
    });

const MyDataGridComponent = (props) => {
  const classes = useStyles();
  return (
    <List
      {...props}
    >
      <Datagrid
        rowClick="show"
        classes={{ headerCell: classes.headerCell, row: classes.row }}
      >
        <TextField source="id" label={'Kit ID'} />
        <TextField source="mpi" label={'MPI ID'} />
        <TextField source="jobNo" />
        <DateField source="receivedDate" />
        <DateField source="shippingDate" />
        <TextField source="kitName" />
      </Datagrid>
    </List>
  );
};

export default MyDataGridComponent;

Upvotes: 0

Andy Lorenz
Andy Lorenz

Reputation: 3084

To restyle ALL instances of a Data Grid in your application, e.g. set all headers to bold (which I personally think would make a better default anyway!):

const theme = createMuiTheme({
  overrides: {
    RaDatagrid: {
      headerCell: {
        fontWeight: 'bold',
      },
    }
  },
});

<Admin theme={theme} ...>
</Admin>

Upvotes: 3

Trung
Trung

Reputation: 1032

Finally I managed to style the header of react-admin Datagrid as below:

const myTheme = createMuiTheme({
  overrides:{
    MuiTableRow: {
      head: {
        backgroundColor: 'lightgray',
        "& > th ": {
          color: 'black',
          fontWeight: 'bold',
        }
      },
    }
  }
})

const App = () => (
  <Admin theme={myTheme}>
    // ...
  </Admin>
);

Upvotes: 4

MaxAlex
MaxAlex

Reputation: 3319

Try this:

const myTheme = createMuiTheme({
  datagrid: {
    header: {
      fontWeight: 'bold',
    },
  },
})

const listStyles = theme => ({
  headerCell: theme.datagrid.header,
})

const CardList = withStyles(listStyles)(({ classes, ...props }) => (
  <List {...props} >
    <Datagrid classes={classes} >
      <TextField source="id" />
      ...
    </Datagrid>
   </List>
))

Documentation: https://marmelab.com/react-admin/List.html#the-datagrid-component section: "CSS API"

Upvotes: 1

Related Questions