Toggle View (Default Buttons Theme)

Demonstrates the integrated toggleView button. Switching between Responsive and ScrollX preserves highlighting, searches, ordering, and column visibility.

Buttons setup

// Include DataTables + Responsive + Buttons, then:
$('#tblToggle').DataTable({
  dom: 'Bfrtip',
  responsive: true,
  buttons: [ 'copyHtml5', 'csvHtml5', 'excelHtml5', 'colvis', 'print', 'toggleView' ]
});

Toggle helper script

<script src="/dist/datatables.toggleView.js"></script>

Highlighting rules

columnHighlighter: {
  rules: [
    { conditionsContainer:[{ logic:'AND', conditions:[{ columnName:'Fail', operator:'gt', type:'number', value:0 }] }], targets:[{ column:'Fail', textColor:'#dc143c' }] },
    { conditionsContainer:[{ logic:'AND', conditions:[{ columnName:'Pass', operator:'gt', type:'number', value:0 }] }], targets:[{ column:'Pass', textColor:'#2e8b57' }] }
  ]
}