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 the first column and drag the row. Note that ordering is enabled on all columns in this example.
# | Full Name | Job Title | DOB | Status | Actions |
---|---|---|---|---|---|
1 | Marth Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
2 | Jackelyn Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
3 | Aura Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
4 | Nathalie Pretty | Drywall Stripper | 13 Dec 1977 | Pending | |
5 | Sharan Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | |
6 | Maxine Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | |
7 | Sylvia Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | |
8 | Lizzee Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
9 | Kennedy Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
10 | Chantal Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
11 | Delma Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
12 | Roland Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | |
13 | Coy Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
14 | Maxwell Maben | Regional Representative | 25 Feb 1988 | Suspended | |
15 | Cicely Sigler | Senior Research Officer | 15 Mar 1960 | Pending |
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. 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. Additionally, the column that defines the row order is hidden by default, making the table a simple orderable list.
# | Full Name | Job Title | DOB | Status | Actions |
---|---|---|---|---|---|
1 | Marth Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
2 | Jackelyn Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
3 | Aura Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
4 | Nathalie Pretty | Drywall Stripper | 13 Dec 1977 | Pending | |
5 | Sharan Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | |
6 | Maxine Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | |
7 | Sylvia Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | |
8 | Lizzee Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
9 | Kennedy Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
10 | Chantal Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
11 | Delma Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
12 | Roland Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | |
13 | Coy Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
14 | Maxwell Maben | Regional Representative | 25 Feb 1988 | Suspended | |
15 | Cicely Sigler | Senior Research Officer | 15 Mar 1960 | Pending |
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. Note that the row reordering in this example is triggered by dragging the cells in the second column.
# | Full Name | Job Title | DOB | Status | Actions |
---|---|---|---|---|---|
1 | Marth Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
2 | Jackelyn Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
3 | Aura Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
4 | Nathalie Pretty | Drywall Stripper | 13 Dec 1977 | Pending | |
5 | Sharan Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | |
6 | Maxine Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | |
7 | Sylvia Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | |
8 | Lizzee Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
9 | Kennedy Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
10 | Chantal Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
11 | Delma Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
12 | Roland Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | |
13 | Coy Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
14 | Maxwell Maben | Regional Representative | 25 Feb 1988 | Suspended | |
15 | Cicely Sigler | Senior Research Officer | 15 Mar 1960 | Pending |
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. This examples shows how the row-reorder
event can be listened for and an action taken when it is triggered. In this case we simply output data about the change to the page, but a more sophisticated use case might involve using Ajax to inform a server-side about the change.
// Event result
# | Full Name | Job Title | DOB | Status | Actions |
---|---|---|---|---|---|
1 | Marth Enright | Traffic Court Referee | 22 Jun 1972 | Active | |
2 | Jackelyn Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | |
3 | Aura Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | |
4 | Nathalie Pretty | Drywall Stripper | 13 Dec 1977 | Pending | |
5 | Sharan Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | |
6 | Maxine Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | |
7 | Sylvia Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | |
8 | Lizzee Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | |
9 | Kennedy Haley | Senior Marketing Designer | 18 Dec 1960 | Active | |
10 | Chantal Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | |
11 | Delma Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | |
12 | Roland Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | |
13 | Coy Wollard | Customer Service Operator | 12 Oct 1982 | Active | |
14 | Maxwell Maben | Regional Representative | 25 Feb 1988 | Suspended | |
15 | Cicely Sigler | Senior Research Officer | 15 Mar 1960 | Pending |