I've got a strange issue with the fixedcolumns plugin in datatables when the table contains multiple tags.

When there are multiple tbody tags then only the header column stays fixed.

I'm hoping to have a look at a fix myself and submit a PR (if it doesn't require a whole re-write), but any help would be greatly appreciated.

Forum thread here:
https://datatables.net/forums/discussion/38553/only-the-header-column-is-fixed-when-table-contains-multiple-tags?new=1

I have a datatable configured with FixedColumns plugin and scrollY: 500px

When I scroll table (>600px high), the fixed column gets misaligned by 1px.

I traced it down to this FixedColumns rule:

div.DTFC_LeftWrapper table.dataTable.no-footer,
div.DTFC_RightWrapper table.dataTable.no-footer {
    border-bottom: none;
}

my table is decorated with .table class which has

border-bottom-width: 1px

as a result, main table is 667px, but cloned (left liner) is 666px, so liner falls short 1px when scrolled to the bottom.

The scrollbar stretches to the full table wide over the fixed left columns.
The scrollable area had left: ?px set in 1.9 before.

This code is missing from in _fnGridSetup in 1.10:

this.dom.grid.dt.style.position = "absolute";
this.dom.grid.dt.style.top = "0px";
this.dom.grid.dt.style.left = this.s.iLeftWidth+"px";
this.dom.grid.dt.style.width = ($(this.dom.grid.dt).width()-this.s.iLeftWidth-this.s.iRightWidth)+"px";

Adding it did fix it.

I am using version 2.0.3 of fixed columns and am getting an error in IE8 only:

Invalid argument, line 855
oStyle.width = that.s.aiWidths[iColumn]+"px";

I'm only assuming here, but is that because aiWidths is empty(?) If so, this line (397) might be the culprit as I'm thinking its not IE8 compatible:

$('tbody>tr:eq(0)>td', this.s.dt.nTable).each( function (i) {

I have tried the new v3.0 Fixed Columns plugin, but this has issues too - the two desired fixed columns are not fixing - no errors. In desperation of having spent 3 days trawling through the DataTables documentation to get things working, this is in fact the final hurdle. Please can you add a fix in the v2.0.3 release to make it fully IE8 compatible?

Cheers.

A horizontal scroll bar is displayed on the left fixed column because it's being created fractionally too narrow. Adding overflow-x:hidden to the DTFC_LeftBodyLiner div seems to fix the display issue

I'm using Bootstrap Tabs, and each tab has a DataTable with a FIxedColumn. When I initialize both datatables (one visible, one hidden) both fixed columns are created and cause a mess. If it's too much trouble to add in functionality for FixedColumns on potentially hidden (then shown) DataTables, is there a way to remove the FixedColumn of a DataTable that is already initialized on the tab event?

Example of what I mean here:
http://jsfiddle.net/HEDvf/1353/

Sample page cloning from example

https://jsfiddle.net/shLd0ay8/

When cloning elements, the "id" should be removed since creates duplicate ids and causes issues with accessibility.

When cloning elements, the "tabindex" attributes should be removed since it disrupts keyboard navigation.

On IE9, the fixed column over the table with horizontal/vertical scrollbars will be displayed with large height.

My sample is: https://jsfiddle.net/kzmi/s4hvgqr6/

The result on IE9:

I have a table set up with and , with fixed columns 3.0.4, datatables 1.10.6,
datatables integration bootstrap. bootstrap 3

When I include Fixedcolumns , it creates an extra sort icons on the first row in addition to the header having sort icons,

my code is like so, note i am using ajax to populate my results in a server side implementation

table = $('#example').DataTable( {
    scrollY: "600px",
    scrollX: "100%",
    scrollCollapse: true, 
    stateSave: false,
    serverSide: true,
    processing: true,
    ajax: {...}

  });
  new $.fn.dataTable.FixedColumns( table, {
        leftColumns: 2
    } );

When first loading the fixed column example, there is a scrollbar within the column. This behavior seems to be specific to Chrome. In Firefox, there is no horizontal scrollbar, but there is a vertical scrollbar inline with the header at every breakpoint (this also occurs on the combined fixed column/header example in Firefox).

Chrome

Firefox

This issue is visible even in the official examples. Steps to reproduce it:

1. Go to https://www.datatables.net/extensions/fixedcolumns/.
2. Place mouse over the example table's body or left (fixed) column.
3. Refresh the page but do not move the mouse after load.
4. Scroll with the mouse wheel. Now left column will be out of sync with the rest of the table - after any mouse move or event click they get in sync.

Tried in Chrome & Safari on Mac OS.

I'm using the current version (FixedColumns 3.0.1-dev) and I'm getting this error only on IE when the number of columns is bigger than the window's width.

I am using DT (1.10.3) with fixedColumns (3.0.5-dev)

I render table HTML using KO, and then initialize DT with $(...).dataTables() call.

Here is what I see during page load:

table is rendered
table is turned into a DT (with scrollX: true)
FC iLeftWidth is calculated (480px) (and matches first column width of the table, as expected)
DT's aoDrawCallback callback is fired which calls DT's _fnScrollDraw, which changes columns widths (first column gets reduced by 450px)
"draw.dt" event is raised
FC handles the event, and but only does that._fnDraw.call( that, bFirstDraw ); without recalculating columns
As a result FC uses 480px for column width, and puts that over the column which is now 450px, not 480px

If I change FC's draw.dt handler to look like this (no claim it is a correct solution, I'm just demonstrating the problem) :

.on( 'draw.dt.DTFC', function () {
    that._fnColCalc(); // <-- this causes iLeftWidth to get updated to match new DT's column geometry.
    that._fnDraw.call( that, bFirstDraw );
    bFirstDraw = false;
} )

Then the problem goes away.

I think the problem maybe with DT's _fnScrollDraw function, that changes columns' widths but does not raise a notifications (e.g. "column-sizing.dt").

I tried upgrading to DT 1.10.7-dev, but that didn't help.

Found this today while attempting to upgrade, I have a javascript function that allows users to click on selects and inputs in the header, and the columns do not sort. Here is that code , which i gleaned from some previous datatables post:

$table.columns().eq( 0 ).each( function ( colIdx ) {

    $('input, select', $table.column(colIdx).header()).on('click', function(e) {
            e.stopPropagation();
        });
} );

here is the working example that uses 3.0.4 http://live.datatables.net/laxinabe/45/edit
here is the exact same code using 3.2.1 the code is ignored http://live.datatables.net/gizuqani/1/

last working version was 3.0.4, any version after that does not stop propagation

The Version 3.0.0 is not working on iOS devices because of the use of "mouseover" Events, but it can be easily fixed by adding "touchstart" Events: https://github.com/krisdigital/FixedColumns

With 0 width scrollbars (Mac X.7+ have the option of having them iOS style floating over the container) the new methods in FixedColumns don't have a way of hiding the scrollbars. It might need to have a check to see if the detected scrollbar width from DataTables is 0 and if so, use 15 or something...

When using a borderless bootstrap table, only the left fixed column has a bottom margin. The non-fixed right columns don't. I dunno yet, what change caused this, as this used to work a while ago IIRC.

The table-bordered class is suffixed with an x for easy toggling.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>DataTables Bootstrap 3 example</title>
  <link rel="stylesheet" type="text/css" href=
  "https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11,fc-3.2.1/datatables.min.css">
  <script type="text/javascript" src=
  "https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11,fc-3.2.1/datatables.min.js">
  </script>
  <script type="text/javascript">
        /*<![CDATA[*/
        $(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   true
    } );
  } );
        /*]]>*/
  </script>
</head>
<body>
  <div class="container">
    <table id="example" class="table table-striped table-borderedx table-condensed nowrap" cellspacing="0" width=
    "100%" summary="example">
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Extn.</th>
          <th>E-mail</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger</td>
          <td>Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
          <td>5421</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Garrett</td>
          <td>Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
          <td>8422</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Ashton</td>
          <td>Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
          <td>1562</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Below is the working fiddle of table with no direction specified:
https://jsfiddle.net/tp6xgu5o/1/

Below is the fiddle of table with direction rtl specified:
https://jsfiddle.net/tp6xgu5o/

I am trying in integrate fixed column in my application (Bootstrap based) . When i checked the live demo url the fixed first column height and scoll breaks. Please check the issue.

Based on discussion here: http://datatables.net/forums/discussion/18593/ . FixedColumns should do something better than nothing when the table object passed in has multiple tables. Either an error or handle it correctly (difficult since the instance returned assumes only one table for its API).

Moved from DataTables issue 166: https://github.com/DataTables/DataTables/issues/166

I am used FixedColumns. I have

tags after my tag. When datatables creates the 2nd scroller table, it appears to surround the col tags with a colgroup, which is fine, but it then puts it after the thead tag in the scrollbody table. The html spec requires it to be before thead, and its getting ignored by the browser.

Hello folks,

I am using the latest version of datatables and its working fine in the other browsers like chrome, IE9+ and others. But I am getting problem in ie8 and the problem is the table heads are appearing below table body. The below is sample code of js :

$(document).ready(function () {
$('#tableData').DataTable({
"ordering": false,
"lengthMenu": [10, 50, 100],
"saveState": true
});
}
);

The tableData is the id of my table and I am using th for headers and td which should be sorted and filtered using datatables.
What can be the issue with it?

Greetings,

There's a subtle typo/bug in the FixedColumns 3.0.0 code which handles the destroy event. Please correct at your earliest convenience as this is affecting many of my applications (after recently upgrading).

I've including a diff for your convenience:

--- datatables-fixedcolumns/js/dataTables.fixedColumns.js   2014-01-30 00:48:22.000000000 -0800
+++ datatables-fixedcolumns/js/dataTables.fixedColumns.js   2014-03-01 22:55:57.354587474 -0800
@@ -549,7 +549,7 @@
            .on( 'destroy.dt.DTFC', function () {
                jqTable.off( 'column-sizing.dt.DTFC destroy.dt.DTFC draw.dt.DTFC' );

-               $(that.dom.scroller).fn( 'scroll.DTFC mouseover.DTFC' );
+               $(that.dom.scroller).on( 'scroll.DTFC mouseover.DTFC' );
                $(window).off( 'resize.DTFC' );

                $(that.dom.grid.left.liner).on( 'scroll.DTFC wheel.DTFC mouseover.DTFC' );

I'm trying to build sample table for my project, after some coding I've got this:
http://live.datatables.net/fojusec/6/edit
but I get unwanted behaviour on Chrome (36.0.1985.125 m) and on IE 11 on WIn8.1

On IE11 (on right) You can see unwanted scroll bar (same happens when I remove all my custom css)
On Chrome (on left) after scrolling to bottom of table there is 1-2 pixels offset.

I'll build second sample with bootstrap 3, maybe this will help.

the 3.0.4 release has some pretty nasty memory leaks, that I traced down here twosigma/beakerx#1905 (comment)

I fear that many people have this version in production without realizing that there is a large leak in play.

The fix that I put in place in our project, was to pull the commit in on fixed-columns master that had the memory leak fixes.
twosigma/beakerx@b2fab52

I would love to be able to not depend on a commit on the tree and instead just pull in 3.0.5. This would also ensure that people do not use the 3.0.4 release anymore.

Thanks for this great library 👏

Hi,

I was wondering if there some recommended way to add inputs / filters to the table when using the fixed columns?

(somebody asked to add support to yadcf for FixedColumns)

Thanks

Everything in my table is alright but the FixedColumns part, the header width doesn't fit with the table content for example:

ID..........| ABC | Description |
1561653 | A.. | Some text.....|
1561653 | A.. | Some text.....|
1561653 | A.. | Some text.....|
1561653 | A.. | Some text.....|

i have tried recalculating the width but didn't work

Line 621 of dataTables.fixedColumns.js should read:

$(that.s.dt.nTableWrapper).off( '.DTFC' );

but it current reads:

$(this.s.dt.nTableWrapper).off( '.DTFC' );

I'm having a hard time track an issue when I try to make both a right and left column be fixed. When only fixing one left column, I can hide columns fine. As soon as I also fix one column on the right. I see the following at line 1115:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

While tracing through a little, it seems to look at a column which doesn't have any table cells currently rendered, resulting in an undefined node.

Initializing fixed columns with:

new $.fn.dataTable.FixedColumns(dtTable, {
  rightColumns: 1,
  leftColumns: 1
});

Any pointers?

Hi,

I have having my first column as Fixed and I am using Table Tools feature provided. When i try printing the information All the columns are visiblle Except Fixed column. Any ideas on that ??

The fixed column widths may have changed after paging.

Currently, if the next page has wider fixed columns than the current page, a horizontal scroll bar appears just on the fixed columns.

I was able to fix this by calling _fnColCalc in _fnDraw, but this is wrong--it should only be called before _fnDraw but after a paging event.

It works like a charm with jquery 1.8.1 like this;
http://live.datatables.net/abuyuq/4/edit

However, with newer JQuery versions it doesn't work. I had to use the nightly release of FixedColumns so as to overcome the browser version discovery issues. But in doing so the first table column isn't removed, see;
http://live.datatables.net/abuyuq/5/edit

I'd love to hear from you guys,
cheers

Can't seem to get this working. I have no way of destroying the FixedColumns object after calling fnDestroy on the DataTable.

This gets annoying after I reapply DataTables to the table, since I can't seem to create a new FixedColumns object without creating multiple layers of columns which look terrible in the view.

Simply calling fnUpdate on the existing object throws a Cannot read property 'appendChild' of undefined errors. Its happening on line 982 inside _fnClone()

I've got a table where the first column includes rows that have a rowspan > 1. When I try to use FixedColumns on this table the fixed column only uses the first column after the instead of respecting the multi row fields.

Is there something I'm doing wrong, or is this feature not supported yet?

I have a problem when I scroll to the bottom of my table. There is an extra gap that shows up at the bottom. The row heights align perfectly everywhere else. It's just the bottom. Thoughts?

http://files.caylan.net/skitch/table-20131111-230246.png

Some of the docs and warnings seem to still recommend FixedHeader for column fixing -- this is confusing as I believe the current version of FixedHeader no longer supports any kind of column fixing?

See https://github.com/DataTables/FixedColumns/search?utf8=%E2%9C%93&q=FixedHeader for most references ...

In the latest version of FixedColumns the scrollbar extends below the first column. Unfortunately the div for the left fixed column (id="DTFC_LeftWrapper") obscures the scrollbar so it cannot be selected in that area. You can select the scrollbar outside of the fixed column area.

This occurs in:
Chrome 26.0.1410.64
Firefox 20.0.1

It is fine in IE 10.0.9200.16540

You can test this using the example given previously by another user: http://live.datatables.net/iwixes/3

Solutions I have tried include:

1. If you are not using a footer then change the height of DTFC_LeftWrapper so it does not cover the scrollbar.
2. Setting the css option "pointer-event: none;" on the DTFC_LeftWrapper div. The scrollbar gets the click event but you cannot select anything in the fixed columns. In order for the descendants to receive pointer events you need to all "pointer-events: all;" to DTFC_LeftHeadWrapper, DTFC_LeftBodyWrapper and DTFC_LeftFootWrapper.

The pointer-events solution is very neat except it is CSS4: https://developer.mozilla.org/en/docs/CSS/pointer-events

Simon

Hello,

I found error in below this comment "add in the body elements, cloning form the master table".

If index is undefined, throw this error: undefined is not an object (evaluating 'f.s.dt.aoData[f.s.dt.oFeatures.bServerSide===false?f.s.dt.aiDisplay[f.s.dt._iDisplayStart+a]:a].anCells')

And i added this line and work perfectly. If is this ok for you can you fixed next release please? Thank for the great plugin.

Best regards

    $('>tbody>tr', that.dom.body).each( function (z) {
            var n = this.cloneNode(false);
            n.removeAttribute('id');
            var i = that.s.dt.oFeatures.bServerSide===false ?
                that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+z ] : z;

            // If index undefined
            if(i === undefined){
                return;
             }

            var aTds = that.s.dt.aoData[ i ].anCells || $(this).children('td, th');

            for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
            {
                iColumn = aiColumns[iIndex];

                if ( aTds.length > 0 )
                {
                    nClone = $( aTds[iColumn] ).clone(true, true)[0];
                    n.appendChild( nClone );
                }
            }
            nBody.appendChild( n );
    } );

Documentation for fixedColumns().cellIndex() mentions that fixedColumns().cellIndex() is deprecated and can be replaced with cell().index().

However when rightColumns is used, cell().index() fails to calculate correct column index when cell from the cloned table is provided as an argument.

See this example for code and demonstration. Click on "Get Index" button and compare column indexes returned by fixedColumns().cellIndex() and cell().index().

It appears that if you have fixed columns from the right side, and you hide a column it causes some problems.
http://jsfiddle.net/bjsk18dt/3/

*Notice how after you hide columns, fixedColumns.js is throwing a script error.

I have a server side table set up with fixed columns 3.0.4, datatables 1.10.6,
datatables integration bootstrap 10.6. bootstrap 3

the "processing... " div is being clipped when using fixedcolumns, you can barely see the text

sometimes this is more prominent than others based on how many results i am returning, (5 is clipped more than 10)

Hey, maintainer(s) of DataTables/FixedColumns!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library DataTables/FixedColumns is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "DataTables/FixedColumns",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

We need a column viability change event in DataTables and for FixedColumns to listen for that and call fnRedrawLayout when it is fired...

I have an on click function storing the row data in a variable

if you click on the first two columns, you'll notice the function returns undefined, however any of the unfrozen columns returns the data object

I know that this has todo with the fact that the fixedcolumns are created in a cloned table, i was wondering if there was any workaround to this?

here is my example , note the console log as you click the first two frozen columns versus any other column

The fixed column is not fixed:

http://jsfiddle.net/vdyyuyev/

The child rows in DataTables don't currently work with FixedColumns - need to fix this.

Q1: without scrollY set, it may cause a unexpected gap right

http://datatables.net/extensions/fixedcolumns/examples/initialisation/right_column.html,
and just uncomment the scrollY

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

line 765: need to add if (oOverflow.y) ?

Q2. table with table-bordered may create a unexpected x-scrollbar in the bottom of the fixed colomn.

http://datatables.net/extensions/fixedcolumns/examples/initialisation/right_column.html
and just set rightColumns.

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

it seems that either .DTFC_LeftWrapper or .DTFC_RightWrapper have both left & right table-border

line 695: need to add table's border-right-width ?
line 696: need to add table's border-left-width ?

Q3: And a question

border = $(that.s.dt.nTable).css('border-left-width');
iWidth += typeof border === 'string' ? 1 : parseInt( border, 10 );

always read 'border-left-width' (like 5px) as string ?

Q4: And a question

line 621: this.s or that.s?

thx

Hi, when I'm trying to use "fnGetPosition" on a cell of a fixed column I get the error:

TypeError: oData is undefined:
if ( oData.nTr !== null )

Any idea of how may I fix that?
Thanks!