I want to change the background colour of columns of ant design table if the index of my data is even any idea how to change the background of columns on this condition.i have data in list want to set a condition through loop any idea how to change the background of columns in ant design.
const [dataSource, setDataSource] = useState([])
const { list } = useSelector((state) => state.userData)
useEffect(() => {
dispatch(getData(token))
setDataSource(list)
dispatch(getDataofFormularyDrug(0))
}, [])
<Table
columns={columns}
// dataSource={list}
dataSource={dataSource}
pagination={{
pageSize: 10
}}
/>
You can do this using the CSS pseudo-class :nth-child() with the keyword even to change the background color for each table cell. In your CSS File you can add the following line bellow:
.ant-table-tbody .ant-table-cell:nth-child(even) {
background-color: #fafafa;
}
I created a complete example at CodePen with the basic table from Ant Design changing the background color for the table cell when it is even. Follow the link: https://codepen.io/marcelofreires/pen/eYyZqer.