Basic initialization

This trivial example shows the use of the rowReorder property being used to enable RowReorder on a DataTable. The first column in the table is a sequence number that provides the basis for the ordering. To change a row's order, simply click and drag the row.

Seq.NamePositionOfficeStart dateSalary
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
9 Hermione Butler Regional Director London 2011/03/21 $356,250
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
Seq.NamePositionOfficeStart dateSalary
Showing 1 to 10 of 57 entries

Restricted column ordering

This example shows the same information as the simple example, but in this case restricts the column ordering that can be applied to the table to just the sequence number column. Generally this will be the configuration that RowReorder will be used in, as ordering by other columns can make the reordering potentially quite confusing for the end user.

Seq.NamePositionOfficeStart dateSalary
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
9 Hermione Butler Regional Director London 2011/03/21 $356,250
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
Seq.NamePositionOfficeStart dateSalary
Showing 1 to 10 of 57 entries

Mobile support (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.

Seq.NamePositionOfficeStart dateSalary
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
9 Hermione Butler Regional Director London 2011/03/21 $356,250
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
Seq.NamePositionOfficeStart dateSalary
Showing 1 to 10 of 57 entries

Full row selection

The rowReorder.selector option provides the ability to define which element in a table row will provide the row reordering handle to the end user. This could be a button in an Actions column (which might also provide options for editing and deleting a row), or any other element.

NamePositionOfficeStart dateSalary
Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
Bruno Nash Software Engineer London 2011/05/03 $163,500
Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
Hermione Butler Regional Director London 2011/03/21 $356,250
Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
NamePositionOfficeStart dateSalary
Showing 1 to 10 of 57 entries

Reorder event

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. This can be done by listening for the row-reorder event.

Event result:
Seq.NamePositionOfficeStart dateSalary
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
9 Hermione Butler Regional Director London 2011/03/21 $356,250
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
Seq.NamePositionOfficeStart dateSalary
Showing 1 to 10 of 57 entries

DataTables Scrolling

This example is used to show RowReorder's support for DataTables scrollY feature. As the dragged row approaches the boundary of the table, the table will start to scroll.

Seq.NamePositionOfficeStart dateSalary
Seq.
Name
Position
Office
Start date
Salary
Seq.
Name
Position
Office
Start date
Salary
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
9 Hermione Butler Regional Director London 2011/03/21 $356,250
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
11 Thor Walton Developer New York 2013/08/11 $98,540
12 Haley Kennedy Senior Marketing Designer London 2012/12/18 $313,500
13 Jena Gaines Office Manager London 2008/12/19 $90,560
14 Charde Marshall Regional Director San Francisco 2008/10/16 $470,600
15 Cara Stevens Sales Assistant New York 2011/12/06 $145,600
16 Michael Bruce Javascript Developer Singapore 2011/06/27 $183,000
17 Jenette Caldwell Development Lead New York 2011/09/03 $345,000
18 Sonya Frost Software Engineer Edinburgh 2008/12/13 $103,600
19 Donna Snider Customer Support New York 2011/01/25 $112,000
20 Brenden Wagner Software Engineer San Francisco 2011/06/07 $206,850
21 Brielle Williamson Integration Specialist New York 2012/12/02 $372,000
22 Garrett Winters Accountant Tokyo 2011/07/25 $170,750
23 Quinn Flynn Support Lead Edinburgh 2013/03/03 $342,000
24 Unity Butler Marketing Designer San Francisco 2009/12/09 $85,675
25 Lael Greer Systems Administrator London 2009/02/27 $103,500
26 Colleen Hurst Javascript Developer San Francisco 2009/09/15 $205,500
27 Zorita Serrano Software Engineer San Francisco 2012/06/01 $115,000
28 Timothy Mooney Office Manager London 2008/12/11 $136,200
29 Caesar Vance Pre-Sales Support New York 2011/12/12 $106,450
30 Vivian Harrell Financial Controller San Francisco 2009/02/14 $452,500
31 Sakura Yamamoto Support Engineer Tokyo 2009/08/19 $139,575
32 Paul Byrd Chief Financial Officer (CFO) New York 2010/06/09 $725,000
33 Jonas Alexander Developer San Francisco 2010/07/14 $86,500
34 Jackson Bradshaw Director New York 2008/09/26 $645,750
35 Gloria Little Systems Administrator New York 2009/04/10 $237,500
36 Angelica Ramos Chief Executive Officer (CEO) London 2009/10/09 $1,200,000
37 Michael Silva Marketing Designer London 2012/11/27 $198,500
38 Howard Hatfield Office Manager San Francisco 2008/12/16 $164,500
39 Michelle House Integration Specialist Sidney 2011/06/02 $95,400
40 Suki Burks Developer London 2009/10/22 $114,500
41 Cedric Kelly Senior Javascript Developer Edinburgh 2012/03/29 $433,060
42 Zenaida Frank Software Engineer New York 2010/01/04 $125,250
43 Shad Decker Regional Director Edinburgh 2008/11/13 $183,000
44 Serge Baldwin Data Coordinator Singapore 2012/04/09 $138,575
45 Dai Rios Personnel Lead Edinburgh 2012/09/26 $217,500
46 Herrod Chandler Sales Assistant San Francisco 2012/08/06 $137,500
47 Prescott Bartlett Technical Author London 2011/05/07 $145,000
48 Bradley Greer Software Engineer London 2012/10/13 $132,000
49 Jennifer Acosta Junior Javascript Developer Edinburgh 2013/02/01 $75,650
50 Rhona Davidson Integration Specialist Tokyo 2010/10/14 $327,900
51 Jennifer Chang Regional Director Singapore 2010/11/14 $357,650
52 Gavin Cortez Team Leader San Francisco 2008/10/26 $235,500
53 Hope Fuentes Secretary San Francisco 2010/02/12 $109,850
54 Tatyana Fitzpatrick Regional Director London 2010/03/17 $385,750
55 Airi Satou Accountant Tokyo 2008/11/28 $162,700
56 Doris Wilder Sales Assistant Sidney 2010/09/20 $85,600
57 Yuri Berry Chief Marketing Officer (CMO) New York 2009/06/25 $675,000
Seq.NamePositionOfficeStart dateSalary
Showing 1 to 57 of 57 entries

Horizontal snap

By default, when a row is dragged around a page with RowReorder, it will follow the mouse for both horizontal and vertical movements. However, you may wish to restrict the movement of the following row to just the vertical axis. This can be done with the rowReorder.snapX option.

Seq.NamePositionOfficeStart dateSalary
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
9 Hermione Butler Regional Director London 2011/03/21 $356,250
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
Seq.NamePositionOfficeStart dateSalary
Showing 1 to 10 of 57 entries

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now