I am trying to create simple app to show data stored in Mongodb. I could get all the data and make it shown in the app. I want to set color in each cell of table when they meet certain condition. For example, I want any cell values over 50% colored yellow and 70% colored greed ... How can I do that? I am using MDB package based on React bootstrap 4.
import { MDBDataTable } from 'mdbreact';
And here is my code:
and my app appears like:
I tried to find some solution from the documentation of MDB but couldn't find it that specifically change color by threshold.
conditional styles in bootstrap datatable: https://mdbootstrap.com/docs/react/data/datatables/
const conditionalRowStyles = [
{
when: row => row.coverage < 50,
style: {
backgroundColor: 'yellow',
},
},
];
const MyTable = () => (
<DataTable
title="Desserts"
columns={columns}
data={data}
conditionalRowStyles={conditionalRowStyles}
/>
);