How do I leave a fixed column in DataTable?

Question

I need some help with the "fixedColumn" attribute in dataTable. So, I need to fix to first 4 columns in my table, but any method work with that, I tried the example in https://datatables.net/reference/option/fixedColumns#:~:text=FixedColumns%20provides%20the%20option%20to,scrolling%20through%20the%20data%20set . And another example in https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html , and any of it worked.

This is my table:

<div class="row">
      <div class="col-md-12">
        <div class="box box-primary" style="padding: 3px;">
          <div id="chartcontainerSummary">
          <table class="table table-bordered table-responsive table-striped table-hover display row-border order-column" id="tabelaGrande">
            <br>
            <thead>
              <tr>
                <th>Family</th>
                <th>Demand</th>
                <th>MTD</th>
                <th>Delta</th>
                <th>    2020-08-01  </th>
                <th>    2020-08-02  </th>
                <th>    2020-08-03  </th>
                <th>    2020-08-04  </th>
                <th>    2020-08-05  </th>
                <th>    2020-08-06  </th>
                <th>    2020-08-07  </th>
                <th>    2020-08-08  </th>
                <th>    2020-08-09  </th>
                <th>    2020-08-10  </th>
                <th>    2020-08-11  </th>
                <th>    2020-08-12  </th>
                <th>    2020-08-13  </th>
                <th>    2020-08-14  </th>
                <th>    2020-08-15  </th>
                <th>    2020-08-16  </th>
                <th>    2020-08-17  </th>
                <th>    2020-08-18  </th>
                <th>    2020-08-19  </th>
                <th>    2020-08-20  </th>
                <th>    2020-08-21  </th>
                <th>    2020-08-22  </th>
                <th>    2020-08-23  </th>
                <th>    2020-08-24  </th>
                <th>    2020-08-25  </th>
                <th>    2020-08-26  </th>
                <th>    2020-08-27  </th>
                <th>    2020-08-28  </th>
                <th>    2020-08-29  </th>
                <th>    2020-08-30  </th>
                <th>    2020-08-31  </th>
              </tr>
            </thead>
            <?php  while ($arr = mysqli_fetch_array($resultFamily)) {?>
            <tr>
              <td><?php echo $arr['family_sap']; ?></td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
              <td>teste</td>
            </tr>
            <?php } ?>
          </table>
          </div>
        </div>
      </div>
    </div>

This is my js:

function tabela(){
        $("#tabelaGrande").DataTable({
            "paging": false,
            "scrollX": true,
            "scrollY" : "450px",
            "scrollCollapse": true,
            fixedColumns:   {
            leftColumns: 1
        }
        });
    }
    tabela();

This are my libs: JS:

<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" ></script>
<scritp src="https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js"></script>

CSS:

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.dataTables.min.css">

So, it do not work.... what am I doing wrong?

Thanks a Lot to all!

Answer 1

yes you can do something like this

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            leftColumns: 2
         }
    });
} );

here is working fiddle