DevExtreme v23.1 is now available.

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

Free Trial Buy

Column Reordering

User Interaction

Set the allowColumnReordering property to true to allow a user to reorder columns. If a specific column should not be moved, set its allowReordering property to false.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        allowColumnReordering: true,
        columns: [
            { dataField: "CompanyName", allowReordering: false },
            // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ...
    [allowColumnReordering]="true">
    <dxi-column dataField="CompanyName" [allowReordering]="false"></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ...
        :allow-column-reordering="true">
        <DxColumn data-field="CompanyName" :allow-reordering="false" />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                allowColumnReordering={true}>
                <Column dataField="CompanyName" allowReordering={false} />
            </DataGrid>
        );
    }
}
export default App;

API

The columns array determines columns' order. You can reorder columns by moving their objects within the array or by changing the column's visibleIndex if you prefer to configure columns using the customizeColumns function.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        customizeColumns: function(columns) {
            column[2].visibleIndex = 1;
        }
    });
});
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeColumns (columns) {
        column[2].visibleIndex = 1;
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
<dx-data-grid ...
    [customizeColumns]="customizeColumns">
</dx-data-grid>
Vue
App.vue
<template>
    <DxDataGrid ...
        :customize-columns="customizeColumns">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    methods: {
        customizeColumns(columns) {
            column[2].visibleIndex = 1;
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    customizeColumns(columns) {
        column[2].visibleIndex = 1;
    }

    render() {
        return (
            <DataGrid ...
                customizeColumns={this.customizeColumns}>
            </DataGrid>
        );
    }
}
export default App;

The visibleIndex property can also be changed at runtime to reorder columns regardless of the way you configured them. For this, call the columnOption(id, optionName, optionValue) method. The following code swaps the second and first column:

jQuery
JavaScript
$("#dataGridContainer").dxDataGrid("columnOption", 1, "visibleIndex", 0);
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    swapColumns () {
        this.dataGrid.instance.columnOption(1, "visibleIndex", 0);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn ... />
        <DxColumn ...
            :visible-index.sync="secondColVisibleIndex"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return() {
            secondColVisibleIndex: 1
        }
    },
    methods: {
        swapColumns() {
            this.secondColVisibleIndex = 0;
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.dataGridRef = React.createRef();

        this.swapColumns = () => {
            this.dataGrid.columnOption(1, 'visibleIndex', 0);
        }
    }

    get dataGrid() {
        return this.dataGridRef.current.instance;
    }

    render() {
        return (
            <DataGrid ref={this.dataGridRef}>
                {/* ... */ }
            </DataGrid>
        );
    }
}
export default App;
See Also