disabling a row based on dataSource property - antd table - reactjs

Question

In antd table, while rendering the data can i make a row as disabled.
so i have a dataSource so while rendering the table i need to make a table row as disabled based on the dataSource property.
In the dataSource there is a property of enabled, if its false i need to make the row as disabled kind of css.
first i thought of having a className but is there any inbuilt way, i dont want to have the selected kind of checkbox just plane a row to be disabled.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";
import "./styles.css";
function App() {
const dataSource = [
{
key: "1",
name: "Mike",
age: 32,
address: "10 Downing Street",
enabled: true
},
{
key: "2",
name: "John",
age: 42,
address: "10 Downing Street",
enabled: false
}
];
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
return (
<>
<Table dataSource={dataSource} columns={columns} />;
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Codesandbox
is there any way for this

Answer 1

Was able to find the solution
in App.js
<Table dataSource={dataSource} rowClassName={record => !record.enabled && "disabled-row"}
columns={columns} />;
and in css file
.disabled-row {
background-color: #dcdcdc;
}