How to color all cells in a row? (Number of rows and/or columns may vary.)

Nevada Smith

For a two row table (exclusive of table header): I want the text in every cell of the first row to be RED, and the text in every cell of the second row to be BLUE.

For a table with eight rows (exclusive of table header): I want to be able to assign individual colors to each row (in its entirety).

Note: The number of columns may vary in each table.

Nevada Smith

This works for a table with two rows:

.odd { color: #C0504E; }
.even { color: #4F81BC; }

I'm still looking for a solution for a table having more than two rows, where each row may be assigned its own color.

allan

Seems to work okay for me: https://live.datatables.net/jajeboki/1/edit .

If you wanted to use a different colour per row, use the :nth-child() selector: https://live.datatables.net/ratecike/1/edit .

If you want to set the colour based on the row's data, use the rowCallback option.

Allan

Nevada Smith

Allan; thank you for your efforts.

While your solutions answered my question, I now face some requirement changes, the most significant being: there may be upwards of 30 (perhaps more) separate Datatables on the page. I must be able to set the color of certain rows in each table.

Using global CSS .oddand .even would apply to every chart on the page (which I don't want), ditto for global table tbody tr:nth-child (clever, BTW). Instead I'd have to preface these CSS rules with the id of the Datatables, and since the Datatables are programmatically generated, creating upwards of 90 unique CSS rules (30 tables X an average of three rows per table) is possible.

It is strange to me that Datatables does not supply a static configuration option to set the color of a row (and/or one or more cells).

I shall attempt to use the rowCallback option to set the entire row color as needed.

Can you post a link to an example for using rowCallback to color an entire row, please? All I could find color one cell only (not what I want).

joseoliveiraborlas

this? https://live.datatables.net/jajeboki/2/edit
Like: if it is odd lines (1,3,5,7...), put class1. if it is even (2,4,6,8...), put class 2.

Or 3 red, 3 blue, 3 red...: https://live.datatables.net/banekere/1/edit

Or this one: https://live.datatables.net/pevivodu/1/edit
Make random rgb color + opacity 0.5.

Nevada Smith

It may be worth mentioning a use case:

I am given a set of say 30 X-Y line charts. Each variable plotted (currently up to eight at a time) has an assigned color on each chart. I am then required to create Datatables corresponding to the charts, and for consistency during presentation, the colors of the rows have to match the colors of the variables from the charts.

In such a use case, it seems natural to have a static configuration option to set a row color rather than having to dynamically color each row's cell.

joseoliveiraborlas

too much for me, I can't help you. I'm learning now too. I tried.

Edit: This helps?

var colors = {
  "dataone": "#ff0000",
  "datatwo": "#00ff00",
  "datatrhe": "#0000ff",
};

var table = $('#example').DataTable({

});

table.rows().every(function(rowIdx, tableLoop, rowLoop) {
  var rowData = this.data();
  var variableName = rowData[0];
    var color = colorMap[variableName];
  if (color) {
    $(this.node()).css('background-color', color);
  }
});

The colorMap object maps the names of variables to their assigned colors. The color variable looks up the color for the variable name in the colorMap object, and if found, sets the background color of the current row

Nevada Smith

joseoliveiraborlas:

Taking one of your examples and changing from background-color to:

$(row).css('color', randomColor);

does what I need (exclusive of randomColor of course); Thank you!

(Still, I'd like to suggest to the Datatables team to consider adding a static configuration option for this.)

kthorngren

In such a use case, it seems natural to have a static configuration option to set a row color rather than having to dynamically color each row's cell.

I'm not sure what you mean by static configuration option and how it would work to conditionally color the rows based on a condition. As mentioned there is rowCallback for this. Assuming there is a column in the row data that contains information about the desired color then rowCallback is perfect.

Maybe you are asking about applying this across many tables on the page. You can set a default rowCallback option that would be applied to all the Datatables on the page. Something like this:
https://live.datatables.net/veyexexi/1/edit

Kevin

Nevada Smith

I'm not sure what you mean by static configuration option and how it would work to conditionally color the rows based on a condition.

At the time I define a DT, I am specifying the row data and everything else about the DT, so I know in my mind what color I want that row to be, and for this type of use case, I just want for example, a "rowDefs" option for "rowColor: red".

This would eliminate having to separately create visible: false columns, write JS code, and/or create CSS rules, as have been graciously offered above (and I am thankful for!).

kthorngren

I may be thinking of this incorrectly but a rowDefs option would need a targets option to define the rows to assign rowColor: red. Similar to columnDefs.targets. It seems you would need to assign a classname to each row defining the row color to make this useful. You could just create the CSS rules for the tr color classes. Do you have other ideas. Maybe @allan has some thoughts.

This would eliminate having to separately create visible: false columns

Depending on your data source you might not need this. Since I was lazy and just used the prebuilt DOM data source I used this to hide the color column. If you are using Javascript or Aajx data the color object can be part of the row data but not defined using columns.data. You can still access it in rowCallback or any other Datatables data related tools.

Ultimately I think you will need to write some JS code for this. I don't want to speak for @allan but I would guess a feature like this would be low priority and a long time in coming.

Kevin