[SOLVED] Ant Design table row class name multiple conditions

Ant Design table row class name multiple conditions

I have a table from the Ant Design component library which I have been applying a conditional class name. I'd like to add another condition but my syntax must be wrong. The first condition worked but after adding (record.current_price === 'Timeout' && "red") I'm met with a blank page.

Here's what I've tried below:

  <Table 
    columns={columns} 
    dataSource={context.products} 
    rowClassName={(record, index) => (record.current_price !== record.previous_price && "green") (record.current_price === 'Timeout' && "red")} 
    onChange={onChange} 
    pagination={{ pageSize: 100 }} 
  />

Solution

Using ternary operators will fix your issue.

So, the condition will be like:

rowClassName={(record) => (record.current_price !== record.previous_price ? "green" : (record.current_price === 'Timeout' ? "red" : null)}