Need Help ?

Submit enquiry here Buy Now

Rows Reorder

  2. Extension Data Tables
  3. Rows Reorder
Basic Row Reorder
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.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
NamePositionOfficeAgeStart 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. 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.
PositionOfficeAgeStart dateSalary
Accountant Tokyo 33 2008/11/28 $162,700
Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Junior Technical Author San Francisco 66 2009/01/12 $86,000
Software Engineer London 41 2012/10/13 $132,000
Software Engineer San Francisco 28 2011/06/07 $206,850
Integration Specialist New York 61 2012/12/02 $372,000
Software Engineer London 38 2011/05/03 $163,500
Pre-Sales Support New York 21 2011/12/12 $106,450
Sales Assistant New York 46 2011/12/06 $145,600
Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
PositionOfficeAgeStart dateSalary
Showing 1 to 10 of 57 entries
Restricted column ordering
This example shows that RowReorder will be used in, as ordering by other columns can make the reordering potentially quite confusing for the end user.
Preview Settings

Try It Real Time

Layout Type
    • LTR
    • RTL
    • Box
Sidebar Type
Unlimited Color
Light layout
Dark Layout
Mix Layout