Answers

• wlin98004 Posts: 7Questions: 2Answers: 0

  March 2016

  I found the information on fixedColumns and fixedHeader. I have to choose one or the other. That is fine for me. However my table is within a tab structure. The tab function is done in jQuery. Right now, I am finding the fixedHeader extension is not compatible with jQuery tab function. Can anyone comment on this or knows a solution. Thanks.
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  March 2016

  There is no solution for FixedHeader in an offset element at this time - sorry. It is an enhancement that needs to be made in the FixedHeader software.

  Allan
• wlin98004 Posts: 7Questions: 2Answers: 0

  March 2016

  To wrap up this question. It turned out you can have a "freeze" view, by combining the fixedColumns and scrollY feature. You can only freeze the header row, which is most of the cases. Here is my table setting for doing this.

      scrollY: "60vh", 
      scrollCollapse: true,
      scrollX: true,
      fixedColumns: { leftColumns: 2 },
  

  You need to watch out for div that may be initially invisible such as in a tab setup. In those cases, the column width will be incorrect initially. You need to call columns.adjust() to resize the header columns. Here is some more information on this.

  http://datatables.net/examples/api/tabs_and_scrolling.html

  In my case, I am using jQuery UI (tabs). I had to do the following in the activate event.

  $('#tabs').tabs({
      activate: function(event, ui) {
          // do column adjustment for the active table.
          $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
      }
  });
  

  Good luck.
• wlin98004 Posts: 7Questions: 2Answers: 0

  March 2016

  By the way, there is an issue in IE11 where there will be two horizontal scroll bar under the fixed column portion of the table.
• wlin98004 Posts: 7Questions: 2Answers: 0

  March 2016

  Well, found another hiccup. The columns.adjust() call will readjust the column width such that the data cell width will match the header width. However, it does not adjust the row height. In my case, some cells have more data and needs wrapping. This increases the cell/row height. Because the left column(s) are locked, the row height is calculated for the "header" column at different time from the data cells. Now, I have a mismatch in row alignment between the header column and the data columns. I have already try the heightMatch option and it did not solve my problem.

  fixedColumns: { leftColumns: 2, heightMatch: 'auto' },

  The solution to this is to re-draw the whole table. I replaced my column adjust call in the tab event, to following.

          // do column width and height adjustment for the active table.
          $.fn.dataTable.tables( {visible: true, api: true} ).draw();