How can I change the color of a row with a column condition?

[RonalSilve]

I want to avoid creating a status column by giving a color for each value the column has.

[KevinVandy]

See both the Column Instance API Docs and the Row Instance API docs. You can pass props to each row conditionally with the muiTableBodyRowProps prop like so

<MaterialReactTable
  muiTableBodyRowProps={({ column, row }) => ({
    //props, conditional on column and row apis
  })
/>

[RonalSilve]

Thanks for the help, this way I was able to solve the problem with the suggestion you gave me:

<MaterialReactTable
      columns={columns}
      data={data}
      muiTableBodyRowProps={({ row }) => ({
        style:{
          backgroundColor: row.original.city === 'Lincoln' ? 'blue' : 'white'
        }
      })}
    />

[mcadotsch]

@KevinVandy
We use muiTableBodyRowProps to change conditionally the color of a row.
Now with the columnPinning enabled for the action column, it seems that the colorisation of the action cell stoped to work:

columnPinning: { right: ['mrt-row-actions'] }

muiTableBodyRowProps = ({ row }) => ({
    hover: false,
    sx: () => ({
      backgroundColor: row.original.stepColor
    }),
  });

I tried to fix it with this change but it did not help:

displayColumnDefOptions: {
    'mrt-row-actions': {
      size: 10,
      muiTableBodyCellProps: { align: 'left' },
      muiTableHeadCellProps: { align: 'left' },
      Cell: ({row, cell})=>(
        <div style={{backgroundColor: "red"}}>{cell.getValue()}</div>
      ),
    }
  },

Any idea?

[KevinVandy]

Target the td instead of the tr for the background color

[mcadotsch]

How do you mean?
As soon as i add the column pinning option the background color changes to default for the action column.