AdapTable for AG Grid

import {
  AdaptableButton,
  AdaptableOptions,
  CustomColumnMenuContext,
  CustomContextMenuContext,
  CustomToolbarButtonContext,
  DashboardButtonContext,
  UserColumnMenuItem,
  UserContextMenuItem,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Intro to AdapTable',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'CustomToolbar',
        title: 'Custom',
        toolbarButtons: [
          {
            label: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              return context.adaptableApi.themeApi.getCurrentTheme() == 'light'
                ? 'Switch to Dark Theme'
                : 'Switch to Light Theme';
            },

            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.themeApi.getCurrentTheme() == 'light'
                ? context.adaptableApi.themeApi.loadDarkTheme()
                : context.adaptableApi.themeApi.loadLightTheme();
            },
            buttonStyle: {
              tone: 'accent',
              variant: 'raised',
            },
          },
        ],
      },
    ],
    customDashboardButtons: [
      {
        label: 'Current Time',
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.alertApi.showAlertInfo(
            'Current Time',
            new Date().toTimeString()
          );
        },
        buttonStyle: {
          tone: 'info',
          variant: 'text',
        },
      },
    ],
  },
  columnMenuOptions: {
    customColumnMenu: (context: CustomColumnMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      const customDashboardMenuItem: UserColumnMenuItem = {
        menuType: 'User',
        label: adaptableApi.dashboardApi.isDashboardCollapsed()
          ? 'Expand Dashboard'
          : 'Collapse Dashboard',
        onClick: () =>
          adaptableApi.dashboardApi.isDashboardCollapsed()
            ? adaptableApi.dashboardApi.expandDashboard()
            : adaptableApi.dashboardApi.collapseDashboard(),
      };

      return [
        customDashboardMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      const customDashboardMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label: adaptableApi.dashboardApi.isDashboardCollapsed()
          ? 'Expand Dashboard'
          : 'Collapse Dashboard',
        onClick: () =>
          adaptableApi.dashboardApi.isDashboardCollapsed()
            ? adaptableApi.dashboardApi.expandDashboard()
            : adaptableApi.dashboardApi.collapseDashboard(),
      };

      return [
        customDashboardMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          // Surface the user-defined CustomToolbar on the default tab so
          // the demo shows off a custom toolbar without the user having
          // to click around.
          Toolbars: ['Export', 'GridFilter', 'CustomToolbar'],
        },
        {
          Name: 'Notifications',
          Toolbars: ['Alert', 'SystemStatus'],
        },
      ],
      ModuleButtons: [
        'FormatColumn',
        'DataChangeHistory',
        'CalculatedColumn',
        'Shortcut',
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'ColumnFilter'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Export: {
      CurrentReport: 'Popular Frameworks',
      CurrentFormat: 'JSON',
      Reports: [
        {
          ReportColumnScope: 'ScopeColumns',
          ReportRowScope: 'ExpressionRows',
          Scope: {ColumnIds: ['name', 'language']},
          Query: {BooleanExpression: '[github_stars] > 50000 '},
          Name: 'Popular Frameworks',
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Sorted Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'rating',
            'license',
            'week_issue_change',
            'created_at',
            'github_watchers',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          Name: 'Sorted Layout',
          ColumnSorts: [
            {
              ColumnId: 'license',
              SortOrder: 'Asc',
            },
            {
              ColumnId: 'name',
              SortOrder: 'Desc',
            },
          ],
          // Filter the grid to a focused set (~21 rows) so the column
          // formatting / styled columns are immediately legible without
          // scrolling. Bind any other expression in the Grid Filter
          // toolbar to refine further.
          GridFilter: {
            Expression: '[github_stars] > 10000',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'rating',
            'license',
            'open_issues_count',
            'closed_issues_count',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Grouping Layout',
          RowGroupedColumns: ['language', 'license'],
          TableAggregationColumns: [
            {
              ColumnId: 'open_issues_count',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'closed_issues_count',
              AggFunc: 'max',
            },
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    // Two column-scoped format columns add live styling on the column the
    // user is looking at, paired with display formats so the raw numbers
    // read more naturally. These deliberately target columns (rather than
    // whole rows) so the table content stays the focal point.
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'name-upper',
          Scope: {ColumnIds: ['name']},
          DisplayFormat: {
            Formatter: 'StringFormatter',
            Options: {Case: 'Upper', Trim: false},
          },
        },
        {
          Name: 'created-at-pattern',
          Scope: {ColumnIds: ['created_at']},
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {Pattern: 'yyyy/MM/dd'},
          },
        },
        {
          Name: 'github-stars-thousands',
          Scope: {ColumnIds: ['github_stars']},
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {IntegerSeparator: ','},
          },
        },
        {
          Name: 'github-stars-highlight',
          Scope: {ColumnIds: ['github_stars']},
          Rule: {BooleanExpression: '[github_stars] > 100000'},
          Style: {
            FontWeight: 'Bold',
            ForeColor: 'var(--ab-color-accent)',
          },
        },
        {
          Name: 'week-issue-change-parens',
          Scope: {ColumnIds: ['week_issue_change']},
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {Parentheses: true},
          },
        },
        {
          Name: 'week-issue-change-positive',
          Scope: {ColumnIds: ['week_issue_change']},
          Rule: {BooleanExpression: '[week_issue_change] > 0'},
          Style: {
            ForeColor: 'var(--ab-color-success)',
            FontWeight: 'Bold',
          },
        },
        {
          Name: 'week-issue-change-negative',
          Scope: {ColumnIds: ['week_issue_change']},
          Rule: {BooleanExpression: '[week_issue_change] < 0'},
          Style: {
            ForeColor: 'var(--ab-color-destructive)',
            FontWeight: 'Bold',
          },
        },
      ],
    },
    // Two styled columns: language is rendered as a coloured pill that
    // makes the stack instantly scannable; rating turns the new 1–5
    // number into a row of stars.
    StyledColumn: {
      StyledColumns: [
        {
          Name: 'Language Badge',
          ColumnId: 'language',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {PredicateId: 'Is', Inputs: ['JavaScript']},
                PillStyle: {BackColor: '#f7df1e', ForeColor: '#1a1a1a'},
              },
              {
                Predicate: {PredicateId: 'Is', Inputs: ['TypeScript']},
                PillStyle: {BackColor: '#3178c6', ForeColor: '#ffffff'},
              },
              {
                Predicate: {PredicateId: 'Is', Inputs: ['HTML']},
                PillStyle: {BackColor: '#e34c26', ForeColor: '#ffffff'},
              },
            ],
          },
        },
        {
          Name: 'Rating',
          ColumnId: 'rating',
          RatingStyle: {
            Icon: 'Star',
            Max: 5,
            Size: 14,
            Gap: 2,
            AllowHalf: true,
            ShowValue: false,
          },
        },
      ],
    },
  },
};