ColReorder

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options.

Reference
Basic Column Reorder
This example shows the basic use case of the ColReorder plug-in. With ColReorder enabled for a table
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Realtime Updating
ColReorder will automatically move columns in realtime as the user moves their mouse. On slower computers with complex tables this can potentially impact performance
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
State Saving
A useful interaction pattern to use in DataTables is state saving, so when the end user reloads or revisits a page its previous state is retained.
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Predefined Column Ordering
ColReorder provides the ability to specify a column ordering which is not that of the HTML (which typically you will want) through the parameter
Start dateAgeOfficePositionNameSalary
2008/11/2833TokyoAccountantAiri Satou$162,700
2009/10/0947LondonChief Executive Officer (CEO)Angelica Ramos$1,200,000
2009/01/1266San FranciscoJunior Technical AuthorAshton Cox$86,000
2012/10/1341LondonSoftware EngineerBradley Greer$132,000
2011/06/0728San FranciscoSoftware EngineerBrenden Wagner$206,850
2012/12/0261New YorkIntegration SpecialistBrielle Williamson$372,000
2011/12/1221New YorkPre-Sales SupportCaesar Vance$106,450
2012/03/2922EdinburghSenior Javascript DeveloperCedric Kelly$433,060
2008/10/1636San FranciscoRegional DirectorCharde Marshall$470,600
2009/09/1539San FranciscoJavascript DeveloperColleen Hurst$205,500
Start dateAgeOfficePositionNameSalary
Showing 1 to 10 of 30 entries
Settings
Theme Mode

Light / Dark / System

  • Sidebar theme

    Dark / Light

  • Sidebar Caption

    Show / Hide

  • Theme Layout

    LTR/RTL

  • Layout Width

    Full / Fixed

  • Custom Theme

    Choose your primary theme color

  • Header Theme

    Choose your Header theme color

  • Navbar Theme

    Choose your Navbar theme color

  • Logo Theme

    Choose your Logo theme color

  • Navbar Caption Color

    Choose your Navbar Caption Color

  • Navbar Image

    Choose your Navbar Background Image

  • Dropdown Menu Icon

    Choose your Dropdown Menu Icon

  • Dropdown Menu Link Icon

    Choose your Dropdown Menu Link Icon