Column Reordering - Datatables for Laravel [ Datatables for Laravel ](/) [ 1.0.5](https://laravel-datatables.com/release-notes "Click to view release notes") Toggle main menu [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search ⌘ K [ Log in ](/login) [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search docs and demos Type at least 2 characters to search. Demos ### Use Cases - [ Simple Datatable ](https://laravel-datatables.com/demos/use-case-simple) - [ Products Datatable ](https://laravel-datatables.com/demos/use-case-products) - [ Sales Operations ](https://laravel-datatables.com/demos/use-case-sales) ### Features - [ Accessibility ](https://laravel-datatables.com/demos/features-accessibility) - [ Advanced Filtering ](https://laravel-datatables.com/demos/features-advanced-filtering) - [ Aggregate Totals ](https://laravel-datatables.com/demos/features-aggregate-totals) - [ Column Reordering ](https://laravel-datatables.com/demos/features-column-reordering) - [ Custom Controls ](https://laravel-datatables.com/demos/features-custom-controls) - [ Directionality (LTR / RTL) ](https://laravel-datatables.com/demos/features-directionality) - [ Export ](https://laravel-datatables.com/demos/features-export) - [ Frozen Columns ](https://laravel-datatables.com/demos/features-frozen-columns) - [ Frozen Header ](https://laravel-datatables.com/demos/features-frozen) - [ Frozen Header & Columns ](https://laravel-datatables.com/demos/features-frozen-both) - [ Pagination ](https://laravel-datatables.com/demos/features-pagination) - [ Responsive Mobile ](https://laravel-datatables.com/demos/features-responsive-mobile) - [ Row Grouping ](https://laravel-datatables.com/demos/features-row-grouping) - [ Row Selection & Bulk Actions ](https://laravel-datatables.com/demos/features-row-selection-bulk-actions) ### Cell Renderer - [ Action Buttons ](https://laravel-datatables.com/demos/cell-renderer-action-buttons) - [ Avatar ](https://laravel-datatables.com/demos/cell-renderer-avatar) - [ Checkmark ](https://laravel-datatables.com/demos/cell-renderer-checkmark) - [ Color Sample ](https://laravel-datatables.com/demos/cell-renderer-color-sample) - [ Email Link ](https://laravel-datatables.com/demos/cell-renderer-email) - [ External Link ](https://laravel-datatables.com/demos/cell-renderer-external) - [ Friendly Timestamp ](https://laravel-datatables.com/demos/cell-renderer-friendly-timestamp) - [ Image ](https://laravel-datatables.com/demos/cell-renderer-image) - [ Long Text ](https://laravel-datatables.com/demos/cell-renderer-long-text) - [ Phone Link ](https://laravel-datatables.com/demos/cell-renderer-phone-link) - [ Progress Bar ](https://laravel-datatables.com/demos/cell-renderer-progress-bar) - [ Status Badge ](https://laravel-datatables.com/demos/cell-renderer-status-badge) - [ URL Link ](https://laravel-datatables.com/demos/cell-renderer-url) - [ Wire Link ](https://laravel-datatables.com/demos/cell-renderer-wire) ### Value Formatter - [ Compact Number ](https://laravel-datatables.com/demos/value-formatter-compact-number) - [ Currency ](https://laravel-datatables.com/demos/value-formatter-currency) - [ Duration ](https://laravel-datatables.com/demos/value-formatter-duration) - [ Friendly Filesize ](https://laravel-datatables.com/demos/value-formatter-friendly-filesize) - [ Friendly Timestamp ](https://laravel-datatables.com/demos/value-formatter-friendly-timestamp) - [ Locale Timestamp ](https://laravel-datatables.com/demos/value-formatter-locale-timestamp) - [ Number ](https://laravel-datatables.com/demos/value-formatter-number) - [ Percent ](https://laravel-datatables.com/demos/value-formatter-percent) Column Reordering ================= This demo shows how column reordering is enabled in a datatable: the table sets `$enableColumnReordering` to `true`, which allows users to drag visible columns into a different order. In this example, the left-most column is also protected with `$freezeColumns = 1`, so the most important column stays fixed while the rest can be rearranged. To make the layout stick after a refresh, the table also enables `$persistTableState = true`. That tells the datatable to remember the user-defined column order in session state, so when the page reloads the reordered layout is restored automatically. On touch devices, reordering works through a lightweight pointer-based fallback instead of a browser-only drag-and-drop interaction. When a user presses and drags a column header, the datatable tracks pointer movement and inserts the column at the correct position while keeping any frozen leading columns locked. Items per page Manage Columns 10 Current 25 50 100 ​ ### Manage Columns Drag the handles to reorder columns, or focus a handle and use the up and down arrow keys. Changes are saved when you click Apply. Apply Cancel Loading... ID Active Name Description SKU Stock Price Created At Updated At 1 Cumque et ullam #1 Laboriosam quos quia harum in veniam repellendus dolore accusamus voluptatibus. SKU-00000001 85 $487.94 October 9, 2026 3:21 PM 3 weeks ago 2 Nesciunt doloribus voluptatum #2 Reprehenderit est dolores commodi et ea ut eos. SKU-00000002 982 $375.07 October 9, 2026 3:21 PM 3 weeks ago 3 Et ullam dignissimos #3 At cupiditate ut rem ad a ea laborum est incidunt ipsum. SKU-00000003 290 A$485.74 October 9, 2026 3:21 PM 3 weeks ago 4 Exercitationem sapiente nihil #4 Repellat delectus aut nemo rerum perferendis commodi cumque voluptatem qui est sequi dolorum qui eius architecto sed. SKU-00000004 164 CA$108.78 October 9, 2026 3:21 PM 3 weeks ago 5 Vel tempore dolores #5 Maxime quos veniam voluptatibus facere blanditiis expedita cum culpa tempore repudiandae sed nobis eum quis modi. SKU-00000005 860 CA$211.49 October 9, 2026 3:21 PM 3 weeks ago 6 Qui consequatur sed #6 Necessitatibus sunt eligendi asperiores ducimus consequatur aut exercitationem omnis ipsa unde cupiditate rerum autem est velit. SKU-00000006 0 £422.27 October 9, 2026 3:21 PM 3 weeks ago 7 Sit quae occaecati #7 Qui sit sint delectus eligendi id vero atque magni id provident distinctio eos dolor qui. SKU-00000007 866 $374.05 October 9, 2026 3:21 PM 3 weeks ago 8 Esse nihil quam #8 Minus aut consectetur laborum adipisci itaque atque et ipsa dolore quis quam quod. SKU-00000008 0 £437.97 October 9, 2026 3:21 PM 3 weeks ago 9 Corporis dolorum est #9 Id et doloremque porro rerum voluptatem delectus praesentium quis non aut. SKU-00000009 988 £144.12 October 9, 2026 3:21 PM 3 weeks ago 10 Ut explicabo quia #10 Quis molestiae in dolorum numquam officia ducimus aliquid vel qui nam praesentium et minima accusantium rerum. SKU-00000010 693 A$364.24 October 9, 2026 3:21 PM 3 weeks ago « Previous Next » 1 - 10 of 1000 1 2 3 4 5 6 7 8 9 10 ... 99 100 - Demo code is available for licensed customers - ### Related Documentation [Column Reordering Features Enable drag & drop column reordering.](https://laravel-datatables.com/docs/feature-column-reordering) [State Persistence Features Enable state persistence in your datatable for a better user experience.](https://laravel-datatables.com/docs/feature-state-persistence) [State Persistence Customization Persist table state across page reloads and sessions or create your own state persistence mechanism.](https://laravel-datatables.com/docs/customization-state-persistence) © 2026 Copyright (C) [ Morrow IT Consulting & Services ](https://morrow-it.services) [Terms of Service](https://laravel-datatables.com/legal/terms) [Privacy](https://laravel-datatables.com/legal/privacy) [Legal Disclosure](https://laravel-datatables.com/legal/disclosure)