React Data Grid - Column Reordering

DevExtreme DataGrid columns use the same display order as fields in the component's dataSource. You can specify a different display order with the columns[] array. To reorder a column at runtime, change the columns[].visibleIndex property.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React from 'react'; import DataGrid, { Column, ColumnFixing } from 'devextreme-react/data-grid'; import { Employee, employees } from './data.ts'; const calculateCellValue = (data: Employee) => [data.Title, data.FirstName, data.LastName].join(' '); const App = () => ( <DataGrid id="gridContainer" dataSource={employees} keyExpr="ID" allowColumnReordering={true} columnAutoWidth={true} showBorders={true} > <ColumnFixing enabled={true} /> <Column caption="Employee" fixed={true} calculateCellValue={calculateCellValue} /> <Column dataField="Position" alignment="right" fixed={true} /> <Column dataField="Address"/> <Column dataField="City"/> <Column dataField="Zipcode"/> <Column dataField="State"/> <Column dataField="Department"/> <Column dataField="BirthDate" dataType="date" /> <Column dataField="HireDate" dataType="date" /> <Column dataField="HomePhone"/> <Column dataField="MobilePhone"/> <Column dataField="Email"/> <Column dataField="Skype"/> </DataGrid> ); export default App;

import React from 'react'; import DataGrid, { Column, ColumnFixing } from 'devextreme-react/data-grid'; import { employees } from './data.js'; const calculateCellValue = (data) => [data.Title, data.FirstName, data.LastName].join(' '); const App = () => ( <DataGrid id="gridContainer" dataSource={employees} keyExpr="ID" allowColumnReordering={true} columnAutoWidth={true} showBorders={true} > <ColumnFixing enabled={true} /> <Column caption="Employee" fixed={true} calculateCellValue={calculateCellValue} /> <Column dataField="Position" alignment="right" fixed={true} /> <Column dataField="Address" /> <Column dataField="City" /> <Column dataField="Zipcode" /> <Column dataField="State" /> <Column dataField="Department" /> <Column dataField="BirthDate" dataType="date" /> <Column dataField="HireDate" dataType="date" /> <Column dataField="HomePhone" /> <Column dataField="MobilePhone" /> <Column dataField="Email" /> <Column dataField="Skype" /> </DataGrid> ); export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export interface Employee { ID: number; Head_ID: number; FirstName: string; LastName: string; Position: string; BirthDate: string; HireDate: string; Title: string; Address: string; City: string; State: string; Zipcode: number; Email: string; Skype: string; HomePhone: string; DepartmentID: number; Department: string; MobilePhone: string; } export const employees: Employee[] = [{ 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', }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export 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', }, ];

<!DOCTYPE html> <html 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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#gridContainer { height: 440px; }

To allow users to reorder columns, set allowColumnReordering to true. To disable reordering operations for a specific column, assign false to its allowReordering property.

Users can reorder columns with mouse drag-and-drop operations or with keyboard shortcuts:

Ctrl/Cmd+Left Arrow
Move the focused column to the left.
Ctrl/Cmd+Right Arrow
Move the focused column to the right.

Reordering operations are also available in the component's context menu.

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 DataGrid’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.