AdapTable Version:

Framework:

Table Layouts - Row Selection

Summary

Layouts include Row Selection capabilities
These include ability to set single or multi row selection and to configure row selection behaviour
Users are able to define the look and feel of the automated Row Selection Column

Layouts in AdapTable include comprehensive and configurable Row Selection capabilities.

This is done via the RowSelection property in the Layout object which allows you to set:

Mode - select only a Single Row or Multiple Rows
Whether to display a dedicated Selection Column
Option to display a Checkbox in Header of Selection Column
Position, Pinning and Size of Selection Column
Selection / deselection behaviour when clicking elsewhere in a Row
Row Grouping options (e.g. to put checkboxes in Grouped Column or dedicated Column)

AG Grid Row Selection

Prior to AdapTable 22.1, Row Selection was configured entirely using AG Grid GridOptions.

Hint

This is no longer the default behaviour, but its still possible to use GridOptions, instead of AdapTable, if required

There are 3 options when setting the value for the RowSelection property in a Layout:

Value	Description	Use `gridOptions`
`undefined`	Layout has no influence over row selection and GridOptions is used if provided	✅
`false`	No row selection in Grid for this Layout (ignoring GridOptions)	❌
`LayoutRowSelection`	Use only props in Layout's object, ignoring GridOptions	❌

Caution

Configuring Layout RowSelection (or setting it to false) fully overrides selection props provided in GridOptions

Developer Guide

Defining a Layout with Row Selection

Row Selection is defined in the Layout using the RowSelection property.

This contains a number of configurable options (see relevant sections below for full details of the available options and values).

const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'Table Layout',
    Layouts: [
    {
      Name: 'Table Layout',
      TableColumns: ['name', 'updated_at', 'language', 'open_pr_count'],
      RowGroupedColumns: ['license'],
      RowSelection: {
        Mode: 'multiRow',
        Checkboxes: true,
        HeaderCheckbox: true,
        EnableClickSelection: true,
        CheckboxInGroupColumn: false,
        GroupSelectMode: 'descendants,
      },
    }
  }]
},

Add a RowSelection property to Layout

RowSelection is of type LayoutRowSelection and contains many properties.

This replaces anything set in rowSelection prop in AG Grid GridOptions.

Set Row Selection Mode

The Mode can be either singleRow or multiRow

Provide CheckBoxes

AG Grid can display a Checkbox column seting one of 2 properties:

Checkboxes - puts a checkbox in each Row
HeaderCheckbox - renders checkbox also in Column Header

Define Click Selection Behaviour

Set whether you want to allow row selection or deselection by clicking / ctrl+clicking in Row

Define Row Grouping Behaviour

Set Row Selection when Row Grouping through 2 properties:

CheckboxInGroupColumn - checkboxes in Row Grouped or dedicated Column
GroupSelectMode - what is selected when a Group Row is checked

Deep Dive

The Layout Row Selection Object and AG Grid Equivalents

The LayoutRowSelection object is defined as follows:

Property	Description	Default
Checkboxes	Whether to display checkboxes in Selection Column	true
CheckboxInGroupColumn	Renders selection checkboxes in Auto-Group Column (if `true`) or in dedicated Selection Column (if `false`)	false
EnableClickSelection	Selection behaviour when clicking a row: 'enableSelection' \| 'enableDeselection' \| true \| false	false
GroupSelectMode	Grouping Select Mode: 'self' \| 'descendants' \| 'filteredDescendants'	'self'
HeaderCheckbox	Whether to show checkbox in Header of Selection Column Header ('multiRow' only)	true
Mode	Row Selection Mode: 'singleRow' or 'multiRow'
SelectAllMode	Select All Mode: 'all' \| 'filtered' \| 'currentPage'	'all'

The properties in the LayoutRowSelection object all have equivalents in the AG Grid rowSelection object (see AG Grid Row Selection Docs), and some properties are actual AG Grid objects:

Property	AG Grid Equivalent	Is AG Grid object
`Mode`	`mode`	❌
`Checkboxes`	`checkboxes`	❌
`CheckboxInGroupColumn`	`checkboxLocation`	❌
`GroupSelectMode`	`groupSelects`	✅
`SelectAllMode`	`selectAll`	✅
`HeaderCheckbox`	`headerCheckbox`	❌
`EnableClickSelection`	`enableClickSelection`	✅

Mode

The (mandatory) Mode property in the LayoutRowSelection object has 2 optional values:

singleRow - only one Row can be selected in the Grid at any time
multiRow - many Rows can be selected in the Grid

Table Layouts: Row Selection Mode

Fork Fork

This demo contains 2 Layouts, once which provides Single Row Selection, and the other which provides Multi Row Selection

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Row Selection Mode',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Single Row Selection',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Single Row Selection',
          RowSelection: {
            Mode: 'singleRow',
            Checkboxes: true,
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Multi Row Selection',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Row Selection Column

By default, if Row Selection is enabled, AG Grid automatically creates a dedicated Selection Column.

Note

AdapTable will include this Column in the Layout Editor to enable positioning, pinning and width (see below)

Checkboxes

This Selection Column is only created if one of 2 properties in the RowSelection object is set to true:

Property	Description	Default value
`Checkboxes`	Displays checkbox in each cell in the Column	`true`
`HeaderCheckbox`	Displays checkbox in the Column Header to facilitate Select All	`true`

Caution

If neither of these properties are set to true then no Column will be created by AG Grid
The HeaderCheckbox only appears if the Mode is set to 'multiRow'

Table Layouts: Row Selection Checkboxes

Fork Fork

This demo contains 3 Layouts each with different checkbox configurations:
- No Checkboxes - no Checkboxes in Rows but a Checkbox in the Header
- No Checkbox Header - Checkboxes in Rows but no Checkbox in the Header
- No Header or Checkboxes - the Selection Column is not created at all (as both properties are set to false)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Row Selection Checkboxes',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'No Checkboxes',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'No Checkboxes',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: false,
            HeaderCheckbox: true,
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'No Checkbox Header',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: false,
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'No Header or Checkboxes',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: false,
            HeaderCheckbox: false,
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Position

By default AG Grid will put the Selection Column at the left of the Grid as the first Column.

However it is possible to position the Selection Column anywhere in the Grid.

This is done by explicitly referencing the Column in the TableColumns property in the Layout.

Note

You need to explicitly refer to the Column by its AG Grid provided Id: ag-Grid-SelectionColumn

Table Layouts: Row Selection Position

Fork Fork

In this example the Layout has a Selection Column which is placed between Language and Github Stars Columns (instead of default position on left)

Pinning

It is also possible to pin the Row Selection Column if required.

Again, this is done by explicitly referencing the Column by its AG Grid provided Id of ag-Grid-SelectionColumn, this time in the ColumnPinning section of the Layout.

Caution

If you wish to right-pin the Selection Column, you need explicitly also to reference it in the TableColumns property

Table Layouts: Row Selection Pinning

Fork Fork

In this example there are 2 Layouts each with the Selection Column pinned - one to the left and the other to the right
The Layout in which Selection Column is right-pinned also references the column in the TableColumns property

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Row Selection Pinning',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Left Pinned Selection Column',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Left Pinned Selection Column',
          ColumnPinning: {
            'ag-Grid-SelectionColumn': 'left',
          },
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
          },
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'ag-Grid-SelectionColumn', // needs to be explicitly listed (in any position) to right-pin
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Right Pinned Selection Column',
          ColumnPinning: {
            'ag-Grid-SelectionColumn': 'right',
          },
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Sizing

It is also possible to size the Row Selection Column, by using the ColumnSizing property in the Layout.

Again, this is done by explicitly referencing the Column using the AG Grid Id of ag-Grid-SelectionColumn.

Caution

In order to size the Selection Column, you must explicitly also to reference it in the TableColumns property

Table Layouts: Row Selection Sizing

Fork Fork

In this example there are 2 Layouts each with the Selection Column sized - one using Width, and the other using Flex
Both Layouts also reference the Selection Column in the TableColumns property

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Row Selection Sizing',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Pixel Width Selection Column',
      Layouts: [
        {
          TableColumns: [
            'ag-Grid-SelectionColumn',
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Pixel Width Selection Column',
          ColumnSizing: {
            'ag-Grid-SelectionColumn': {Width: 200},
          },
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
          },
        },
        {
          TableColumns: [
            'ag-Grid-SelectionColumn',
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Flex Width Selection Column',
          ColumnSizing: {
            'ag-Grid-SelectionColumn': {Flex: 1},
          },
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Click Selection Behaviour

By default row selection is only triggered by checking / unchecking the checkbox in the Selection Column.

However it is possible to configure selection behaviour via clicking anywhere in the Row by setting the EnableClickSelection property, which can be one of 4 values:

Property Value	Behaviour
`enableSelection`	Allows selection of a Row by clicking in the row itself
`enableDeselection`	Allows deselection of a Row by CTRL-clicking in the row itself
`true`	Allows selection of a row by clicking & deselection of a row by CTRL-clicking
`false` (default value)	Prevents rows from being selected or deselected by clicking in them

Note

If the value is enableSelection, clicking in the Row will automatically deselect any currently selected Rows
This is AG Grid default behaviour (which we left unchanged - click in the checkboxes to select multiple rows)

Table Layouts: Row Selection Click Behaviour

Fork Fork

This example contains 4 Layouts each of which has a different values for the EnableClickSelection property:
- Default Click Selection - set to false so there is no in-row selection
- Full Click Selection - set to true so rows can be selected (by click) and deselected (by ctrl+click)
- Enable Selection Only - set to enableSelection so rows can be selected (by click)
- Enable Deselection Only - set to enableDeselection so rows can deselected (by ctrl+click)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Row Selection Click Behaviour',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Default Click Selection',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Default Click Selection',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
            EnableClickSelection: false, // default value
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Full Click Selection',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
            EnableClickSelection: true,
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Enable Selection Only',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
            EnableClickSelection: 'enableSelection',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Enable Deselection Only',
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
            EnableClickSelection: 'enableDeselection',
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Row Grouping

Row Selection also works fully when Row Grouping is active in the Grid.

AdapTable provides 2 useful configurable options in Layout Row Selection relating to Grouping.

Checkbox Placement

When Row Grouping, its possible to configure where the Selection checkboxes appear.

This is done via the boolean CheckboxInGroupColumn property which behaves as follows:

set to true - the Checkboxes appear in the Row Grouped Column itself
set to false - the Checkboxes appear in a dedicated Selection Column

Selection Behaviour

Additionally its possible to configure what is selected when a checkbox is clicked in a Grouped Row.

This is done via the GroupSelectMode property which has 3 possible values:

self (default value) - only the Grouped Row itself is selected
descendants - the Grouped Row and all associated leaf rows are selected
filteredDescendants - the Grouped Row and all currently filtered leaf rows are selected

Hint

Similarly, it is possible to configure the "Select All" behaviour (when clicking the Header Checkbox)
The SelectAllMode property can be set to select All Rows, Filtered Rows, or rows in the Current Page only

Table Layouts: Row Selection with Row Grouping

Fork Fork

This example contains 3 Layouts each of which shows different row grouping behaviours:
- Checkbox in Group Column - CheckboxInGroupColumn is set to true so the Checkboxes appear in the Row Grouped Columns
- Checkbox in Dedicated Selection Column - CheckboxInGroupColumn is set to false so the Checkboxes appear in the dedicated Selection Column
- All Descendants Selected - GroupSelectMode is set to descendants, so clicking a Grouped Row checks all leaf rows (its set to false in other 2 Layouts)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Row Selection Grouping Column',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Checkbox in Group Column',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Checkbox in Group Column',
          RowGroupedColumns: ['license'],
          RowGroupValues: {
            RowGroupDefaultBehavior: 'expanded',
          },
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
            CheckboxInGroupColumn: true,
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Checkbox in Dedicated Selection Column',
          RowGroupedColumns: ['license'],
          RowGroupValues: {
            RowGroupDefaultBehavior: 'expanded',
          },
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
            CheckboxInGroupColumn: false,
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'All Descendants Selected',
          RowGroupedColumns: ['license'],
          RowGroupValues: {RowGroupDefaultBehavior: 'expanded'},
          RowSelection: {
            Mode: 'multiRow',
            Checkboxes: true,
            HeaderCheckbox: true,
            CheckboxInGroupColumn: true,
            GroupSelectMode: 'descendants',
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

FAQ

Can I combine Row Selection properties in Grid Options and AdapTable Layout? No, you need to choose. If you set Row Selection in AdapTable then GridOptions will be ignored. If there is no Row Selection defined in the Layout, then the properties in Grid Options are used.

PreviousFiltering and Grouping NextTable Layouts Wizard

Framework: