{{name}}
Columns Reorder
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.| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| 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 |
| Name | Position | Office | Age | Start date | Salary |
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.| 1 | Armand | Warren | 56045 | Taiwan, Province of China | |
| 2 | Xenos | Salas | 71090 | Liberia | |
| 3 | Virginia | Whitaker | 62723 | Nicaragua | |
| 4 | Kato | Patrick | 97662 | Palau | |
| 5 | Penelope | Hensley | 76634 | Greenland | |
| 6 | Georgia | Erickson | 81358 | Bolivia | |
| 7 | Shad | Pena | 20600 | Palestinian Territory, Occupied | |
| 8 | Tanisha | Humphrey | 93371 | Kenya | |
| 9 | Claire | Espinoza | I8S 2S8 | Panama | |
| 10 | Raya | Tucker | O8D 8W7 | Botswana | |
| 11 | Otto | Briggs | 57590 | Anguilla | |
| 12 | Logan | Burt | 53041 | Venezuela | |
| 13 | Cooper | Pennington | 36994 | France | |
| 14 | Kristen | Peterson | 52917 | Sao Tome and Principe | |
| 15 | Jordan | Velasquez | 08884 | Switzerland | |
| 16 | Zelda | Freeman | F9H 1J9 | Holy See (Vatican City State) | |
| 17 | Mary | Pacheco | A7Y 6X9 | Niger | |
| 18 | Tiger | Robles | 44533 | Malaysia | |
| 19 | Zelenia | Buckner | Q8N 6E5 | Malawi | |
| 20 | Coby | Johnston | N6I 2O9 | Rwanda | |
| 21 | Gillian | Strickland | 12258 | Cook Islands | |
| 22 | Alfreda | Mcbride | K5A 3B6 | Nigeria | |
| 23 | Laith | Ford | 19072 | Czech Republic | |
| 24 | Autumn | Barton | U9D 9F4 | Angola | |
| 25 | Nadine | Britt | G4U 8L0 | Liechtenstein | |
| 26 | Xaviera | Hart | T1N 7D2 | Mali | |
| 27 | Neil | Page | T3E 9F4 | Korea | |
| 28 | Rose | French | B7T 8M2 | French Polynesia | |
| 29 | Alyssa | Poole | S1L 2T5 | Yemen | |
| 30 | Chantale | Lynch | 97316 | United States | |
| 31 | Jermaine | Dawson | A3H 7A1 | American Samoa | |
| 32 | Ann | Giles | 54258 | Korea | |
| 33 | Jerry | Carr | 04901 | South Georgia and The South Sandwich Islands | |
| 34 | Lionel | Hooper | 67970 | Bahrain | |
| 35 | Alyssa | Hewitt | R3K 2V8 | Paraguay | |
| 36 | Lisandra | Sheppard | 71886 | Seychelles | |
| 37 | Kylan | Harrison | 96763 | Italy | |
| 38 | Kaitlin | Montgomery | V5K 5U8 | Niger | |
| 39 | Heidi | Boyd | B3C 8M9 | Papua New Guinea | |
| 40 | Rinah | Case | W7M 5K1 | Mali | |
| 41 | Thaddeus | Maynard | E4V 6W6 | Egypt | |
| 42 | Lacota | Ray | T3J 8D8 | United Kingdom | |
| 43 | Olympia | Cortez | F8C 7I5 | Palau | |
| 44 | Wendy | Rojas | N8T 4K6 | Cook Islands | |
| 45 | Arden | Kelley | V9N 2T6 | India |
Showing 1 to 5 of 2,500 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.| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| 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 |
| Name | Position | Office | Age | Start date | Salary |
Showing 1 to 10 of 57 entries