File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    
<!-- https://datatables.net/forums/discussion/42045/nested-tables-->
<!-- How can the child-row columns be made to align with the parent columns? -->
    
    <meta name="description" content="child row containing datatable with parent-aligned columns" />
    <meta charset=utf-8 />
​
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
   
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th></th>
            <th>Client</th>
            <th>Project</th>
            <th>Hours</th>
            <th>Billed</th>
            <th>Collected</th>
          </tr>
        </thead>
​
        <tbody>
          <tr>
            <td></td>
            <td>ABC Company</td>
            <td>1001-01</td>
            <td>100</td>
            <td>$5000</td>
            <td>$2500</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
}
JavaScriptSaved
 
$(document).ready( function () {
  
  function format(rowData) { 
    var childTable = '<tr>' +
          '<td></td>' +
            '<td>Brown, John</td>' +
            '<td>Staff</td>' +
            '<td>50</td>' +
            '<td>$2,500</td>' +
            '<td>$1,500</td>' +
          '</tr>'+
          '<tr>' +
            '<td></td>' +
            '<td>Smith, Mary</td>' +
            '<td>Consultant</td>' +
            '<td>50</td>' +
            '<td>$2,500</td>' +
            '<td>$1,000</td>' +
          '</tr>' ;
    return childTable;
  }
  
  var table = $('#example').DataTable({
    'dom' : 't',
    'columns': [
      {
        'className': 'details-control',
        'orderable': false,
        'data': null,
        'defaultContent': ''
      },
      null,
      null,
      null,
      null,
    ],
    'columnDefs': [
      {
        'targets': [0],
        'width': '10px',
      },
      {
        'targets': [1,2],
        'className' : 'dt-left',
      },
      {
        'targets' : [3,4,5],
        'className' : 'dt-right',
        'width': '100px',
      },
    ]
  });
​
  // Add event listener for opening and closing details
  $('#example 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');
    }
  });
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers