How to freeze a Header and Columns of a HTML table using Jquery

Question

I am trying to fix the header and columns and to change their background color of Table by using Jquery. i have created table in jquery from some Json data.

I have tried 'translate()' function to freeze.

var translate = "translate(5px,0)";

"This helps me to fix column or header but the main problem is that, when i scrolled horizontal first and then vertical , the first <th/> of header getting scrolled and rest of headers are staying fixed.(see output image as a mention question)"

Let me show you the code:

HTML:

This is my HTML , where i am calling 'MyJS' from <script/>.

 <div class="row" >
    <div class="tblMain" id="tblMainDiv">

    </div>
</div>

<script>
  $("#tblMainDiv").MyJS({
                    Data: data.Data,
                    ColoredColumns:["Sarika"]
  });                                                            
<script/>

JS:

'_params' is the parameters and '_params.Data' is the Json data of table. '_myTableTr ' is the tr of table.

   var _collection = JSON.parse(_params.Data);
   var _myTableColumns = [];

   var _collection = JSON.parse(_params.Data); // Parsing the Json Data.
        for (var i in _collection[0]) {
            _myTableColumns.push(i); // grabing column headers and pushing into collection.
        }


        // Adding table heads
        if (_myTableColumns.length > 0) {  
            for (var i = 0; i < _myTableColumns.length; i++) {
                var _myTableTh = document.createElement("th");
                _myTableTh.innerHTML = _myTableColumns[i];
                _headerTr.appendChild(_myTableTh);
            }
        }

        // adding table data.
        for (var i = 0; i < _collection.length; i++) {
            _myTableTr = _myDatatable.insertRow(-1);
            for (var j = 0; j < _myTableColumns.length; j++) {
                var cell = _myTableTr.insertCell(-1);
                cell.innerHTML = _collection[i][_myTableColumns[j]];
            }
        }

And here is the code for Freeze:

Here i am trying to fix only one first column ,but in future i want to fix multiple random columns .

 //For Header and Specific columns to be fixed .
    var lastPosY = 0;
    var lastPosX = 0;

    $("#"+$(this).attr('id')).scroll(function () {
        var currPosX = this.scrollLeft; // get current position of Column.
        var currPosY = this.scrollTop;

        if (lastPosY != currPosY && (lastPosY > 0 || currPosY>0)) {

            $('#tblMyDataTable' + $(this).attr('id') + ' thead  th:first-child').removeAttr('style');
            var translate = "translate(0," + (this.scrollTop) + "px)"; // getting translate pixels on the basis of current position of Header bar.
            $($('#tblMyDataTable' + $(this).attr('id')).find("thead").eq(0)).css('transform', translate);

        }
        else {

            translate = "translate(" + (this.scrollLeft) + "px,0)";  // getting translate pixels on the basis of current position of Column.
            if (lastPosX != currPosX) {
                $('#tblMyDataTable' + $(this).attr('id') + ' thead  th:first-child').css('transform', translate);
                $('#tblMyDataTable' + $(this).attr('id') + ' tbody tr td:first-child').css('transform', translate); 
            }
        }

        lastPosX = currPosX;
        lastPosY = currPosY;

    });

CSS:

.myDataTable {
width: 100%;
overflow-x: scroll;
border-collapse: separate !important;
border: 1px solid #000;}

.tblMain {
margin:20px;}

.myDataTable > tbody > tr:nth-child(even)>td {
background-color: #e6e6e6;}

.myDataTable > tbody > tr:nth-child(odd) > td {
background-color: #fff;}

.tblMain {
    height: 50vh;
    overflow-y: auto;}

An Output i am getting:

Please help me to fix it and change the background color of fixed ones. Thank you.

XPD · Accepted Answer · 2019-08-01 10:56:31Z

1

To do this you can use two tables. One is for table header and the other table for table data. Then use resize event to resize column widths.

<table id="header">
   <thead><tr>
     <th>Col1</th>
     <th>Col2</th>      
   </tr></thead>
</table>
<table id="body">
   <tbody><tr>
     <td>Data1</td>
     <td>Data2</td>      
   </tr></tbody>
</table>

jQuery datatables plugin has this functionality.

<style>

   thead tr {
       background-color: red; /* Your color */
   }

</style>

edited Aug 1, 2019 at 10:56

answered Aug 1, 2019 at 10:36

XPD

1,2291 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rahul Chaudhari Over a year ago

thanks for the reply. how can i give a background color to fixed column and can i achieve editable cells functionality and filter functionality with two <table/> ?

XPD Over a year ago

Editable cells functionality is a complex behavior to implement where you need to dynamically create text boxes inside <td></td>. Its best to use a plugin with the functionality. Datatables has this feature but you need to addon this as a paid add on. Although you can use a trial. Better alternative would be js-grid.com/demos.

XPD Over a year ago

You can give a background color by using css for thead tr selector.

Rahul Chaudhari Over a year ago

facing same issue again with two different <table/> i am using.

XPD Over a year ago

The use of two tables is for fixing header with the top table and content bottom table. Do you still face the same problem with this approach?

|

Collectives™ on Stack Overflow

How to freeze a Header and Columns of a HTML table using Jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related