javascriptreactjsreact-bootstrapreact-data-table-component

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.


Solution

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