AG Grid Checkbox Selection

Summary

AdapTable supports the Checkbox Selection Column provided by AG Grid
It allows for this column to be pinned (by referencing it directly in the Layout)

AG Grid provides a selection column which renders a checkbox that selects the row.

AdapTable supports this Column where necessary, e.g. allowing it to be pinned if required.

Note

AG Grid gives the selection column an autogenerated Id of ag-Grid-SelectionColumn
Use this Id in order to access the Column - e.g. for pinning (but make sure to include it in TableColumns property)

AG Grid will always place the selection column at the left side of the Grid before all other columns.

Caution

The position of the ag-Grid-SelectionColumn in TableColumns property in the Layout will be ignored by AG Grid
The selection column will always be the first to render irrespective of its position

Checkbox Selection

Fork Fork

This example has a Pinned Layout where we pin the Selection Column and the Name Column
In order to do this we have to list the Selection Column in the Layout's TableColumns and ColumnPinning properties
Note: We added a Positioned Layout which attempts to position the selection column differently, but this is ignored and it still renders as the first column

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Checkbox Selection',
  initialState: {
    Dashboard: {
      PinnedToolbars: ['Layout'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Pinned Layout',
      Layouts: [
        {
          TableColumns: [
            'ag-Grid-SelectionColumn',
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Pinned Layout',
          ColumnPinning: {
            'ag-Grid-SelectionColumn': 'left',
            name: 'left',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'ag-Grid-SelectionColumn',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Positioned Layout',
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'ag-Grid-SelectionColumn',
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language'],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousSelection Changed Events NextTechnical Reference

Framework: