Table Layouts

Table Layouts - Column Sorting

Summary

  • The Table Layout fully supports sorting, including Custom Sorts

Very often, Table Layouts will contain Column Sorting information.

The ColumnSorts property allows developers to define which columns will be sorted when the Layout loads.

Caution

Column Sorting defined in a Layout take precedence over sorting set in columnDefs in GridOptions

Developer Guide

Defining a Sorted Table Layout

// Provide 2 Sorted Columns: Language & License (the latter not visible)
// Language: sorted in descending order
// License: sorted in ascending order (and not initially visible in the Grid)
const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'Standard Layout',
    Layouts: [
    {
      Name: 'Standard Layout',
      TableColumns: ['name', 'language', 'github_stars', 'open_pr_count'],
      ColumnSorts: [
        { 
          ColumnId: 'language', SortOrder: 'Desc' 
        },
        { 
          ColumnId: 'license',  SortOrder: 'Asc' 
        },
      ],
    }
  ]
 },
};
1
Define any Column Sorts

Layouts can include Column Sorting definitions

The ColumnSorts property (of type ColumnSort) is an array containing 2 properties:

  • a ColumnId (string)
  • the SortOrder - either Asc or Desc

The Columns will be sorted in the order provided (but don't need to be visible).

If the Column has a Custom Sort, that will be used to sort the Column.

Applying Sorting

Sorting can be applied at run-time in one of 2 ways:

  • in the Sort step of the Table Layout UI Wizard
  • clicking the Header of a Column marked as sortable by AG Grid

Hint

If mutliple column sorting is enabled, then click 'shift' to sort a second column

Column Sorts defined at run-time are automatically persisted in the Layout State.

Custom Sorts

AdapTable provides a Custom Sorting Module.

Custom Sorts are bespoke sort orders which enable columns to be supported in a non-standard way.

Columns that have a Custom Sort are included in ColumnSorts in the normal way, and AdapTable will perform the bespoke sort order automatically when sorting is applied.

Table Layouts: Sorting
Fork
  • This example contains a Sorted Layout with sorting on 2 columns:
    • Licence (Ascending and also using a Custom Sort)
    • Name (Descending)

Invisible Columns

AdapTable allows the Grid to be sorted by Columns which are not visible.

Sorting on Invisible Columns
Fork
  • This example includes 2 Layouts each which inclues Column Sorts:
    1. Unsorted Layout - grid is not sorted so the data is displayed in the order it appears in the data source
    2. Hidden Sorted Layout - sorted by Name in Descending Order
  • Note: that in the Hidden Sorted Layout the Name column is not visible; despite that the Grid still sorts as requested
Try It Out
  • Switch between the 2 Layouts to see how the Sorting is applied

Sorting Hidden Columns

(Recorded with AdapTable v13.2)

Autogenerated Columns

AdapTable supports custom Sorting of Columns automatically created by AG Grid.

This is typically done by adding the autogenerated ColumnId to the ColumnSorts property in the Layout.

Find Out More

FAQ

How do I sort grouped Columns? AdapTable will automatically sort any Row-Grouped Columns when the Column Header is clicked. This will take into account any Custom Sorts which have been configured.

Not all the values we want to include in the sort are currently in the grid, so they don't appear in the dropdown. Can we add items by hand? That is not possible because in previous versions of AdapTable where it was allowed, users ended up with multiple differently-spelled variations of the same item. However Custom Sorts provided as part of your Initial Adaptable State can contain whichever values you provide.

Can we run the Custom Sort when pivoting? Yes - any column that has a Custom Sort will have it automatically applied if the column is part of a pivot view.

Why are Row-Grouped Columns always sorted last even if they are positioned elswhere in the Layout? That is standard AG Grid behaviour. The Column being row-grouped is always sorted last, regardless of what sort order is given to the Grid.

PreviousColumn PinningNextColumn Headers