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>o.liang@datatables.net</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>b.nash@datatables.net</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>s.yamamoto@datatables.net</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>t.walton@datatables.net</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>f.camacho@datatables.net</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>s.baldwin@datatables.net</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>z.frank@datatables.net</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>z.serrano@datatables.net</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>j.acosta@datatables.net</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>c.stevens@datatables.net</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>h.butler@datatables.net</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>l.greer@datatables.net</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>j.alexander@datatables.net</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>s.decker@datatables.net</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>m.bruce@datatables.net</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>d.snider@datatables.net</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