CODEWITHSUNDEEP
javascriptreactjsreact-bootstrapreact-data-table-component
Sunwoo Kwak
Sunwoo Kwak

Reputation: 3

How to color cell with condition for bootstrap DataTable?

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.

Upvotes: 0

Views: 783

Answers (1)

Ninja Work
Ninja Work

Reputation: 624

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}
  />
);

Upvotes: 1

Related Questions