ColReorder

DataTables Extensions

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

    Choose light or dark mode or Auto

  • Header Theme

    Choose Header Theme

  • Accent color

    Choose your primary theme color

  • Sidebar Theme

    Choose Sidebar Theme

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout