Topic: Dynamically change row and/or column colour from api results

jamie priority asked 1 year ago

I am trying to dynamically change the background colour of a row in in my mdb datatable. The data from our api has the colour code in it. below is my code to do add the edit button, but I have no idea how to change either a row colour or a column colour both of which I need to do. Any helps please would be great.

fetch('https://myapi', params)
      .then((response) => response.json())
      .then((data) => {
        // console.log(
  const business =;
 rows:, i) => {
        const bgcolor = business.levelcolour //#dadb2a (bronze, could be silver or gold)

    edit: ` <button class="edit-btn btn btn-outline-primary btn-floating btn-sm" data-mdb-id="${}""><i class="fa fa-edit"></i></button>`,
        { loading: true }

Dawid Wajszczuk staff answered 1 year ago


You can change color of column by format option. You can use something like this:

const formatCell = (cell) => { = "#dadb2a"

const columns = [
  { label: 'Purchases', field: 'purchases', format: formatCell },

const datatableInstance = new mdb.Datatable(
  { rows, columns }

Keep coding,

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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.0.0
  • Device: PC
  • Browser: chrome
  • OS: win 11
  • Provided sample code: No
  • Provided link: No