With the DataGrid UI component, a user can sort by single and multiple columns. Use the sorting.mode property to specify the current sorting mode.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        sorting: {
            mode: "single" // or "multiple" | "none"
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxo-sorting
        mode="single"> <!-- or "multiple" | "none" -->
    </dxo-sorting>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid>
        <DxSorting mode="single"/> <!-- or "multiple" | "none" -->
    </DxDataGrid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxSorting
    }
}
</script>

React

App.js

import React from 'react';

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

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

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Sorting mode="single"/> {/* or "multiple" | "none" */}
            </DataGrid>
        );
    }
}
export default App;

In single mode, the user can click a column header to sort by the column. Subsequent clicks on the same header reverse the sort order. When the user sorts by a column, the sorting settings of other columns are canceled.

In multiple mode, the user clicks a column header while pressing the Shift key to sort by the column. Sorting settings of other columns remain intact.

In both modes, the user can use the column header's context menu to apply sorting.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Sorting

To cancel a column's sorting settings, the user clicks the column's header while pressing Ctrl or uses the context menu:

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Sorting

To disable sorting in the whole UI component, set the sorting.mode property to "none"; to disable sorting only in a specific column, use its allowSorting property.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        columns: [{
            // ...
            allowSorting: false
        }]
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column [allowSorting]="false"></dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid>
        <DxColumn :allow-sorting="false"/>
    </DxDataGrid>
</template>

<script>
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.light.css';

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

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Column allowSorting={false}/>
            </DataGrid>
        );
    }
}
export default App;

View Demo

API

Initial and Runtime Sorting

Rows are sorted according to the data source by default. Set the sortOrder property to sort rows in the required order. Specify the sortIndex property as well to sort by multiple columns. Otherwise, each sorted column gets a sort index according to its position in the columns array. For example, the following code sorts rows first by the "Country", then by the "City" column:

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [
            { dataField: "City",    sortIndex: 1, sortOrder: "asc" },
            { dataField: "Country", sortIndex: 0, sortOrder: "asc" },
            // ...
        ]
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column
        dataField="City"
        [sortIndex]="1"
        sortOrder="asc">
    </dxi-column>
    <dxi-column
        dataField="Country"
        [sortIndex]="0"
        sortOrder="asc">
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";

export class AppComponent {
    // ...
}

@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid>
        <DxColumn
            data-field="City"
            :sort-index="1"
            sort-order="asc"
        />
        <DxColumn
            data-field="Country"
            :sort-index="0"
            sort-order="asc"
        />
    </DxDataGrid>
</template>

<script>
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.light.css';

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

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Column
                    dataField="City"
                    defaultSortIndex={1}
                    defaultSortOrder="asc" />
                <Column
                    dataField="Country"
                    defaultSortIndex={0}
                    defaultSortOrder="asc" />
            </DataGrid>
        );
    }
}
export default App;

Change the sortOrder and sortIndex properties using the columnOption method to sort at runtime.

jQuery

JavaScript

const dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.columnOption("Country", {
    sortIndex: 2,
    sortOrder: "desc"
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column
        dataField="Country"
        [(sortOrder)]="countrySortOrder">
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";

export class AppComponent {
    countrySortOrder: string = "asc";

    sortByCountries(order: string) {
        this.countrySortOrder = order;
    }
}

@NgModule({
    imports: [
        //...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ...>
        <DxColumn
            data-field="Country"
            v-model:sort-order="countrySortOrder"
        />
    </DxDataGrid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return {
            countrySortOrder: "asc"
        }
    },
    methods: {
        sortByCountries(order) {
            this.countrySortOrder = order;
        }
    }
}
</script>

React

App.js

import React from 'react';

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

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            countrySortOrder: "asc"
        };
    }

    render() {
        return (
            <DataGrid ...
                onOptionChanged={this.onOptionChanged}>
                <Column
                    dataField="Country"
                    sortOrder={this.state.countrySortOrder} />
            </DataGrid>
        );
    }

    sortByCountries = (order) => {
        this.setState({
            countrySortOrder: order
        });
    }

    onOptionChanged = (e) => {
        if (e.fullName === "columns[0].sortOrder") {
            this.sortByCountries(e.value);
        }
    }
}
export default App;

Custom Sorting

Use the calculateSortValue option for custom sorting if standard methods do not meet your requirements. This option can be a field name from the data source or a function that returns sorting values.

The following code snippet shows how to supply sorting values with a field name:

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        columns: [{
            dataField: "Position", // sets values for the column
            calculateSortValue: "isOnVacation" // sets values for sorting
        }]
    });
});

Angular

app.component.html

<dx-data-grid ... >
    <dxi-column
        dataField="Position" <!--sets values for the column -->
        calculateSortValue="isOnVacation"> <!-- sets values for sorting -->
    </dxi-column>
</dx-data-grid>

Vue

App.vue

<template>
    <DxDataGrid>
        <!-- data-field sets values for the column -->
        <!-- calculate-sort-value sets values for sorting -->
        <DxColumn
            data-field="Position"
            calculate-sort-value="isOnVacation"
        />
    </DxDataGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

function App() {
    return (
        <DataGrid>
            {/* dataField sets values for the column */}
            {/* calculateSortValue sets values for sorting */}
            <Column
                dataField="Position"
                calculateSortValue="isOnVacation" />
        </DataGrid>
    );
}

export default App;

The following code snippet shows how to use a function:

jQuery

index.js

$(function() {
    const dataGrid = $("#dataGridContainer").dxDataGrid({
        columns: [{
            dataField: "Position",
            sortOrder: "asc",
            calculateSortValue: function (rowData) {
                if (rowData.Position == "CEO")
                    return dataGrid.columnOption('Position', 'sortOrder') == 'asc' ? "aaa" : "zzz"; // CEOs are always displayed at the top  
                else
                    return rowData.Position; // Others are sorted as usual
            }
        }]
    }).dxDataGrid("instance");
});

Angular

app.component.html

app.component.ts

<dx-data-grid ... >
    <dxi-column
        dataField="Position"
        sortOrder="asc"
        [calculateSortValue]="calculateSortValue">
    </dxi-column>
</dx-data-grid>

export class AppComponent {
    calculateSortValue(rowData) {
        if (rowData.Position == "CEO")
            return this.sortOrder == 'asc' ? "aaa" : "zzz"; // CEOs are always displayed at the top
        else
            return rowData.Position; // Others are sorted as usual
    }
}

Vue

App.vue

<template>
    <DxDataGrid ...>
        <DxColumn
            data-field="Position"
            sort-order="asc"
            :calculate-sort-value="calculateSortValue"
        />
    </DxDataGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';

const calculateSortValue  = (rowData) => {
    if (rowData.Position == "CEO")
        return this.sortOrder == 'asc' ? "aaa" : "zzz"; // CEOs are always displayed at the top
    else
        return rowData.Position; // Others are sorted as usual
}

</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const calculateSortValue = (rowData) => {
    if (rowData.Position == "CEO")
        return this.sortOrder == 'asc' ? "aaa" : "zzz"; // CEOs are always displayed at the top    
    else
        return rowData.Position; // Others are sorted as usual
}

function App() {
    return (
        <DataGrid ...>
            <Column
                dataField="Position"
                defaultSortOrder="asc"
                calculateSortValue={calculateSortValue} />
        </DataGrid>
    );
}
export default App;

Alternatively, adjust sorting with sortingMethod. The following code snippet sorts the column by word length:

jQuery

index.js

$(function() {
    const dataGrid = $("#dataGridContainer").dxDataGrid({
        columns: [{
            dataField: 'State',
            sortingMethod: function (value1, value2) {
                return value1.length - value2.length;
            }
        }]
    }).dxDataGrid("instance");
});

Angular

app.component.html

app.component.ts

<dx-data-grid ... >
    <dxi-column
        dataField="State"
        [sortingMethod]="sortingMethod">
    </dxi-column>
</dx-data-grid>

export class AppComponent {
    sortingMethod(value1, value2) {
        return value1.length - value2.length;
    }
}

Vue

App.vue

<template>
    <DxDataGrid ...>
        <DxColumn
            data-field="State"
            :sorting-method="sortingMethod"
        />
    </DxDataGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';

const sortingMethod = (value1, value2) => {
    return value1.length - value2.length;
}

</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const sortingMethod = (value1, value2) => {
    return value1.length - value2.length;
}

function App() {
    return (
        <DataGrid ...>
            <Column
                dataField="State"
                sortingMethod={sortingMethod} />
        </DataGrid>
    );
}
export default App;

Clear Sorting Settings

You can clear sorting settings for all columns by calling the clearSorting() method, or for a specific column - by setting its sortIndex property to undefined using the columnOption method.

jQuery

JavaScript

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.columnOption("Name", "sortIndex", undefined);
dataGrid.clearSorting();

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column
        dataField="Name"
        [(sortIndex)]="nameSortIndex">
    </dxi-column>
</dx-data-grid>

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;

    nameSortIndex: number = 0;

    clearNameColumnSorting() {
        this.nameSortIndex = undefined;
    }

    clearAllSorting() {
        this.dataGrid.instance.clearSorting();
    }
}

@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid :ref="dataGridRefKey">
        <DxColumn
            data-field="Name"
            v-model:sort-index="nameSortIndex"
        />
    </DxDataGrid>
</template>

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

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

const dataGridRefKey = "my-data-grid";

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRefKey,
            nameSortIndex: 0
        };
    },
    methods: {
        clearNameColumnSorting() {
            this.nameSortIndex = undefined;
        },
        clearAllSorting() {
            this.dataGrid.clearSorting();
        }
    },
    computed: {
        dataGrid() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

React

App.js

import React from 'react';

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

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

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

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

    render() {
        return (
            <DataGrid ref={this.dataGridRef} ...>
                <Column
                    dataField="Name"
                    defaultSortIndex={0} />
            </DataGrid>
        );
    }

    clearNameColumnSorting = () => {
        this.dataGrid.columnOption("Name", "sortIndex", undefined);
    }

    clearAllSorting = () => {
        this.dataGrid.clearSorting();
    }
}
export default App;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery DataGrid - Sorting

User Interaction

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

API

Initial and Runtime Sorting

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

Custom Sorting

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

Clear Sorting Settings

jQuery

Angular

Vue

React

See Also