FixedColumns example 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!

NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
Name
HR Information
Contact
Position
Salary
Office
Extn.
E-mail
Airi Satou Accountant $162,700 Tokyo 5407 a.satou@datatables.net
Angelica Ramos Chief Executive Officer (CEO) $1,200,000 London 5797 a.ramos@datatables.net
Ashton Cox Junior Technical Author $86,000 San Francisco 1562 a.cox@datatables.net
Bradley Greer Software Engineer $132,000 London 2558 b.greer@datatables.net
Brenden Wagner Software Engineer $206,850 San Francisco 1314 b.wagner@datatables.net
Brielle Williamson Integration Specialist $372,000 New York 4804 b.williamson@datatables.net
Bruno Nash Software Engineer $163,500 London 6222 b.nash@datatables.net
Caesar Vance Pre-Sales Support $106,450 New York 8330 c.vance@datatables.net
Cara Stevens Sales Assistant $145,600 New York 3990 c.stevens@datatables.net
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224 c.kelly@datatables.net
Charde Marshall Regional Director $470,600 San Francisco 6741 c.marshall@datatables.net
Colleen Hurst Javascript Developer $205,500 San Francisco 2360 c.hurst@datatables.net
Dai Rios Personnel Lead $217,500 Edinburgh 2290 d.rios@datatables.net
Donna Snider Customer Support $112,000 New York 4226 d.snider@datatables.net
Doris Wilder Sales Assistant $85,600 Sidney 3023 d.wilder@datatables.net
Finn Camacho Support Engineer $87,500 San Francisco 2927 f.camacho@datatables.net
Fiona Green Chief Operating Officer (COO) $850,000 San Francisco 2947 f.green@datatables.net
Garrett Winters Accountant $170,750 Tokyo 8422 g.winters@datatables.net
Gavin Cortez Team Leader $235,500 San Francisco 2860 g.cortez@datatables.net
Gavin Joyce Developer $92,575 Edinburgh 8822 g.joyce@datatables.net
Gloria Little Systems Administrator $237,500 New York 1721 g.little@datatables.net
Haley Kennedy Senior Marketing Designer $313,500 London 3597 h.kennedy@datatables.net
Hermione Butler Regional Director $356,250 London 1016 h.butler@datatables.net
Herrod Chandler Sales Assistant $137,500 San Francisco 9608 h.chandler@datatables.net
Hope Fuentes Secretary $109,850 San Francisco 6318 h.fuentes@datatables.net
Howard Hatfield Office Manager $164,500 San Francisco 7031 h.hatfield@datatables.net
Jackson Bradshaw Director $645,750 New York 1042 j.bradshaw@datatables.net
Jena Gaines Office Manager $90,560 London 3814 j.gaines@datatables.net
Jenette Caldwell Development Lead $345,000 New York 1937 j.caldwell@datatables.net
Jennifer Acosta Junior Javascript Developer $75,650 Edinburgh 3431 j.acosta@datatables.net
Jennifer Chang Regional Director $357,650 Singapore 9239 j.chang@datatables.net
Jonas Alexander Developer $86,500 San Francisco 8196 j.alexander@datatables.net
Lael Greer Systems Administrator $103,500 London 6733 l.greer@datatables.net
Martena Mccray Post-Sales support $324,050 Edinburgh 8240 m.mccray@datatables.net
Michael Bruce Javascript Developer $183,000 Singapore 5384 m.bruce@datatables.net
Michael Silva Marketing Designer $198,500 London 1581 m.silva@datatables.net
Michelle House Integration Specialist $95,400 Sidney 2769 m.house@datatables.net
Olivia Liang Support Engineer $234,500 Singapore 2120 o.liang@datatables.net
Paul Byrd Chief Financial Officer (CFO) $725,000 New York 3059 p.byrd@datatables.net
Prescott Bartlett Technical Author $145,000 London 3606 p.bartlett@datatables.net
Quinn Flynn Support Lead $342,000 Edinburgh 9497 q.flynn@datatables.net
Rhona Davidson Integration Specialist $327,900 Tokyo 6200 r.davidson@datatables.net
Sakura Yamamoto Support Engineer $139,575 Tokyo 9383 s.yamamoto@datatables.net
Serge Baldwin Data Coordinator $138,575 Singapore 8352 s.baldwin@datatables.net
Shad Decker Regional Director $183,000 Edinburgh 6373 s.decker@datatables.net
Shou Itou Regional Marketing $163,000 Tokyo 8899 s.itou@datatables.net
Sonya Frost Software Engineer $103,600 Edinburgh 1667 s.frost@datatables.net
Suki Burks Developer $114,500 London 6832 s.burks@datatables.net
Tatyana Fitzpatrick Regional Director $385,750 London 1965 t.fitzpatrick@datatables.net
Thor Walton Developer $98,540 New York 8327 t.walton@datatables.net
Tiger Nixon System Architect $320,800 Edinburgh 5421 t.nixon@datatables.net
Timothy Mooney Office Manager $136,200 London 7580 t.mooney@datatables.net
Unity Butler Marketing Designer $85,675 San Francisco 5384 u.butler@datatables.net
Vivian Harrell Financial Controller $452,500 San Francisco 9422 v.harrell@datatables.net
Yuri Berry Chief Marketing Officer (CMO) $675,000 New York 6154 y.berry@datatables.net
Zenaida Frank Software Engineer $125,250 New York 7439 z.frank@datatables.net
Zorita Serrano Software Engineer $115,000 San Francisco 4389 z.serrano@datatables.net
NamePositionSalaryOfficeExtn.E-mail
Name
Airi Satou
Angelica Ramos
Ashton Cox
Bradley Greer
Brenden Wagner
Brielle Williamson
Bruno Nash
Caesar Vance
Cara Stevens
Cedric Kelly
Charde Marshall
Colleen Hurst
Dai Rios
Donna Snider
Doris Wilder
Finn Camacho
Fiona Green
Garrett Winters
Gavin Cortez
Gavin Joyce
Gloria Little
Haley Kennedy
Hermione Butler
Herrod Chandler
Hope Fuentes
Howard Hatfield
Jackson Bradshaw
Jena Gaines
Jenette Caldwell
Jennifer Acosta
Jennifer Chang
Jonas Alexander
Lael Greer
Martena Mccray
Michael Bruce
Michael Silva
Michelle House
Olivia Liang
Paul Byrd
Prescott Bartlett
Quinn Flynn
Rhona Davidson
Sakura Yamamoto
Serge Baldwin
Shad Decker
Shou Itou
Sonya Frost
Suki Burks
Tatyana Fitzpatrick
Thor Walton
Tiger Nixon
Timothy Mooney
Unity Butler
Vivian Harrell
Yuri Berry
Zenaida Frank
Zorita Serrano
Name
Showing 1 to 57 of 57 entries

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:

/* Ensure that the demo table scrolls */ th, td { white-space: nowrap; padding-left: 40px !important; padding-right: 40px !important; } 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.