When displaying a table which scrolls along the x-axis, it can sometimes be useful to the end user for the left most column to be fixed in place, if it shows grouping, index or similar information. This is basically the same idea as 'freeze columns' in Excel. This can be achieved with the FixedColumns plug-in for DataTables, as shown below.
Note that FixedColumns is suitable only for use with the scrolling features in DataTables. If you want to achieve a similar effect without scrolling enabled, please checkout FixedHeader, also for DataTables.
FixedColumns is initialised using the constructor new $.fn.dataTable.FixedColumns(); - shown below.
| First name | Last name | Position | Office | Age | Start date | Salary | Extn. | |
|---|---|---|---|---|---|---|---|---|
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 | [email protected] |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | [email protected] |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | [email protected] |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | [email protected] |
| Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | [email protected] |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | [email protected] |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | [email protected] |
| Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 | 6200 | [email protected] |
| Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 | 2360 | [email protected] |
| Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 1667 | [email protected] |
| Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | [email protected] |
| Quinn | Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 9497 | [email protected] |
| Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | [email protected] |
| Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 | 3597 | [email protected] |
| Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | [email protected] |
| Michael | Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 | 1581 | [email protected] |
| Paul | Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 | 3059 | [email protected] |
| Gloria | Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 | 1721 | [email protected] |
| Bradley | Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 | 2558 | [email protected] |
| Dai | Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 | 2290 | [email protected] |
| Jenette | Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 | 1937 | [email protected] |
| Yuri | Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 | 6154 | [email protected] |
| Caesar | Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 | 8330 | [email protected] |
| Doris | Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 | 3023 | [email protected] |
| Angelica | Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 | 5797 | [email protected] |
| Gavin | Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 | 8822 | [email protected] |
| Jennifer | Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 | 9239 | [email protected] |
| Brenden | Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 | 1314 | [email protected] |
| Fiona | Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 | 2947 | [email protected] |
| Shou | Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 | 8899 | [email protected] |
| Michelle | House | Integration Specialist | Sidney | 37 | 2011/06/02 | $95,400 | 2769 | [email protected] |
| Suki | Burks | Developer | London | 53 | 2009/10/22 | $114,500 | 6832 | [email protected] |
| Prescott | Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 | 3606 | [email protected] |
| Gavin | Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500 | 2860 | [email protected] |
| Martena | Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 | 8240 | [email protected] |
| Unity | Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 | 5384 | [email protected] |
| Howard | Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 | 7031 | [email protected] |
| Hope | Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 | 6318 | [email protected] |
| Vivian | Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 | 9422 | [email protected] |
| Timothy | Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 | 7580 | [email protected] |
| Jackson | Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 | 1042 | [email protected] |
| Olivia | Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 | 2120 | [email protected] |
| Bruno | Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 | 6222 | [email protected] |
| Sakura | Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 | 9383 | [email protected] |
| Thor | Walton | Developer | New York | 61 | 2013/08/11 | $98,540 | 8327 | [email protected] |
| Finn | Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 | 2927 | [email protected] |
| Serge | Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 | 8352 | [email protected] |
| Zenaida | Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 | 7439 | [email protected] |
| Zorita | Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 | 4389 | [email protected] |
| Jennifer | Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 | 3431 | [email protected] |
| Cara | Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 | 3990 | [email protected] |
| Hermione | Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 | 1016 | [email protected] |
| Lael | Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 | 6733 | [email protected] |
| Jonas | Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 | 8196 | [email protected] |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 | [email protected] |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 | [email protected] |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 | [email protected] |
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
} );
new $.fn.dataTable.FixedColumns( table );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
body { font-size: 140%; }
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.