Row Selection in Pivot Layouts

Summary

Full Row Selection capabilities are provided in Pivot Layouts

Row Selection in Pivot Layouts is configured using the RowSelection property.

This property - also used for Table Layouts - allows for very configurable control over how rows can be selected in the Layout.

It includes creating a dedicated Selection Column with checkboxes for easy row selection.

Per-row checkbox visibility (e.g. hiding checkboxes on total / empty rows) is configured via layoutOptions.isRowSelectionCheckboxVisible — see Checkbox Visibility.

Find Out More

See Row Selection in Table Layouts for full details, together with many demos, of the selection options

Pivot Layouts: Row Selection

Fork Fork

- This example contains 2 Layouts each of which has a different values for the RowSelection object:
- Pivot Cols Layout - has "standard" row selection
- Pivot Sum Layout - has no Header Checkbox and allows row selection by clicking anywhere in the Row

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Row Selection Pivoting',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Pivot Cols Layout',
      Layouts: [
        {
          Name: 'Pivot Cols Layout',
          PivotColumns: ['license'],
          PivotGroupedColumns: ['language'],
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'count',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          ColumnSizing: {
            week_issue_change: {Width: 475},
          },
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
          },
        },
        {
          Name: 'Pivot Sum Layout',
          PivotColumns: [],
          PivotGroupedColumns: ['license'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'Total',
              AggFunc: 'sum',
            },
          ],
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: false,
            EnableClickSelection: 'enableSelection',
          },
        },
      ],
    },
  },
};

Read-only

Loading demo…

PreviousSizing Pivot Layouts NextPivot Result Columns