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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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