Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image

Columns Reorder

Basic initialisation of DataTables
Basic column reorder
This example shows the basic use case of the ColReorder plugin. With ColReorder enabled for a table, the user has the ability to click and drag any table header cell, and drop it where they wish the column to be inserted. The insert point is shown visually, and the column reordering is done as soon as the mouse button is released. ColReorder is added to a DataTable through the R character added to the dom.
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
Realtime updating
While the ColReorder insertion point indicator can be styled, another option to show the end user what the column will look like when the table has been reordered is to actually do the reordering while the mouse is still dragging the column header. This is shown in this example and is controlled by the realtime parameter.
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
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. ColReorder works seamlessly with state saving in DataTables (stateSave), remembering and restoring the column positions, as well as everything else such as sorting and filtering.
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
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 colReorder.order. This is an array of integers with the column ordering you want. In this example columns are ordered on initalization this way: 1, 3, 2, 4, 0, 5, ordering functionality remains working even after predefined ordering.
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/05/0338LondonSoftware EngineerBruno Nash $163,500
2011/12/1221New YorkPre-Sales SupportCaesar Vance $106,450
2011/12/0646New YorkSales AssistantCara Stevens $145,600
2012/03/2922EdinburghSenior Javascript DeveloperCedric Kelly $433,060
Start dateAgeOfficePositionNameSalary
Showing 1 to 10 of 57 entries

  • Guru able Customizer

    Live customizer with tons of options

  • Main layouts

  •       

  • Menu Type

  • SideBar Effect

  • Hide/Show Border

  • Drop-Down Icon

  • Sub Menu Drop-down Icon