DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Data Grid - Column Reordering

DevExtreme JavaScript DataGrid columns use the same display order as fields in data objects. You can use the columns array to specify a different display order. To reorder a column at runtime, change the column.visibleIndex property.

Users can drag and drop column headers to reorder columns as needed. To activate this feature, set the allowColumnReordering property to true. If you wish to prevent reorder operations for a given column, disable its column.allowReordering property.

Backend API
$(() => { $('#gridContainer').dxDataGrid({ dataSource: employees, keyExpr: 'ID', allowColumnReordering: true, columnAutoWidth: true, showBorders: true, columnFixing: { enabled: true, }, columns: [ { caption: 'Employee', fixed: true, calculateCellValue(data) { return [data.Title, data.FirstName, data.LastName] .join(' '); }, }, { dataField: 'Position', alignment: 'right', fixed: true, }, 'Address', 'City', 'Zipcode', 'State', 'Department', { dataField: 'BirthDate', dataType: 'date', }, { dataField: 'HireDate', dataType: 'date', }, 'HomePhone', 'MobilePhone', 'Email', 'Skype', ] }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.7/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>
#gridContainer { height: 440px; }
const employees = [{ ID: 1, Head_ID: 0, FirstName: 'John', LastName: 'Heart', Position: 'CEO', BirthDate: '1964/03/16', HireDate: '1995/01/15', Title: 'Mr.', Address: '351 S Hill St.', City: 'Los Angeles', State: 'California', Zipcode: 90013, Email: 'jheart@dx-email.com', Skype: 'jheartDXskype', HomePhone: '(213) 555-9208', DepartmentID: 6, Department: 'Management', MobilePhone: '(213) 555-9392', }, { ID: 2, Head_ID: 1, FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', BirthDate: '1981/06/03', HireDate: '2012/05/14', Title: 'Mrs.', Address: '807 W Paseo Del Mar', City: 'Los Angeles', State: 'California', Zipcode: 90036, Email: 'oliviap@dx-email.com', Skype: 'oliviapDXskype', HomePhone: '(310) 555-2728', DepartmentID: 5, Department: 'Human Resources', MobilePhone: '(818) 555-2387', }, { ID: 3, Head_ID: 1, FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', BirthDate: '1974/09/07', HireDate: '2002/11/08', Title: 'Mr.', Address: '4 Westmoreland Pl.', City: 'Bentonville', State: 'Arkansas', Zipcode: 91103, Email: 'robertr@dx-email.com', Skype: 'robertrDXskype', HomePhone: '(818) 555-2438', DepartmentID: 6, Department: 'Management', MobilePhone: '(818) 555-2387', }, { ID: 4, Head_ID: 1, FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', BirthDate: '1977/11/22', HireDate: '1998/04/23', Title: 'Ms.', Address: '1700 S Grandview Dr.', State: 'Georgia', City: 'Atlanta', Zipcode: 91803, Email: 'gretas@dx-email.com', Skype: 'gretasDXskype', HomePhone: '(818) 555-0976', DepartmentID: 5, Department: 'Human Resources', MobilePhone: '(818) 555-6546', }, { ID: 5, Head_ID: 1, FirstName: 'Brett', LastName: 'Wade', Position: 'IT Manager', BirthDate: '1968/12/01', HireDate: '2009/03/06', Title: 'Mr.', Address: '1120 Old Mill Rd.', State: 'Idaho', City: 'Boise', Zipcode: 91108, Email: 'brettw@dx-email.com', Skype: 'brettwDXskype', HomePhone: '(626) 555-5985', DepartmentID: 7, Department: 'IT', MobilePhone: '(626) 555-0358', }, { ID: 6, Head_ID: 3, FirstName: 'Sandra', LastName: 'Johnson', Position: 'Controller', BirthDate: '1974/11/15', HireDate: '2005/05/11', Title: 'Mrs.', Address: '4600 N Virginia Rd.', State: 'Utah', City: 'Beaver', Zipcode: 90807, Email: 'sandraj@dx-email.com', Skype: 'sandrajDXskype', HomePhone: '(562) 555-8272', DepartmentID: 5, Department: 'Human Resources', MobilePhone: '(562) 555-2082', }, { ID: 7, Head_ID: 7, FirstName: 'Kevin', LastName: 'Carter', Position: 'Shipping Manager', BirthDate: '1978/01/09', HireDate: '2009/08/11', Title: 'Mr.', Address: '424 N Main St.', State: 'California', City: 'San Diego', Zipcode: 90012, Email: 'kevinc@dx-email.com', Skype: 'kevincDXskype', HomePhone: '(213) 555-8038', DepartmentID: 3, Department: 'Shipping', MobilePhone: '(213) 555-2840', }, { ID: 8, Head_ID: 4, FirstName: 'Cynthia', LastName: 'Stanwick', Position: 'HR Assistant', BirthDate: '1985/06/05', HireDate: '2008/03/24', Title: 'Ms.', Address: '2211 Bonita Dr.', City: 'Little Rock', State: 'Arkansas', Zipcode: 90265, Email: 'cindys@dx-email.com', Skype: 'cindysDXskype', HomePhone: '(818) 555-6808', DepartmentID: 4, Department: 'Engineering', MobilePhone: '(818) 555-6655', }, { ID: 9, Head_ID: 3, FirstName: 'Kent', LastName: 'Samuelson', Position: 'Ombudsman', BirthDate: '1972/09/11', HireDate: '2009/04/22', Title: 'Dr.', Address: '12100 Mora Dr', City: 'St. Louis', State: 'Missouri', Zipcode: 90272, Email: 'kents@dx-email.com', Skype: 'kentsDXskype', HomePhone: '(562) 555-1328', DepartmentID: 26, Department: 'Human Resources', MobilePhone: '(562) 555-9282', }, { ID: 10, Head_ID: 2, FirstName: 'Taylor', LastName: 'Riley', Position: 'Network Admin', BirthDate: '1982/08/14', HireDate: '2012/04/14', Title: 'Mr.', Address: '7776 Torreyson Dr', City: 'San Jose', State: 'California', Zipcode: 90012, Email: 'taylorr@dx-email.com', Skype: 'taylorrDXskype', HomePhone: '(310) 555-9712', DepartmentID: 5, Department: 'Human Resources', MobilePhone: '(310) 555-7276', }];

This demo illustrates fixed column behavior during user-initiated column reorder operations. Users can drag & drop columns within the following areas (but not between them):

  • Columns fixed to the left
  • Non-fixed columns
  • Columns fixed to the right

Sticky columns (fixed with the 'sticky' position) behave like non-fixed columns during reorder operations (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open the JavaScript DataGrid’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.