I'm sorry but I still can't get it to work. I changed your example to add my own style and then it doesn't work.
Where am I going wrong?
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import products from './products.json';
const CustomLockedCell = ({dataItem, style, className}) => (
<td style={{
backgroundColor: dataItem.stockfree < 0 ?
"rgb(243, 23, 0, 0.32)" :
"rgb(55, 180, 0,0.32)"
}} className={className}> {dataItem.ProductID} </td>
)
class App extends React.Component {
render() {
return (
<div>
<Grid
style={{ height: '400px', width: '500px' }}
data={products}
reorderable
>
<Column cell={CustomLockedCell} field="ProductID" title="ID" width="45px" locked />
<Column field="ProductName" title="Name" width="250px" />
<Column field="Category.CategoryName" title="CategoryName" />
<Column field="UnitPrice" title="Price" width="90px" />
<Column field="UnitsInStock" title="In stock" width="90px" />
<Column field="UnitsOnOrder" title="On order" width="90px" />
<Column field="Discontinued" width="120px" locked={true} />
<Column field="QuantityPerUnit" title="Additional details" width="250px" />
</Grid>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);