Left fixed column
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.
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 | $97,900 | 6200 | [email protected] |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,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 | $113,500 | 3597 | [email protected] |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | [email protected] |
Right fixed column
FixedColumns has the ability to freeze columns on both the left and right hand sides of the table. By default it will fix the first column on the left, but using the initialisation parameters
leftColumns
and rightColumns
you can alter this to fix the columns on the right as well. This example shows a single column fixed in place, in this case the right most column.
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 | $97,900 | 6200 | [email protected] |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,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 | $113,500 | 3597 | [email protected] |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | [email protected] |
Multiple fixed columns
FixedColumns allows columns to be fixed from both the left and right hand sides of the table. Fixing right hand-side columns is done by using the
rightColumns
initialisation parameter, which works just the same as leftColumns
does for the left side of the table. This example shows both the left and right columns being fixed in place.
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 | $97,900 | 6200 | [email protected] |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,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 | $113,500 | 3597 | [email protected] |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | [email protected] |
Complex headers
If you are using multiple rows in the table header, it can be useful to have a
rowspanning
cell on the column(s) you have fixed in place - equally at other times it can be useful to not and make use of the two or more cells per column. FixedColumns builds on the complex header support in DataTables to make this trivial to use in FixedColumns. Just initialise your FixedColumns
instance as you normally would!
Name | HR Information | Details | ||||||
---|---|---|---|---|---|---|---|---|
Username | 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 | $97,900 | 6200 | [email protected] |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,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 | $113,500 | 3597 | [email protected] |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | [email protected] |