<!-- required files -->
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css" rel="stylesheet" />
<script src="../assets/plugins/datatables.net/js/dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="../assets/plugins/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js"></script>

<!-- html -->
<table id="data-table-fixed-columns" width="100%" class="table table-striped table-bordered align-middle text-nowrap">
  <thead>
    <tr>
      <th width="1%"></th>
      <th width="1%" data-orderable="false"></th>
      ...
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<!-- script -->
<script>
  $('#data-table-fixed-columns').DataTable({
    scrollY:        300,
    scrollX:        true,
    scrollCollapse: true,
    paging:         false,
    fixedColumns:   true
  });
</script>