根据条件对一行antd表进行着色

Question

I'm using antd table in my project. I want to change the color of one row of table if IsDefaultAccount = true where IsDefaultAccount is from back end

The code of the table in the index.js page is :

<Table
                    className="table-layout"
                    columns={this.state.columns}
                    dataSource={filteredData}
                    rowClassName='data-row'
                    bordered={true}
                    size={"small"}
                    onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }
                    onRowClick={(record, index, event) => this.handleRowClick(record)}
                    loading={this.state.loading}
                    pagination={{ pageSize: 14 }}
                />

Answer 1

Assuming that each data-item consists of a IsDefaultAccount property:

<Table
  className="table-layout"
  columns={this.state.columns}
  dataSource={filteredData}
  rowClassName={(record) => record.IsDefaultAccount ? 'data-row active-row' : 'data-row' }
  bordered={true}
  size={"small"}
  onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }
                    onRowClick={(record, index, event) => this.handleRowClick(record)}
  loading={this.state.loading}
  pagination={{ pageSize: 14 }}
/>

Let me know if this works.