DataTables

DataTables Examples

HTML

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.min.css">
<script src="https://nightly.datatables.net/js/dataTables.min.js?2024-05-28"></script>
<script src="https://cdn.datatables.net/scroller/2.4.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.4.2/css/scroller.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.0/css/fixedColumns.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/5.0.0/js/dataTables.fixedColumns.min.js"></script>
<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example">
    <thead>
        <tr><th colspan="2">a1+b2</th><th>c1</th></tr>
        <tr><th>a1</th><th>b2</th><th>c2</th></tr>
    </thead>
  </table>
</div>
<button id="demo">Give me visible data</button>
<button id="demo2">Toggle second column's visiblity</button>

CSS

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}

JavaScript

const dataSet = [];
  for (let i=0; i<10000; i++) {
    dataSet.push(["a", "b", "c"]);
  }

  const columnDefs = [{
    title: "A"
  }, {
    title: "B"
  }, {
    title: "C",
  }];

  const myTable = $('#example').DataTable({
    data: dataSet,
    columns: columnDefs,
    scrollY:        200,
    scroller: true,
    fixedColumns: {
    	start: 1
    }
  });
  
  document.getElementById('demo').onclick = () => {
    alert("[" + myTable.columns(':visible').data().toArray() + "]");
  }
  
  document.getElementById('demo2').onclick = () => {
    myTable.columns(1).visible(!myTable.columns(1).visible()[0]);
  }