score:2

i think there are a few ways around this, the way i have used is having a fully controlled component.

looks a little like this

<tableheaderrow cellcomponent={this.exampleheadercell} />

where exampleheadercell is a component that would look something like this

 exampleheadercell = (props: any) => (<tableheaderrow.cell
                classname={exampleclass}
                {...props}
                key={column.name}
                getmessage={() => column.title}
            />)

from there you can pass it a class as shown with exampleclass

you can take this further and have it customised for a particular column.

exampleheadercells = (props: any) => {
    const exampleclass = css({ backgroundcolor: "blue" })
    const { column } = props
    if (column.name === "name") {
        return (
            <tableheaderrow.cell
                classname={exampleclass}
                {...props}
                key={column.name}
                getmessage={() => column.title}
            />
        )
    }
    return <tableheaderrow.cell {...props} key={column.name} getmessage={() => column.title} />
}

the example above is returning a specific cell with the exampleclass if the column name is equal to "name". otherwise it just returns the regular tableheaderrow.cell


Related Query

More Query from same tag