Fixed table

Today I’ll show you how can you freez table columns/rows on website in simple way. The best for it will be another great and powerful tool plug-in for JQuery library DataTables.

Example

In our example we need to include some scripts and styles like this:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/fc-3.2.2/fh-3.1.2/r-2.1.0/sc-1.4.2/datatables.min.css" />

First is JQuery script, lines 2-3 is plug-in for JQuery DataTables and the last is stylesheet for our library.

Operating principle is simple.On our table, we use the function “DataTable”.Then we set properties which we are interested in.

In our example it look like:

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

For the purpose of our example we set max height scroll to 400px.We can also set – how many columns we are freezing(7-8th line), we want paging in our table or not(6th line), etc.

Let’s see how it look on our ready-made sample table. HERE

Of course, we have more opportunity.If you want to know more options I refer you to the examples on the official website of this library.

Link to the project.