Conditional formatting

SpreadSheet Grid gives you full control over cell level rendering, hence its very easy to apply conditional formatting

Example

export const MySpreadSheet = () => {
const initialSheets = [
{
name: 'Sheet 1',
id: 0,
cells: {
1: {
1: {
text: 'black'
}
},
2: {
3: {
text: 'pink'
}
}
}
}
]
const [ sheets, setSheets ] = useState(initialSheets)
return (
<SpreadSheet
initialSheets={sheets}
CellRenderer={(props) => {
const { text } = props
return <DefaultCell {...props} fill={text} color={text === 'black' ? 'white' : undefined} />
}}
onChangeCells={(sheetId, cells) => {
}}
/>
)
}

Demo

fx

Sheet 1

note

For performance reasons move the CellRenderer to be its own independent component to prevent re-rendering when parent renders