Material-UI Table/XGrid - How to set a different color for each cell

Question

The styling for cell tables in material-ui is fine when you have a limited known amount of options but I'm struggling when is not known in advance.

To simplify, the idea is setting the background color for each cell based on the table cell values (let's imagine the value of the cell is actually the color).

Using cellRenderers is limited (not really a clean option).

The current solution looks like (doc):

 cellClassName: (params: GridCellClassParams) =>
    clsx('super-app', {
      negative: (params.value as number) < 0,
     positive: (params.value as number) > 0,
    }),

How could create dynamically add styling or css in material-ui v5/emotion (doc). Something like :

 cellSx: (params: GridCellClassParams) =>{
    {
      backgroundColor: params.value
    }
  }),

score 0 · Answer 1 · answered Jun 01 '21 at 18:36

As per your question, I understood that you will receive color names and need to apply those colors on the cells in which the color names are present.

To dynamically create the object present in "clsx" method.

// let us consider that there is a key named color in the params which is received in the colums.

const generateColorsObject = (color) => {
  const colorKey = color;
  const colorObject = {}
  colorObj[colorKey] = color
  return colorObj; // it's value will have something like { 'red': 'red' }
}

const columns = [
  {
    field: 'name',
    cellClassName: 'super-app-theme--cell',
  },
  {
    field: 'score',
    type: 'number',
    width: 140,
    cellClassName: (params) =>
      clsx('super-app', generateColorsObject(params.color)),
  },
];

const useStyles = makeStyles({
  root: {
    '& .super-app.red': {
      backgroundColor: 'red', // you need to configure the background colors to the colorKey
      color: '#1a3e72',
      fontWeight: '600',
    },
    '& .super-app.blue': {
      backgroundColor: 'blue',
      color: '#1a3e72',
      fontWeight: '600',
    },
    '& .super-app.orange': {
      backgroundColor: 'orange',
      color: '#1a3e72',
      fontWeight: '600',
    },
  },
});

score 0 · Answer 2 · answered Jun 02 '21 at 11:58

I think it boils down to the problem to create a mui class which applies the styling from the received props.

You can leverage material ui useStyles hook advanced feature to create mui classes which accepts the props, so you can pass over some style details as you want.

const useStyles = makeStyles({
  // style rule
  foo: props => ({
    backgroundColor: props.backgroundColor,
  }),
  bar: {
    // CSS property
    color: props => props.color,
  },
});

function MyComponent() {
  // Simulated props for the purpose of the example
  const props = { backgroundColor: 'black', color: 'white' };
  // Pass the props as the first argument of useStyles()
  const classes = useStyles(props);

  return <div className={`${classes.foo} ${classes.bar}`} />
}

You can find the doc from here.

score 0 · Answer 3 · answered Jul 02 '22 at 14:44

To solve this issue I used the cellClassName and changing the class using a function. Here is my working code:

  // Based on the value of the cell the class will be applied.
  const applyCellColour = (value: boolean) => (value ? 'notApprovedCell' : 'approvedCell'); 

  // In the columns array in the cellClassName:
  const columns: GridColDef[] = [
    {
      field: 'Approval',
      headerName: 'Approval',
      headerAlign: 'center',
      align: 'center',
      cellClassName: params => applyCellColour(params),
   },
  ]    
   
  // CSS
  .approvedCell {
    background-color: 'green';
  }

  .notApprovedCell {
    background-color: 'red';
  }

Material-UI Table/XGrid - How to set a different color for each cell

3 Answers3