Answers

• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  March 2020

  The source of the data doesn't matter. You can use Datatables to hide the 7th column with columns.visible. You can use the format(d) function like the example. d is the data for that row which will include the hidden column 7. d will be either an array or object depending on your data structure, ie, if using columns.data then d is an object.

  Kevin
• artemva Posts: 3Questions: 1Answers: 0

  March 2020 edited March 2020

  @kthorngren Kevin, Thanks for the answer!

  I am trying to implement what you have mentioned. However, I do not have a desired output with the following code. All I want now is just to have a child row with a constant message.

  Do you know what the problem is?

  <script>
              /* Formatting function for row details - modify as you need */
              function format (d) {
                  // `d` is the original data object for the row
                  return 'I can see the CHILD ROW!!!';
              }
  
              $(document).ready(function() {
                  var table = $('#table_id').DataTable({
                      "columnDefs": [
                          // hide the needed column
                          { "visible": false, "targets": 5 }
                      ]
                  });
  
                  // Add event listener for opening and closing details
                  $('#table_id tbody').on('click', 'td.details-control', function () {
                      var tr = $(this).closest('tr');
                      var row = table.row( tr );
  
                      if ( row.child.isShown() ) {
                          // This row is already open - close it
                          row.child.hide();
                          tr.removeClass('shown');
                      }
                      else {
                          // Open this row
                          row.child( format(row.data()) ).show();
                          tr.addClass('shown');
                      }
                  } );
              } );
  </script>
  

  

  There are no child rows and even "a button to open child row".
• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  March 2020 edited March 2020

  You need to add a column for the plus icon then use columnDefs to add the details-control class, etc as shown in the example. Something like this:

        "columnDefs": [
              // hide the needed column
              { "visible": false, "targets": 5 },
              {
                  "className":      'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": '',
                  "targets": 0
              },
        ]
  

  Kevin
• artemva Posts: 3Questions: 1Answers: 0

  March 2020

  @kthorngren Keven, thanks a lot for your hints! With the help of your answers, I was able to create child rows!

  The only tiny question left is whether it is possible to "limit the width of the child row to the size of the screen"?

  To show what I mean, please have a look at the screenshot
  

  There are so many columns that there is a "horizontal scroll" which is fine. However, when I add child rows, the content of the child row is also extended to the size of the table. It would be really nice to fit the content of the child row to the size of the screen.
  Is this possible to do?

  In case needed, here is my code:

  <script>
              /* Formatting function for row details - modify as you need */
              function format (d) {
                  // `d` is the original data object for the row
  
                  return '<table cellpadding="5" cellspacing="0" border="0">'+
                          '<tr>'+
                              '<td>Body:</td>'+
                              '<td>' + d["6"] + '</td>'+
                          '</tr>'+
                          '</table>';
              }
  
              $(document).ready( function () {
                  var table = $('#table_id').DataTable({
                      "columnDefs": [
                          { "visible": false, "targets": 6 },
                          {
                              "className":      'details-control',
                              "orderable":      false,
                              "data":           null,
                              "defaultContent": '',
                              "targets": 0
                          },
                      ]
                  });
  
                  // Add event listener for opening and closing details
                  $('#table_id tbody').on('click', 'td.details-control', function () {
                      var tr = $(this).closest('tr');
                      var row = table.row( tr );
  
                      if ( row.child.isShown() ) {
                          // This row is already open - close it
                          row.child.hide();
                          tr.removeClass('shown');
                      }
                      else {
                          // Open this row
                          row.child( format(row.data()) ).show();
                          tr.addClass('shown');
                      }
                  });
              });
  </script>
  
  
• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  March 2020 Answer ✓

  The only tiny question left is whether it is possible to "limit the width of the child row to the size of the screen"?

  Not so tiny of a question I'm afraid I'm not a CSS expert but you could wrap the child table in a div that helps control the width. Your updated example here:
  http://live.datatables.net/silevara/1/edit

  Added a div with the class inner to the child table and add the class child-cell to the td with the long text. Note the corresponding CSS in the CSS tab. This may need adjusting depending on your specific environment. For more details see Allan's response at the end of this thread.

  Kevin