AdapTable for AG Grid - The Basics

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: 'ButtonToolbar',
        title: 'Buttons',
        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',
            },
          },
          {
            label: 'Show Current Time',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.alertApi.showAlertInfo(
                'Current Time',
                new Date().toTimeString()
              );
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
        ],
      },
      {
        name: 'BespokeRenderingToolbar',
        title: 'Bespoke Rendering',
        render: customRenderContext => {
          if (customRenderContext.phase === 'onMount') {
            return `
              <label>Number of agents: <input type="text" /></label>
            `;
          }
          return null;
        },
      },
    ],
    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',
          Toolbars: ['Export', 'GridFilter'],
        },
        {
          Name: 'Notifications',
          Toolbars: ['Alert', 'SystemStatus'],
        },
        {
          Name: 'Custom Tab',
          Toolbars: ['ButtonToolbar', 'BespokeRenderingToolbar'],
        },
      ],
      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',
            '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: 'Sorted Layout',
          ColumnSorts: [
            {
              ColumnId: 'license',
              SortOrder: 'Asc',
            },
            {
              ColumnId: 'name',
              SortOrder: 'Desc',
            },
          ],
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            '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,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'style-all',
          Scope: {
            All: true,
          },
          Rule: {BooleanExpression: '[github_stars] > 50000 '},
          Style: {
            ForeColor: 'brown',
            BackColor: 'yellow',
          },
        },
        {
          Name: 'formatColumn-name',
          Scope: {
            ColumnIds: ['name'],
          },
          DisplayFormat: {
            Formatter: 'StringFormatter',
            Options: {
              Case: 'Upper',
              Trim: false,
            },
          },
        },
        {
          Name: 'formatColumn-open-total-issue-ratio',
          Scope: {
            ColumnIds: ['open-total-issue-ratio'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              FractionDigits: 2,
              Suffix: '%',
              Multiplier: 100,
            },
          },
        },
        {
          Name: 'formatColumn-created_at',
          Scope: {
            ColumnIds: ['created_at'],
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'yyyy/MM/dd',
            },
          },
        },
      ],
    },
  },
};