CODEWITHSUNDEEP
reactjstypescriptantdant-design-pro
skamin
skamin

Reputation: 1

How to conditionally color specific rows in an AntD table

I'm trying to color entire rows based on some data that comes from the data source of the table.

I have seen that you can use rowClassName, but don't quite understand how it works.

Would love some typescripts examples! Thanks!

<Table
  columns={cols}
  dataSource={data}
  rowKey={(record: obj) => record.key}
  rowClassName={(record: obj) => record.amount == '0' ? <???> : ''}
/>

Upvotes: 0

Views: 3181

Answers (1)

Damian Green
Damian Green

Reputation: 7495

Here's an example from our codebase:

import s from './styles.css'

useStyles(s)
...
 rowClassName={(_r, i) => (i % 2 ? s.odd : s.even)}

and in a css file:


.odd {
  background: color(var(--midnight-5) alpha(50%));
}

.even {
  background-color: #f8f9fa;
}

We use Isomorphic style loader

Upvotes: 2

Related Questions