Datatables - Fixed Columns
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 | t.nixon@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $97,900 | 6200 | r.davidson@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 1667 | s.frost@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
Quinn | Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 9497 | q.flynn@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | t.fitzpatrick@datatables.net |
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 | t.nixon@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $97,900 | 6200 | r.davidson@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 1667 | s.frost@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
Quinn | Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 9497 | q.flynn@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | t.fitzpatrick@datatables.net |
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 | t.nixon@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $97,900 | 6200 | r.davidson@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 1667 | s.frost@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
Quinn | Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 9497 | q.flynn@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | t.fitzpatrick@datatables.net |
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 | t.nixon@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $97,900 | 6200 | r.davidson@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 1667 | s.frost@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
Quinn | Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 9497 | q.flynn@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | t.fitzpatrick@datatables.net |