Table cell style

[MatteoGioioso]

I need to change background color of my cells depending on values, this is the solution I am currently using:

const explainerColumns: Array<TableProps.ColumnDefinition<PlanRow>> = [
    {
        id: 'exclusive',
        header: 'Exclusive',
        cell: (e) => <div style={{background: getCellWarningColor(e.exclusive, e.executionTime)}}>{e.exclusive}</div>,
    },
  ...
]

and this is the result:

However I would like to have the entire cell background as that color, how can I do that? I could not find anything in the docs.

[rubencarvalho]

Hello Matteo.

We don't necessarily support this use case.

Here are a few thoughts about your approach:

• Using the background color in that way could be problematic for accessibility: you would need to ensure that each combination of background & text colors meets minimum contrast ratios.
• Using color alone to convey information would mean that e.g. color blind users cannot benefit from this.

Our recommendation would be to display a status indicator or icon, which might end up working better for the intended purpose.

You can see our Table example where we use a status indicator to indicate state. Another option is to wrap the values in the table cells with a popover to provide any context.

[MatteoGioioso]

Hello Ruben,

thanks for the answer and appreciate the suggestion, I might eventually fallback to use the icon and drop the background color.

Anyway, for the time being, I have solved (hacked) it this way:

const MyCell = ({e}: { e: SomeType }) => {
    useEffect(() => {
        const element = document.querySelector('td:has(> div.my-custom-classname)');
        element.style.backgroundColor = getMyColor(e)
       
    }, [...])

    return (
        <div className={'my-custom-classname'}>{e.myValue}</div>
    )
}

and then

const explainerColumns: Array<TableProps.ColumnDefinition<SomeType>> = [
    {
        id: 'test',
        header: 'Test',
        cell: (e) => <MyCell e={e}/>,
    },
...

[raviraina]

@rubencarvalho Facing a similar issue, however for our use case we'd like to grey out a row/cell while maintaining accessibility. Is there a suggested way to do this, or would it require a "hacky" solution similar to Matteo's workaround?