# ColReorder example - FixedHeader integration

FixedHeader is a particularly useful plug-in for DataTables, allowing a table header to float at the top of a scrolling window. ColReorder works well with FixedHeader, allowing you to reorder columns even using the floating header, as shown in the example below.

Name | Position | Office | Age | Start date | Salary
--- | --- | --- | --- | --- | ---
Name | Position | Office | Age | Start date | Salary
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120
Garrett Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300
Ashton Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800
Cedric Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600
Jenna Elliott | Financial Controller | Edinburgh | 33 | 2008/11/28 | $5,300
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $4,525
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $4,080
Rhona Davidson | Integration Specialist | Edinburgh | 55 | 2010/10/14 | $6,730
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $5,000
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $3,600
Jena Gaines | System Architect | London | 30 | 2008/12/19 | $5,000
Quinn Flynn | Financial Controller | Edinburgh | 22 | 2013/03/03 | $4,200
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $5,300
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $4,800
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $2,875
Michael Silva | Senior Marketing Designer | London | 66 | 2012/11/27 | $3,750
Paul Byrd | Javascript Developer | New York | 64 | 2010/06/09 | $5,000
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $3,120
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $3,120
Dai Rios | System Architect | Edinburgh | 35 | 2012/09/26 | $4,200
Jenette Caldwell | Financial Controller | New York | 30 | 2011/09/03 | $4,965
Yuri Berry | System Architect | New York | 40 | 2009/06/25 | $3,600
Caesar Vance | Technical Author | New York | 21 | 2011/12/12 | $4,965
Doris Wilder | Sales Assistant | Edinburgh | 23 | 2010/09/20 | $4,965
Angelica Ramos | System Architect | London | 36 | 2009/10/09 | $2,875
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $4,525
Jennifer Chang | Regional Director | London | 28 | 2010/11/14 | $4,080
Brenden Wagner | Software Engineer | San Francisco | 18 | 2011/06/07 | $3,750
Ebony Grimes | Software Engineer | San Francisco | 48 | 2010/03/11 | $2,875
Russell Chavez | Director | Edinburgh | 20 | 2011/08/14 | $3,600
Michelle House | Integration Specialist | Edinburgh | 37 | 2011/06/02 | $3,750
Suki Burks | Developer | London | 53 | 2009/10/22 | $2,875
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $6,730
Gavin Cortez | Technical Author | San Francisco | 22 | 2008/10/26 | $6,730
Martena Mccray | Integration Specialist | Edinburgh | 46 | 2011/03/09 | $4,080
Unity Butler | Senior Marketing Designer | San Francisco | 47 | 2009/12/09 | $3,750
Howard Hatfield | Financial Controller | San Francisco | 51 | 2008/12/16 | $4,080
Hope Fuentes | Financial Controller | San Francisco | 41 | 2010/02/12 | $4,200
Vivian Harrell | System Architect | San Francisco | 62 | 2009/02/14 | $4,965
Timothy Mooney | Financial Controller | London | 37 | 2008/12/11 | $4,200
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $5,000
Miriam Weiss | Support Engineer | Edinburgh | 64 | 2011/02/03 | $4,965
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $4,200
Odessa Jackson | Support Engineer | Edinburgh | 37 | 2009/08/19 | $3,600
Thor Walton | Developer | New York | 61 | 2013/08/11 | $3,600
Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $4,800
Elton Baldwin | Data Coordinator | Edinburgh | 64 | 2012/04/09 | $6,730
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $4,800
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $5,300
Jennifer Acosta | Javascript Developer | Edinburgh | 43 | 2013/02/01 | $2,875
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $4,800
Hermione Butler | Director | London | 47 | 2011/03/21 | $4,080
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $3,120
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $5,300
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $5,300
Michael Bruce | Javascript Developer | Edinburgh | 29 | 2011/06/27 | $4,080
Donna Snider | System Architect | New York | 27 | 2011/01/25 | $3,120

- Javascript
- HTML
- CSS
- Ajax
- Server-side script

The Javascript shown below is used to initialise the table shown in this example:

`$(document).ready(function() { var table = $('#example').dataTable( { dom: 'Rlfrtip' } ); new $.fn.dataTable.fixedHeader( table ); } );`

In addition to the above code, the following Javascript library files are loaded for use in this example:

- ../../../media/js/jquery.js
- ../../../media/js/jquery.dataTables.js
- ../js/dataTables.colReorder.js
- ../../FixedHeader/js/dataTables.fixedHeader.js

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:

``

The following CSS library files are loaded for use in this example to provide the styling of the table:

- ../../../media/css/jquery.dataTables.css
- ../css/dataTables.colReorder.css
- ../../FixedHeader/css/dataTables.fixedHeader.css

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.