DataTables with FixedColumns
HTML
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/media/js/dataTables.bootstrap4.js"></script>
<script src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/dataTables.bootstrap4.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/FixedColumns/css/fixedColumns.bootstrap4.css">
<div id="table_compactview-B0ECR4NXW4KVKKB5VDRK_wrapper" class="dataTables_wrapper no-footer">
<table class="table table-striped table-hover table-bordered table-insights stripe row-border order-column dataTable no-footer" id="table_compactview-B0ECR4NXW4KVKKB5VDRK" role="grid" style="width: 3416.93px;">
<thead>
<tr role="row">
<th class="sorting_asc" rowspan="2" tabindex="0" aria-controls="table_compactview-B0ECR4NXW4KVKKB5VDRK" colspan="1" style="width: 40px;" aria-sort="ascending" aria-label="First Name: activate to sort column descending">
<div style="width:40px">First Name</div>
</th>
<th class="sorting" rowspan="2" tabindex="0" aria-controls="table_compactview-B0ECR4NXW4KVKKB5VDRK" colspan="1" style="width: 40px;" aria-label="Last Name: activate to sort column ascending">
<div style="width:40px">Last Name</div>
</th>
<th class="sorting" rowspan="2" tabindex="0" aria-controls="table_compactview-B0ECR4NXW4KVKKB5VDRK" colspan="1" style="width: 41.4167px;" aria-label="Date Of Birth: activate to sort column ascending">Date Of Birth</th>
<th class="sorting" rowspan="2" tabindex="0"...
JavaScript
$(document).ready(function() {
var table = $('#table_compactview-B0ECR4NXW4KVKKB5VDRK').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns : 2
},
searching : false,
dom : 'Brt',
buttons: [
{
extend: 'excelHtml5',
title: 'Data export'
}
],
} );
} );