title: How to fix left column datatable as shown in example
body: <p>I need to fix the left column as in the example shown below:</p>
  
  <p><a href="https://datatables.net/release-datatables/extensions/FixedColumns/examples/simple.html" rel="nofollow">https://datatables.net/release-datatables/extensions/FixedColumns/examples/simple.html</a></p>
  
  <p>What I have is:</p>
  
  <pre><code> &lt;!-- DataTables CSS --&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"&gt;
  
  &lt;!-- jQuery --&gt;
  &lt;script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- DataTables --&gt;
  &lt;script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charser="utf8" src="//cdn.datatables.net/fixedcolumns/3.0.3/js/dataTables.fixedColumns.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script&gt;
  
  $(document).ready( function () {
  var oTable = $('#example').dataTable( {
      "sScrollY": "500px",
      "sScrollX": "100%",
      "sScrollXInner": "100%",
      "bScrollCollapse": true,
      "bPaginate": false
  } );
  new FixedColumns( oTable, {
        "iLeftColumns": 1,
         "sHeightMatch" : "auto"
      } );
  } );
          &lt;/script&gt;
  </code></pre>
  
  <p>And HTML (example for large columns, I will make it 64 right now there are 20):</p>
  
  <pre><code>&lt;table id="example" class="stripe row-border order-column" cellspacing="0" width="100%"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Colum1&lt;/th&gt;
                          &lt;th&gt;Colum2&lt;/th&gt;
                          &lt;th&gt;Colum3&lt;/th&gt;
                          &lt;th&gt;Colum4&lt;/th&gt;
                          &lt;th&gt;Colum5&lt;/th&gt;
                          &lt;th&gt;Colum6&lt;/th&gt;
                          &lt;th&gt;Colum7&lt;/th&gt;
                          &lt;th&gt;Colum8&lt;/th&gt;
                          &lt;th&gt;Colum9&lt;/th&gt;
                          &lt;th&gt;Colum10&lt;/th&gt;
                          &lt;th&gt;Colum11&lt;/th&gt;
                          &lt;th&gt;Colum12&lt;/th&gt;
                          &lt;th&gt;Colum13&lt;/th&gt;
                          &lt;th&gt;Colum14&lt;/th&gt;
                          &lt;th&gt;Colum15&lt;/th&gt;
                          &lt;th&gt;Colum16&lt;/th&gt;
                          &lt;th&gt;Colum17&lt;/th&gt;
                          &lt;th&gt;Colum18&lt;/th&gt;
                          &lt;th&gt;Colum19&lt;/th&gt;
                          &lt;th&gt;Colum20&lt;/th&gt;
  
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Tiger&lt;/td&gt;
                          &lt;td&gt;Nixon&lt;/td&gt;
                          &lt;td&gt;System Architect&lt;/td&gt;
                          &lt;td&gt;Edinburgh&lt;/td&gt;
                          &lt;td&gt;61&lt;/td&gt;
                          &lt;td&gt;2011/04/25&lt;/td&gt;
                          &lt;td&gt;$320,800&lt;/td&gt;
                          &lt;td&gt;5421&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
                          &lt;td&gt;fdf&lt;/td&gt;
  
                      &lt;/tr&gt;
                      &lt;?php for($i=0;$i&lt;50;$i++){ ?&gt;
                          &lt;tr&gt;
                          &lt;td&gt;Tiger&lt;/td&gt;
                          &lt;td&gt;Nixon&lt;/td&gt;
                          &lt;td&gt;System Architect&lt;/td&gt;
                          &lt;td&gt;Edinburgh&lt;/td&gt;
                          &lt;td&gt;61&lt;/td&gt;
                          &lt;td&gt;2011/04/25&lt;/td&gt;
                          &lt;td&gt;$320,800&lt;/td&gt;
                          &lt;td&gt;5421&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
                          &lt;td&gt;t.d.net&lt;/td&gt;
  
                          &lt;/tr&gt;
                     &lt;?php }?&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>Then I add the CSS that the example wants me to add:</p>
  
  <pre><code>   &lt;style&gt;
                th, td { white-space: nowrap; }
      div.dataTables_wrapper {
          width: 1024px;
          margin: 0 auto;
      }
              &lt;/style&gt;
  </code></pre>
  
  <p>So EVERYTHING is working fine except the part of fixing the first left column, I've been hours trying to get it but I can't make it work.</p>
  
  <p>P.S: This is the error i get from console:</p>
  
  <pre><code>Uncaught ReferenceError: FixedColumns is not definedinformation.php:33 (anonymous function)jquery-latest.min.js:2 m.Callbacks.jjquery-latest.min.js:2 m.Callbacks.k.fireWithjquery-latest.min.js:2 m.extend.readyjquery-latest.min.js:2 J
  </code></pre>