CODEWITHSUNDEEP
reactjsant-design-pro
nandesuka
nandesuka

Reputation: 799

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 }} 
  />

Upvotes: 3

Views: 11921

Answers (2)

Zunayed Shahriar
Zunayed Shahriar

Reputation: 2723

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)}

Upvotes: 4

Yuns
Yuns

Reputation: 3012

In my opinion, best not to use nested ternary operator, like said in eslint/no-nested-ternary. So consider doing this:

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

Upvotes: 1

Related Questions