Search code examples
cssdatatablesvuejs3

VueJS3 setting a datatables row background color with a css value

I'm trying to set the background color of a row from a datatables component based on the color value stored in the row.

I'm using the vuejs datatables component: https://datatables.net/blog/2022-06-22-vue#Installation

I'm calling the component like this:

<DataTable        
  :columns="columns"
  :options="options"
  :ajax="ajax_request"
>
</DataTable>

And that works like a charm. I get the datatables with my rows of data. In this data set, the rows each have a column that has a hex color value. For example #f00. Now I want to apply this hex color value to the background color of that entire row. I can't use a class for this because the color is actually being changed by the user and therefore can't be hard coded.

Adding a rowCallback function gives me access to the specific rows. And adding a specific class works:

options.rowCallback = function(row, data) {
  row.classList.add('test')
}

But I don't want to add a specific class with hard-coded colors. I need to add a specific background color based on the value of one of the columns in the data set.

I have searched the internet for a couple of days now and haven't found a solution. I did find a lot of references that suggest doing it like this:

$("td:eq(12)", row).css('background-color','#99ff9c')

So i tried

row.css('background-color','#99ff9c')

But when in the rowCallback my row object doesn't have a CSS function. I can't find a way to make his work.

Solution 
  • options.rowCallback = function(row, data, index){
     row.getElementsByTagName("td")[12].style.background = 'red';
  }