Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  November 2021

  You can use responsive.details.renderer to format the child rows. See this example.

  Kevin
• MadBoyEvo Posts: 119Questions: 38Answers: 0

  November 2021

  Am I reading this correctly that you can replace ul/li with tr/td and it would automatically apply formatting there - or I would still need to apply formatting within that custom renderer?
• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2021

  It depends on the layout, it may need some formatting. This example may help, it's keep the data in the same format (number of columns, widths, etc.) as the main table, so the styling is all the same,

  Colin
• MadBoyEvo Posts: 119Questions: 38Answers: 0

  November 2021

  I am not sure we understand each other.

  http://live.datatables.net/geyumizu/304/edit

  I am highlighting BasePriority column values if it matches certain condition. The value is really far column so it's almost always hidden unless you have large screen.

  I'm trying to get rowCallback to work within renderer for those hidden columns. How would I do that?

   "responsive": {
                                  details: {
                                      renderer: function (api, rowIdx, columns) {
                                          var data = $.map(columns, function (col, i) {
                                              return col.hidden ?
                                                  '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                                  '<td>' + col.title + '</td> ' +
                                                  '<td>' + col.data + '</td>' +
                                                  '</tr>' :
                                                  '';
                                          }).join('');
  
                                          return data ?
                                              $('<table/>').append(data) :
                                              false;
                                      }
                                  }
                              },
                              "rowCallback": function (row, data) {
                                  var css = {
                                      "background-color": "#ff0000"
                                  }; var failCss = undefined; var conditionsContainer = [{
                                      "logic": "AND",
                                      "conditions": [{
                                          "columnName": "BasePriority",
                                          "columnId": 23,
                                          "operator": "gt",
                                          "type": "number",
                                          "value": "5",
                                          "valueDate": "",
                                          "dataStore": "HTML",
                                          "caseSensitive": false,
                                          "dateTimeFormat": "",
                                          "reverseCondition": false
                                      }]
                                  }]; dataTablesConditionalFormatting(row, data, conditionsContainer, [23], css, failCss);
                              }
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  November 2021 edited November 2021 Answer ✓

  You need to add some logic to the map loop in the responsive.details.renderer. See this updated example:

  EDIT: Updated link:
  http://live.datatables.net/meyapuji/1/edit

  Basically if ( col.hidden && i == 23 ) then run the code to calculate the condition to apply. Your dataTablesConditionalFormatting() function will need some refactoring to know whether the CSS is applied to the row or to the responsive data. Instead, would consider having the function return the desired styling then in rowCallback or responsive.details.renderer apply the styling to the appropriate elements.

  Kevin