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 fixedin 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 FixedColumnsplug-in for DataTables, as shown below.
First name Last name Position Office Age Start date Salary Extn. E-mail
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
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 leftColumnsand rightColumnsyou 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. E-mail
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
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 rightColumnsinitialisation parameter, which works just the same as leftColumnsdoes 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. E-mail
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
Complex headers
If you are using multiple rows in the table header, it can be useful to have a rowspanningcell 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 FixedColumnsinstance as you normally would!
Name HR Information Details
Username Position Office Age Start date Salary Extn. E-mail
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