Vue Data GridSSRM SortingEnterprise

This section covers Server-Side Sorting using the Server-Side Row Model.

Enabling Sorting

Sorting is enabled in the grid via the sortable column definition attribute.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'country', sortable: true },
    { field: 'year', sortable: true },
    { field: 'sport' },
];

For more details on sorting configurations see the section on Row Sorting.

Server-side Sorting

The actual sorting of rows is performed on the server when using the Server-Side Row Model. When a sort is applied in the grid a request is made for more rows via getRows(params) on the Server-Side Datasource.

The request object sent to the server contains sort metadata in the sortModel property, an example is shown below:

// Example request with sorting info
{
    sortModel: [
        { colId: 'country', sort: 'asc' },
        { colId: 'year', sort: 'desc' },
    ]
    
    // other properties
}

Notice in the snippet above that the sortModel contains an array of models for each column that has active sorts in the grid. The column ID and sort type can then be used by the server to perform the actual sorting.

The example below demonstrates sorting using the SSRM. Note the following:

All columns have sorting enabled via defaultColDef.sortable = true.
The server uses the metadata contained in the sortModel to sort the rows.
Open the browser's dev console to view the sortModel supplied in the request to the datasource.
Try single / multi-column (using Shift key) sorting by clicking on column headers.

Example: Server Side Sorting

Next Up

Continue to the next section to learn about SSRM Filtering.