javascripthtmljquerycssdatatables

The fixedColumn feature not working in the datatable

I am trying to freeze the first four columns of this datatable when a user is scrolling it horizontally. But the style "dtfc-has-left" style="position: relative;"" is not applied when I inspect the datatable in the browser, and the feature is not working. Please let me know if anyone can see the reason why the frozen columns is not applied. A minimal working example:

$(document).ready(function() {
  $('#example').DataTable({
    scrollX: true,
    scrollY: '300px',
    scrollCollapse: true,
    paging: true,
    fixedColumns: {
      leftColumns: 4
    },
    columnDefs: [{
      width: 120,
      targets: [0, 1, 2, 3]
    }]
  });
});
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

/* Container with fixed width and overflow-x auto for horizontal scrolling */
#tableContainer {
  border: 1px solid #ccc;
}

/* Prevent wrapping in table cells */
th,
td {
  white-space: nowrap;
  width: 120px;
}

/* Make DataTables scroll wrapper visible */
div.dataTables_wrapper {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.dataTables.min.css" />


<h2>DataTables FixedColumns Minimal Example</h2>

<div id="tableContainer">
  <table id="example" class="display nowrap" style="width:100%;">
    <thead>
      <tr>
        <th>Action</th>
        <th>Estimation ID</th>
        <th>Reference ID</th>
        <th>Project Name</th>
        <th>Status</th>
        <th>Result</th>
        <th>Change Requests</th>
        <th>Client Company</th>
        <th>Company Phone</th>
        <th>Company Email</th>
        <th>Client Budget (£)</th>
        <th>Material Value (£)</th>
        <th>Tender Value (£)</th>
        <th>MarkUp %</th>
        <th>Estimated Duration (Days)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button>Review</button></td>
        <td>101</td>
        <td>EST-001</td>
        <td>Bridge Construction</td>
        <td>Pile Setup Pending</td>
        <td>NAY</td>
        <td>2</td>
        <td>ABC Corp</td>
        <td>+1 555-1234</td>
        <td>abc@example.com</td>
        <td>150,000.00</td>
        <td>75,000.00</td>
        <td>120,000.00</td>
        <td>25.00</td>
        <td>90</td>
      </tr>
      <tr>
        <td><button>Proceed</button></td>
        <td>102</td>
        <td>EST-002</td>
        <td>Building Renovation</td>
        <td>Valuation Pending</td>
        <td>NAY</td>
        <td>0</td>
        <td>XYZ Ltd</td>
        <td>+44 207-111-2222</td>
        <td>xyz@example.com</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
      </tr>
      <tr>
        <td><button>Review</button></td>
        <td>103</td>
        <td>EST-003</td>
        <td>New Warehouse</td>
        <td>Completed</td>
        <td>Won</td>
        <td>1</td>
        <td>MegaCorp</td>
        <td>+61 02-1234-5678</td>
        <td>megacorp@example.com</td>
        <td>500,000.00</td>
        <td>200,000.00</td>
        <td>450,000.00</td>
        <td>15.00</td>
        <td>180</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- FixedColumns JS -->
<script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/fixedColumns.dataTables.min.js"></script>

Solution 

  • <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>

<script>
  $(document).ready(function () {
    $('#example').DataTable({
      scrollX: true,
      scrollY: '300px',
      scrollCollapse: true,
      paging: true,
      fixedColumns: {
        leftColumns: 4
      }
    });
  });
</script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.dataTables.min.css" />
    <div id="tableContainer">
  <table id="example" class="display nowrap" style="width:100%;">
    <thead>
      <tr>
        <th>Action</th>
        <th>Estimation ID</th>
        <th>Reference ID</th>
        <th>Project Name</th>
        <th>Status</th>
        <th>Result</th>
        <th>Change Requests</th>
        <th>Client Company</th>
        <th>Company Phone</th>
        <th>Company Email</th>
        <th>Client Budget (£)</th>
        <th>Material Value (£)</th>
        <th>Tender Value (£)</th>
        <th>MarkUp %</th>
        <th>Estimated Duration (Days)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button>Review</button></td>
        <td>101</td>
        <td>EST-001</td>
        <td>Bridge Construction</td>
        <td>Pile Setup Pending</td>
        <td>NAY</td>
        <td>2</td>
        <td>ABC Corp</td>
        <td>+1 555-1234</td>
        <td>abc@example.com</td>
        <td>150,000.00</td>
        <td>75,000.00</td>
        <td>120,000.00</td>
        <td>25.00</td>
        <td>90</td>
      </tr>
      <tr>
        <td><button>Proceed</button></td>
        <td>102</td>
        <td>EST-002</td>
        <td>Building Renovation</td>
        <td>Valuation Pending</td>
        <td>NAY</td>
        <td>0</td>
        <td>XYZ Ltd</td>
        <td>+44 207-111-2222</td>
        <td>xyz@example.com</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
      </tr>
      <tr>
        <td><button>Review</button></td>
        <td>103</td>
        <td>EST-003</td>
        <td>New Warehouse</td>
        <td>Completed</td>
        <td>Won</td>
        <td>1</td>
        <td>MegaCorp</td>
        <td>+61 02-1234-5678</td>
        <td>megacorp@example.com</td>
        <td>500,000.00</td>
        <td>200,000.00</td>
        <td>450,000.00</td>
        <td>15.00</td>
        <td>180</td>
      </tr>
    </tbody>
  </table>