DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
  • Examples
  • Manual
  • Reference
  • Extensions
    • AutoFill
    • Buttons
    • ColReorder
      • Examples
      • Reference: Options
      • Reference: API
      • Reference: Events
    • Editor
    • FixedColumns
    • FixedHeader
    • KeyTable
    • Responsive
    • RowGroup
    • RowReorder
    • Scroller
    • SearchBuilder
    • SearchPanes
    • StateRestore
    • Select
    • Standalone: DateTime
    • Legacy: ColVis
    • Legacy: TableTools
  • Plug-ins
  • Blog
  • Forums
  • Support
  • FAQs
  • Download
  • Purchase
≡ Show site navigation

ColReorder examples

ColReorder allows the end user to click and drag DataTables column headers to reorder a table as they see fit. Key features include:

  • Very easy integration with DataTables
  • Tight integration with all other DataTables plug-ins
  • The ability to exclude the first (or more) column from being movable
  • Predefine a column order
  • Save staving integration with DataTables

Initialisation and options

  • Basic initialisation
  • Complex headers - all cells
  • Scrolling table
  • Complex headers - specific row
  • Predefined column ordering
  • Individual column filtering
  • Selected columns
  • Initialisation using `new`
  • Enable / disable API
  • Reset ordering API
  • Footer callback
  • HTML5 data-* orthogonal data

Integration with other DataTables extensions

  • Column visibility integration
  • FixedColumns integration
  • FixedHeader integration
  • Responsive integration
  • Server-side processing
  • State saving

Styling

  • Bootstrap styling
  • Bootstrap 4 styling
  • Bootstrap 5 styling
  • Foundation styling
  • Bulma styling
  • Fomantic-UI (formally Semantic-UI) styling
  • jQuery UI styling

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2025 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.