Topic: Datatable - Dynamically Changing Row Class Name

pd1748 priority asked 4 years ago

I need to dynamically style ( add a className ) to a row - I can't seem to figure out how to do this ... I can add a click event , but I can't seem to change the background of the row to highlight a row dependent on a value. ( I want to highlight a row red when a value drops below a given value ) ... It seems a very basic and very common task to complete but I appear to be stuck. I can add an Icon .. but the client definitely wants the colour to change !.

I have created a snipped - but I can't seem to get it to bind to this support request


Piotr Glejzer staff commented 4 years ago

Do you have an example with your code to check it?

Amrit Anand free answered 3 years ago

I think the answer is incomplete or useless

Krzysztof Wilk staff commented 3 years ago


From MDB React v5.0.0 you can add the rowClassNames property in the row structure, where you can add your custom classes with styling. The example row should look like this: { name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: '61', date: '2011/04/25', salary: '$320', rowClassNames: 'bg-danger' },

pd1748 priority answered 4 years ago

Enclosed snippet below.. the client function retrieves the dataset from the API. It returns a column colour which we want to be the background colour of the row ( i.e. all the logic of the highlighted rows is done on server ) I have removed some other code ( so I apolgise if there are references to unused object )

import React, { useState, useEffect } from 'react'; import { MDBIcon, MDBBtn, MDBInput, MDBDataTable, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter, MDBAlert } from "mdbreact"; import { GetCurrentUserRecords, AddUser } from '../dtos'; import client from "../context/dbLink";

function Teamtable(props) { const [tabledata, setTabledata] = useState([]); const [fetched, setFetched] = useState(false);

function editrecord(e) {
//Edits the Record here !


function deleterecord(e) {
//Removes the record here 

function showlog(e) {
// Show the users log

useEffect(() => {
    if (!fetched) {
        client.userName = props.currentuser.user;
        client.password = props.currentuser.password; GetCurrentUserRecords()).then((c) => {
            var rs = [];
            c.forEach((d) => {
                rs.push({ icon: <MDBIcon size="2x" icon={d.icon} className={d.colour} ></MDBIcon>,className:d.colour,  name:, outcome: d.outcome, returndate: d.returnDate, lastsubmitted: d.lastSubmittedTime, color: d.colour, buttons: <><MDBBtn rounded onClick={editrecord(}><MDBIcon size="2x" icon='pencil'></MDBIcon></MDBBtn><MDBBtn  rounded onClick={showlog(}><MDBIcon size="2x" icon='history'></MDBIcon></MDBBtn><MDBBtn rounded onClick={deleterecord(}><MDBIcon size="2x" icon='trash'></MDBIcon></MDBBtn> </> })
                columns: [
                        label: ' ',
                        field: 'icon',

                        label: 'Name',
                        field: 'name',
                        label: 'Outcome',
                        field: 'outcome',

                        label: 'Return Date',
                        field: 'returndate',

                        label: 'Last Submitted',
                        field: 'lastsubmitted',

                    },  {
                        label: '  ',
                        field: 'buttons',

                rows: rs
        }, (d) => {


return (
         <p className="h4 ">Team Status</p>
        <MDBDataTable noBottomColumns={true} paging={false} small={true} hover data={tabledata} />



export default Teamtable;

Piotr Glejzer staff commented 4 years ago

I will check it soon. I added task to look into that.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.26.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No