RowReorder

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 Row Reorder
Note that sorting is enabled on all columns in this example - you may wish to restrict sorting to just the sequence column to help prevent potential user confusion if they reorder when the table ordering is performed on a different column.
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
Full Row Selection
By default only the first cell in the row will trigger the reordering action. This example shows the entire row being able to start the reorder. Simply click and drag anywhere on the row
PositionOfficeAgeStart dateSalary
AccountantTokyo332008/11/28$162,700
Chief Executive Officer (CEO)London472009/10/09$1,200,000
Junior Technical AuthorSan Francisco662009/01/12$86,000
Software EngineerLondon412012/10/13$132,000
Software EngineerSan Francisco282011/06/07$206,850
Integration SpecialistNew York612012/12/02$372,000
Pre-Sales SupportNew York212011/12/12$106,450
Senior Javascript DeveloperEdinburgh222012/03/29$433,060
Regional DirectorSan Francisco362008/10/16$470,600
Javascript DeveloperSan Francisco392009/09/15$205,500
PositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Responsive Integration
This example shows RowReorder being used with the Responsive extension for DataTables and also that it provides support for touch inputs to perform a row reorder. Responsive is particularly useful with mobile devices, but can also be useful on desktops where complex data sets are shown in the DataTable.
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
Reorder Events
Providing the UI to allow end users to reorder a table is only half of the story - likely you will wish to have the changes caused by the end user to effect a database or some other data store.
PositionOfficeAgeStart dateSalary
AccountantTokyo332008/11/28$162,700
Chief Executive Officer (CEO)London472009/10/09$1,200,000
Junior Technical AuthorSan Francisco662009/01/12$86,000
Software EngineerLondon412012/10/13$132,000
Software EngineerSan Francisco282011/06/07$206,850
Integration SpecialistNew York612012/12/02$372,000
Pre-Sales SupportNew York212011/12/12$106,450
Senior Javascript DeveloperEdinburgh222012/03/29$433,060
Regional DirectorSan Francisco362008/10/16$470,600
Javascript DeveloperSan Francisco392009/09/15$205,500
PositionOfficeAgeStart dateSalary
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