Answers

• Nevada Smith Posts: 6Questions: 1Answers: 0

  March 2023 edited March 2023

  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 Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2023 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  March 2023

  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 Posts: 80Questions: 8Answers: 3

  March 2023 edited March 2023 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  March 2023

  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 Posts: 80Questions: 8Answers: 3

  March 2023 edited March 2023 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  March 2023 edited March 2023

  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 Posts: 21,449Questions: 26Answers: 4,975

  March 2023 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  March 2023

  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 Posts: 21,449Questions: 26Answers: 4,975

  March 2023

  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