Datatable: how to fix both first row and first column?

Question

I've a large table. (>50 cols, >100 rows).

I'm using FixedHeader extension to keep first row fixed ad top. This works.

But i'm not able to enable the first COLUMN to stay fixed when user scroll horizontally, and I'm trying to do this using FixedColumns.

My actual init code is

$('#order_proposal_table').DataTable({
    'pageLength'    : 500,
    'fixedHeader'   : true,
    'fixedColumns'  :   {
        leftColumns: 1,
    },
    'sDom'          : 'lprtip ', // default was lfrtip, i repeat pagination both on top and on bottom
    'lengthMenu'    : [[10,25,50,100,250,500,-1], [10,25,50,100,250,500,'Tutte']],
    'language'      : {
        'url': '//cdn.datatables.net/plug-ins/1.10.10/i18n/Italian.json',
    }
}); 

The problem is that first rows remains fixed at top when user scroll vertically, ok, but when the user scroll the browser viewport horizontally to see all the other columns the first columns doesn't stay fixed at the left margin of the page.

What am I doing wrong?

EDIT 1:

I tried with fixedColumns: true,, but nothing changed.

EDIT 2:

I, just now, can see this info in the javascript console:

DataTables warning: table id=order_proposal_table - FixedColumns is not
needed (no x-scrolling in DataTables enabled), so no action will be
taken. Use 'FixedHeader' for column fixing when scrolling is not enabled

Can this help you to help me?

Answer 1

$(document).ready(function() {
  $('#example').DataTable({
    scrollY: 300,
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: true
  });
});

/* Ensure that the demo table scrolls */

th,
td {
  white-space: nowrap;
}
div.dataTables_wrapper {
  width: 400px;
  margin: 0 auto;
}

<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js"></script>

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Olivia</td>
      <td>Liang</td>
      <td>Support Engineer</td>
      <td>Singapore</td>
      <td>64</td>
      <td>2011/02/03</td>
      <td>$234,500</td>
      <td>2120</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Bruno</td>
      <td>Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>38</td>
      <td>2011/05/03</td>
      <td>$163,500</td>
      <td>6222</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Sakura</td>
      <td>Yamamoto</td>
      <td>Support Engineer</td>
      <td>Tokyo</td>
      <td>37</td>
      <td>2009/08/19</td>
      <td>$139,575</td>
      <td>9383</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Thor</td>
      <td>Walton</td>
      <td>Developer</td>
      <td>New York</td>
      <td>61</td>
      <td>2013/08/11</td>
      <td>$98,540</td>
      <td>8327</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Finn</td>
      <td>Camacho</td>
      <td>Support Engineer</td>
      <td>San Francisco</td>
      <td>47</td>
      <td>2009/07/07</td>
      <td>$87,500</td>
      <td>2927</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Serge</td>
      <td>Baldwin</td>
      <td>Data Coordinator</td>
      <td>Singapore</td>
      <td>64</td>
      <td>2012/04/09</td>
      <td>$138,575</td>
      <td>8352</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Zenaida</td>
      <td>Frank</td>
      <td>Software Engineer</td>
      <td>New York</td>
      <td>63</td>
      <td>2010/01/04</td>
      <td>$125,250</td>
      <td>7439</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Zorita</td>
      <td>Serrano</td>
      <td>Software Engineer</td>
      <td>San Francisco</td>
      <td>56</td>
      <td>2012/06/01</td>
      <td>$115,000</td>
      <td>4389</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Jennifer</td>
      <td>Acosta</td>
      <td>Junior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>43</td>
      <td>2013/02/01</td>
      <td>$75,650</td>
      <td>3431</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Cara</td>
      <td>Stevens</td>
      <td>Sales Assistant</td>
      <td>New York</td>
      <td>46</td>
      <td>2011/12/06</td>
      <td>$145,600</td>
      <td>3990</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Hermione</td>
      <td>Butler</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>47</td>
      <td>2011/03/21</td>
      <td>$356,250</td>
      <td>1016</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Lael</td>
      <td>Greer</td>
      <td>Systems Administrator</td>
      <td>London</td>
      <td>21</td>
      <td>2009/02/27</td>
      <td>$103,500</td>
      <td>6733</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Jonas</td>
      <td>Alexander</td>
      <td>Developer</td>
      <td>San Francisco</td>
      <td>30</td>
      <td>2010/07/14</td>
      <td>$86,500</td>
      <td>8196</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Shad</td>
      <td>Decker</td>
      <td>Regional Director</td>
      <td>Edinburgh</td>
      <td>51</td>
      <td>2008/11/13</td>
      <td>$183,000</td>
      <td>6373</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Michael</td>
      <td>Bruce</td>
      <td>Javascript Developer</td>
      <td>Singapore</td>
      <td>29</td>
      <td>2011/06/27</td>
      <td>$183,000</td>
      <td>5384</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Donna</td>
      <td>Snider</td>
      <td>Customer Support</td>
      <td>New York</td>
      <td>27</td>
      <td>2011/01/25</td>
      <td>$112,000</td>
      <td>4226</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

DEMO
I think you have not include Fixed Table plugin Datatable CSS and Fixed Datable JS Source

Answer 2

I think the problem might be, that you are missing the scrollX: true property.

$('#order_proposal_table').DataTable({
    'pageLength'    : 500,
    'fixedHeader'   : true,
    'scrollX'       : true,
    'fixedColumns'  :   {
        leftColumns: 1,
    },
    'sDom'          : 'lprtip ', // default was lfrtip, i repeat pagination both on top and on bottom
    'lengthMenu'    : [[10,25,50,100,250,500,-1], [10,25,50,100,250,500,'Tutte']],
    'language'      : {
        'url': '//cdn.datatables.net/plug-ins/1.10.10/i18n/Italian.json',
    }
}); 

See these examples:

https://datatables.net/extensions/fixedcolumns/examples/initialisation/simple.html

and

https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html