Row Grouping - Sorting

Summary

AdapTable enables the Row Grouped Column to be sorted
There is an order of evaluation concerning the different sorting possibilities

AdapTable will apply sorting on the column being Row-Grouped.

There are many different ways in AdapTable and AG Grid that sorting can be applied, which are evaluated by AdapTable using the following priority:

an active AdapTable Custom Sort
a ColDef Comparator created in AG Grid Column Defs
the current Layout Column Sort
AG Grid's default sort mechanism (typically alphanumerically)

Row Grouping: Sorting

Fork Fork

In this example we provide 4 Layouts to demonstrate different elements of sorting Row Groups:
- The Custom Sort Layout is grouped by Language. We also provide a Custom Sort for the Language Column and we sort by it. Accordingly, the Custom Sort is applied in the Layout.
- The AG Grid Comparator Layout is grouped by Issue Change, which we also sort by it (in ascending order) This column has an AG Grid comparator, and so this sort is applied in the Layout.
- The Column Sort Layout is grouped by License, which we also sort by it (in descending order). Accordingly, this sort is applied in the Layout.
- The No Sort Layout is grouped by License, but we have not provided any sorting, so no sorting is applied to the Layout

Try It Out

Click the header in the No Sort Layout to sort the Row Grouped Column
Note how the Row Grouped Column is now sorted in default (ie alphabetical) order

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Grouping: Sorting',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    CustomSort: {
      CustomSorts: [
        {
          Name: 'customSort-language',
          ColumnId: 'language',
          SortedValues: ['TypeScript', 'HTML', 'JavaScript'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Custom Sort Layout',
      Layouts: [
        {
          Name: 'Custom Sort Layout',
          RowGroupedColumns: ['language'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          ColumnSorts: [
            {
              ColumnId: 'language',
              SortOrder: 'Asc',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'AG Grid Comparator Layout',
          RowGroupedColumns: ['week_issue_change'],
          ColumnSorts: [
            {
              ColumnId: 'week_issue_change',
              SortOrder: 'Asc',
            },
          ],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'Column Sort Layout',
          RowGroupedColumns: ['license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          ColumnSorts: [
            {
              ColumnId: 'license',
              SortOrder: 'Desc',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'No Sort Layout',
          RowGroupedColumns: ['license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousFiltering NextGrouped Rows

Framework: