floating-table-header-tanseer

How to create Floating/Fixed Table Header

Hi everyone,

Today I will share article on how to create floating/fixed or sticky table header.  Sometime we need to make fixed header for table usually when we have large data in table and want column names to be fixed  while scroll down.

There are many ways to make table header fixed but I will use jQuery library written by Misha Koryak.

So let start by downloading  floatingThead from https://github.com/mkoryak/floatThead or include via CDN:

https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.1.1/jquery.floatThead.js
https://unpkg.com/floatthead

Lets create simple HTML Table.

<table id="myTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>XYZ Col</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Test 1</td>
            <td>Testing1@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Test 2</td>
            <td>Testing2@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Test 3</td>
            <td>Testing3@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Test 4</td>
            <td>Testing4@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Test 5</td>
            <td>Testing5@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Test 6</td>
            <td>Testing6@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Test 7</td>
            <td>Testing7@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Test 8</td>
            <td>Testing8@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Test 9</td>
            <td>Testing9@example.com</td>
            <td>---</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Test 10</td>
            <td>Testing10@example.com</td>
            <td>---</td>
        </tr>
    </tbody>
</table>

Now Include JQuery and  jquery.floatThead script.

<script src=”https://code.jquery.com/jquery-3.3.1.min.js” type=”text/javascript”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.1.1/jquery.floatThead.js” type=”text/javascript”></script>

Now Initialize floatThead

$('#myTable').floatThead({
	position: 'fixed'
});

myTable is id of our table and we create table header fixed when we scroll window scroll.

But most of time we need to put table in some container which is scroll auto. To create table header fixed in container we just need to put in div or other element with scroll: auto like:

<div class="table_container">
        <table id="anotherTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>XYZ Col</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Test 1</td>
                    <td>Testing1@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Test 2</td>
                    <td>Testing2@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Test 3</td>
                    <td>Testing3@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Test 4</td>
                    <td>Testing4@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Test 5</td>
                    <td>Testing5@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Test 6</td>
                    <td>Testing6@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Test 7</td>
                    <td>Testing7@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Test 8</td>
                    <td>Testing8@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Test 9</td>
                    <td>Testing9@example.com</td>
                    <td>---</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Test 10</td>
                    <td>Testing10@example.com</td>
                    <td>---</td>
                </tr>
            </tbody>
        </table>
        
    </div>

And CSS for overflow container

.table_container{
            max-height: 200px;
            overflow-y: scroll;
}

Now initialize floatingThead like:

var $demo1 = $('#anotherTable');
$demo1.floatThead({
	scrollContainer: function($table){
		return $table.closest('.table_container');
	}
});

Demo: http://tanseer.com/demos/create-floating-table-header/

If you have any question then comment.

Leave a Reply