Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

jamie priority asked 2 years 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(data.data)
  const business = data.data;
 asyncTable.update(
  {
 rows: business.map((business, 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="${business.id}""><i class="fa fa-edit"></i></button>`,
         }),    
       },
        { loading: true }
    );
});

Dawid Wajszczuk staff answered 2 years ago


Hi,

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

const formatCell = (cell) => {
  cell.style.backgroundColor = "#dadb2a"
};

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

const datatableInstance = new mdb.Datatable(
  document.getElementById('datatable-cell-format'),
  { rows, columns }
);

Keep coding,
Dawid



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: 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