Datatable fixedColumns

by simaben

HTML

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.bootstrap.css">

  <table id="example">
  <thead>  <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
  <th>Column 5</th>
  <th>Column 6</th>
  </tr>
  </thead>
  <tbody>  
  <tr><td>Lorem ipsum dolor sit amet</td><td>Lorem ipsum dolor sit amet</td><td>Lorem ipsum dolor sit amet</td><td>Lorem ipsum dolor sit amet</td><td>Lorem ipsum dolor sit amet</td><td>Lorem ipsum dolor sit amet</td></tr>
  </tbody>
  </table>
<button onClick='lockColumn(1)'>
1 Column
</button>
<button onClick='lockColumn(0)'>
0 Columns
</button>

CSS

td.dt-nowrap{
  white-space: nowrap !important
}

JavaScript

function lockColumn(num) {
	var table = $('#example').DataTable();
	table.fixedColumns().left(num);
}

var table = $('#example').DataTable( {
  fixedColumns: true,
  stateSave: true,
  scrollX: true,
  columnDefs: [
    {	targets: '_all',
     className: "dt-nowrap"
    }
  ],
  "initComplete": function (settings) {
    var api = this.api();
    api.fixedColumns().left(2);
  }
});