### Install AdapTable Master-Detail Plugin

Source: https://www.adaptabletools.com/docs/angular-installation

Install any required AdapTable plugins. This example shows how to add the Master-Detail plugin for AgGrid.

```bash
npm i @adaptabletools/adaptable-plugin-master-detail-aggrid
```

--------------------------------

### Full Adaptable Options Implementation

Source: https://www.adaptabletools.com/docs/handbook-alerting-forms

Complete configuration example including imports and initial state setup for the Alert Form.

```typescript
import {
  AdaptableCellChangedAlert,
  AdaptableOptions,
  CellDataChangedInfo,
  CellUpdateRequest,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Alert Form',
  notificationsOptions: {
    // this can be a number (duration in millis) or the string 'always'
    duration: 'always',
  },
  alertOptions: {
    alertForms: [
      {
        name: 'setStars',
        form: {
          fields: [
            {
              fieldType: 'number',
              label: 'Stars',
              name: 'github_stars',
            },
          ],
          buttons: [
            {
              label: 'Set',
              disabled: (_button, context) => {
                if (!context.formData?.github_stars) {
                  return true;
                }
                const value = Number(context.formData?.github_stars);
                return value <= 0 || isNaN(value);
              },
              onClick: (_button, context) => {
                if (context.alert.alertType == 'cellChanged') {
                  const cellChangedAlert =
                    context.alert as AdaptableCellChangedAlert;
                  const cellChangedInfo = cellChangedAlert.cellDataChangedInfo;
                  const cellUpdateRequest: CellUpdateRequest = {
```

--------------------------------

### Basic AdapTable React No Code Setup

Source: https://www.adaptabletools.com/docs/react-no-code

This example demonstrates a fundamental AdapTable React No Code configuration. It includes necessary imports and defines the adaptable options, such as primary key and initial layout state.

```typescript
import {WebFramework} from './rowData';
import {
  Adaptable,
  AdaptableOptions,
  AdaptablePercentageEditor,
} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Adaptable Demo',
  initialState: {
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'description',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
        },
      ],
    },
  },
};

```

--------------------------------

### Full AdaptableOptions Configuration

Source: https://www.adaptabletools.com/docs/handbook-validating-server

Complete configuration example including imports, primary key, edit options, and initial state setup.

```typescript
import {
  AdaptableOptions,
  CellDataChangedInfo,
  ServerValidationContext,
  ServerValidationResult,
} from '@adaptabletools/adaptable';
import {Car} from './rowData';

export const adaptableOptions: AdaptableOptions<Car> = {
  primaryKey: 'model',
  adaptableId: 'Server Validation',
  editOptions: {
    validateOnServer: (serverValidationContext: ServerValidationContext) => {
      return new Promise((resolve, reject) => {
        setTimeout(
          // mimic a server check
          () =>
            resolve(
              getServerEditResponse(serverValidationContext.cellDataChangedInfo)
            ),
          1000
        );
      });
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'make',
            'model',
            'price',
            'firstUsed',
            'firstBought',
            'available',
            'milesToGallon',
            'rating',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

function getServerEditResponse(
  cellDataChangedInfo: CellDataChangedInfo
): ServerValidationResult {
  if (cellDataChangedInfo.column.columnId == 'rating') {
    if (cellDataChangedInfo.newValue == 15) {
      return {
        newCellValue: cellDataChangedInfo.oldValue,
        validationMessage: 'Cannot provide Rating of 15',
        validationHeader: 'Not Allowed',
        messageType: 'Error',
      };
    } else if (cellDataChangedInfo.newValue > 20) {
      return {
        newCellValue: 20,
        validationMessage: 'Rating cannot be greater than 20',
        validationHeader: 'Too High',
        messageType: 'Warning',
      };
    } else if (cellDataChangedInfo.newValue < 10) {
      return {
        newCellValue: 10,
        validationMessage: 'Rating cannot be less than 10',
      };
    }
  }
  return {};
}
```

--------------------------------

### Install AdapTable React

Source: https://www.adaptabletools.com/docs/react-installation

Install the core package from the public npm registry.

```bash
npm install @adaptabletools/adaptable-react-aggrid
```

--------------------------------

### Install AdapTable Plugins

Source: https://www.adaptabletools.com/docs/getting-started-installation

Install specific plugins as needed, such as the Master-Detail functionality for AG Grid.

```bash
npm install @adaptabletools/adaptable-plugin-master-detail-aggrid
```

--------------------------------

### Install AdapTable interop.io Plugin

Source: https://www.adaptabletools.com/docs/integrations-interop

Use npm to install the AdapTable interop.io plugin. If using CommonJS, install the -cjs version instead.

```bash
npm install @adaptabletools/adaptable-plugin-interopio
```

--------------------------------

### Full Settings Panel Configuration Example

Source: https://www.adaptabletools.com/docs/ui-settings-panel-configuring

A comprehensive example including navigation settings and initial state configuration for the status bar, theme, and layout.

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Settings Panel Order',
  settingsPanelOptions: {
    navigation: {
      items: [
        'CalculatedColumn',
        'FormatColumn',
        '-',
        'Dashboard',
        'ToolPanel',
        '-',
        'Alert',
        'CustomSort',
        'Export',
        '-',
        'GridInfo',
        'TeamSharing',
        'Theme',
      ],
    },
  },
  initialState: {
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SettingsPanel'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'week_issue_change',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

--------------------------------

### Install AdapTable Core

Source: https://www.adaptabletools.com/docs/getting-started-installation

Install the core AdapTable package using npm.

```bash
npm install @adaptabletools/adaptable
```

--------------------------------

### Configure AdapTable with 'Clipboard' as the Only System Export Destination

Source: https://www.adaptabletools.com/docs/handbook-exporting-destinations

This example demonstrates a full AdapTable configuration where only the 'Clipboard' system export destination is enabled. It includes initial state setup for dashboards, status bars, themes, export settings, and layout.

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Configuring System Export Destinations',
  exportOptions: {
    systemExportDestinations: ['Clipboard'],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['Export'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Export'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Export: {
      CurrentReport: 'All Data',
      CurrentFormat: 'CSV',
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

```

--------------------------------

### Install AG Grid Vue and Enterprise

Source: https://www.adaptabletools.com/docs/vue-installation

Install the required AG Grid Vue3 and Enterprise packages.

```bash
npm install ag-grid-vue3 npm install ag-grid-enterprise
```

--------------------------------

### Install AdapTable Angular AgGrid Package

Source: https://www.adaptabletools.com/docs/angular-installation

Use the `npm install` command to install the main AdapTable Angular AgGrid package from npm.

```bash
npm install @adaptabletools/adaptable-angular-aggrid
```

--------------------------------

### Install AdapTable Plugin

Source: https://www.adaptabletools.com/docs/technical-reference-plugins

Use npm to install the required plugin package for your project.

```bash
npm install @adaptabletools/adaptable-plugin-master-detail
```

--------------------------------

### Full Adaptable Options Configuration

Source: https://www.adaptabletools.com/docs/handbook-validating-pre-edit

A complete example of AdaptableOptions including editability logic, styling, and initial state setup.

```typescript
import {
  AdaptableOptions,
  CellEditableContext,
  GridCell,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Editable Cells',
  editOptions: {
    isCellEditable: (cellEditableContext: CellEditableContext) => {
      const gridCell: GridCell = cellEditableContext.gridCell;
      if (!gridCell || !gridCell.column) {
        console.log('no grid cell...');
        return true;
      }
      // No row where 'Language' is 'HTML'
      if (gridCell.rowNode.data['language'] === 'HTML') {
        return false;
      }

      // Github Watchers not editable if > 1000
      if (gridCell.column.columnId === 'github_stars') {
        if (gridCell.rawValue > 20000) {
          return false;
        }
      }

      // Name not editable where Issue Change is negative
      if (
        gridCell.column.columnId === 'name' &&
        gridCell.rowNode.data['week_issue_change'] < 0
      ) {
        return false;
      }
      return cellEditableContext.defaultColDefEditableValue;
    },
  },
  userInterfaceOptions: {
    readOnlyCellStyle: {
      BorderColor: 'Brown',
      BorderRadius: 6,
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'week_issue_change',
            'github_watchers',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

--------------------------------

### ExpressionFunction Examples Property

Source: https://www.adaptabletools.com/docs/reference/expressionfunction

Include an array of example strings to demonstrate how the AdaptableQL Function can be used. These examples are valuable for user understanding.

```typescript
examples?: string[];

```

--------------------------------

### Adaptable Options Example

Source: https://www.adaptabletools.com/docs/handbook-column-filter-components

An example demonstrating the configuration of `hideQuickFilterDropdown` for boolean columns and `hideQuickFilterInput` for the 'license' column, along with other Adaptable options.

```APIDOC
## Configuration Object: AdaptableOptions

### Description
This object demonstrates a comprehensive configuration for Adaptable Tools, including filter bar behaviors, initial state, themes, and layout settings.

### Properties
- **primaryKey** (string) - The primary key for the data.
- **adaptableId** (string) - A unique identifier for the Adaptable instance.
- **filterOptions** (object) - Options related to filtering.
  - **columnFilterOptions** (object) - Options for column-specific filtering.
    - **hideQuickFilterDropdown** (function) - A function that returns true if the dropdown should be hidden for a column.
    - **hideQuickFilterInput** (function) - A function that returns true if the input should be hidden for a column.
- **initialState** (object) - The initial state of the Adaptable grid.
  - **Dashboard** (object) - Dashboard specific settings.
  - **StatusBar** (object) - Status bar configurations.
  - **Theme** (object) - Theme settings.
  - **Layout** (object) - Layout configurations, including table columns and their order.

### Request Example
```javascript
import {
  AdaptableOptions,
  AdaptableColumnContext,
} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'Filter Bar Options',
  filterOptions: {
    columnFilterOptions: {
      hideQuickFilterDropdown: (context: AdaptableColumnContext) => {
        return context.column.dataType == 'boolean';
      },
      hideQuickFilterInput: (context: AdaptableColumnContext) => {
        return context.column.columnId === 'license';
      },
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['ColumnFilter', 'SettingsPanel'],
      PinnedToolbars: ['ColumnFilter'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'ColumnFilter'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```
```

--------------------------------

### Install AdapTable No Code Plugin

Source: https://www.adaptabletools.com/docs/handbook-no-code

Use npm to install the required package for AG Grid integration.

```bash
npm install @adaptabletools/adaptable-plugin-nocode-aggrid
```

--------------------------------

### Install AdapTable Vue package

Source: https://www.adaptabletools.com/docs/vue-installation

Install the core AdapTable Vue package from the public npm registry.

```bash
npm install @adaptabletools/adaptable-vue-aggrid
```

--------------------------------

### Install AG Grid Charting

Source: https://www.adaptabletools.com/docs/angular-installation

Optionally install the AG Charts package if you plan to use AG Grid Charts or AdapTable's Sparkline Columns.

```bash
npm install ag-charts-enterprise
```

--------------------------------

### Basic AdapTable No Code Setup

Source: https://www.adaptabletools.com/docs/handbook-no-code

Use this configuration for a basic AdapTable No Code setup. It includes essential options like primary key, adaptable ID, and initial state for modules and layouts. Ensure you have the necessary imports.

```typescript
import {AdaptableOptions} from '@adaptabletools/adaptable';
import nocode from '@adaptabletools/adaptable-plugin-nocode-aggrid';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'No Code',
  plugins: [nocode()],
  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    Layout: {
      CurrentLayout: 'No Code Layout',
      Layouts: [
        {
          TableColumns: [],
          Name: 'No Code Layout',
        },
      ],
    },
  },
};

```

--------------------------------

### Install interop.io FDC3 Package via npm

Source: https://www.adaptabletools.com/docs/integrations-interop

Install the interop.io FDC3 package using npm, recommended for optimal FDC3 integration when running AdapTable within interop.io.

```bash
npm install @interopio/fdc3
```

--------------------------------

### Full AdapTable configuration with entitlements

Source: https://www.adaptabletools.com/docs/handbook-permissioning-modules

A complete example demonstrating module entitlements alongside initial state configuration.

```typescript
import {
  AdaptableModule,
  AdaptableOptions,
  EntitlementContext,
} from '@adaptabletools/adaptable';

const user = {
  id: '1',
  accessLevel: 'normal-user',
};

const isUserAdmin = (user: {id: string; accessLevel: string}) =>
  user.accessLevel === 'admin';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Function-provided Entitlements',

  entitlementOptions: {
    defaultAccessLevel: 'Hidden',
    moduleEntitlements: (entitlementContext: EntitlementContext) => {
      // check if the user has admin access
      if (isUserAdmin(user)) {
        return 'Full';
      }

      const fullModules: AdaptableModule[] = ['FormatColumn', 'CustomSort'];
      if (fullModules.includes(entitlementContext.adaptableModule)) {
        return 'Full';
      }

      const readOnlyModules: AdaptableModule[] = [
        'CellSummary',
        'Alert',
        'Dashboard',
        'ToolPanel',
        'SettingsPanel',
      ];

      if (readOnlyModules.includes(entitlementContext.adaptableModule)) {
        return 'ReadOnly';
      }

      // the rest are hidden for normal users
      return 'Hidden';
    },
  },

  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-all',
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: '[language] = "TypeScript"',
          },
          Style: {
            BackColor: '#f2f2f2',
            ForeColor: 'Brown',
          },
        },
        {
          Name: 'formatColumn-week_issue_change',
          Style: {
            ForeColor: 'Green',
          },
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Positive',
              },
            ],
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

--------------------------------

### Full AdapTable Configuration with Custom Settings Panel

Source: https://www.adaptabletools.com/docs/ui-settings-panel-custom

A comprehensive example demonstrating the integration of a custom settings panel, including navigation and initial state configuration.

```javascript
import {AdaptableOptions, CustomRenderContext} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom Settings Panel',
  settingsPanelOptions: {
    icon: 'ApplicationIcon',
    title: 'Config Viewer',
    navigation: {
      items: [
        'Application Settings',
        '-',
        'CalculatedColumn',
        'FormatColumn',
        '-',
        'Dashboard',
        'ToolPanel',
        '-',
        'Alert',
        'CustomSort',
        'Export',
        '-',
        'GridInfo',
        'TeamSharing',
        'Theme',
      ],
    },
    customSettingsPanels: [
      {
        name: 'Application Settings',
        icon: {
          //     cssProperties: {},
          src: 'https://www.pngfind.com/pngs/m/382-3828831-png-file-white-person-icons-png-transparent-png.png',
          style: {margin: '5px'},
          //  style: { color: buttonProps.color }
        },
        render: (customRenderContext: CustomRenderContext) => {
          if (customRenderContext.phase == 'onMount') {
            return `
              <h1>Application Info</h1>
              <p>Describing what the app does</p>
              <label>Number of agents: <input type="text" /></label>
            `;
          } else {
            console.log('unmount');
          }
          return null;
        },
      },
    ],
  },
  initialState: {
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SettingsPanel'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'week_issue_change',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

```

--------------------------------

### Configure Adaptable Options for Performance

Source: https://www.adaptabletools.com/docs/dev-guide-support-adaptable-performance

Set up initial Adaptable options, including primary key, ID, and layout configurations. This example demonstrates setting up column order, auto-sizing, and initial formatting rules for performance.

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Performance',
  initialState: {
    Dashboard: {
      ModuleButtons: ['CalculatedColumn', 'SettingsPanel'],
    },
    Layout: {
      CurrentLayout: 'Table Layout',
      Layouts: [
        {
          Name: 'Table Layout',
          TableColumns: [
            'prodName',
            'company',
            'price',
            'priceChange',
            'amount',
            'total_value',
            'orderDate',
            'dueDate',
            'lastName',
            'firstName',
            'origin',
            'toAddress',
            'invoiceNum',
            'accountNum',
            'department',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-total_value',
          Scope: {
            ColumnIds: ['total_value'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'GreaterThan',
                Inputs: ['80'],
              },
            ],
          },
          RowScope: {
            ExcludeSummaryRows: true,
          },
          Style: {
            BackColor: '#99ffff',
          },
        },
        {
          Name: 'style-all',
          Style: {
            FontWeight: 'Bold',
            FontStyle: 'Italic',
            ForeColor: 'Purple',
          },
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: '[prodName] = "Car" OR [prodName] = "Bike"  ',
          },
        },
        {
          Name: 'formatColumn-orderDate',
          Scope: {
            ColumnIds: ['orderDate', 'dueDate'],
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'MMM do yyyy',
            },
          },
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'priceChange',
          PercentBarStyle: {
            RangeValueType: 'Number',
            CellRanges: [
              {
                Min: 0,
                Max: 30,
                Color: '#ff0000',
              },
              {
                Min: 30,
                Max: 50,
                Color: '#ffa500',
              },
              {
                Min: 50,
                Max: 200,
                Color: '#008000',
              },
            ],
          },
        },
        {
          ColumnId: 'prodName',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Car', 'Bike'],
                },
                Style: {
                  BackColor: 'DarkBlue',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Hat', 'Shoes', 'Gloves', 'Shirt', 'Pants'],
                },
                Style: {
                  BackColor: 'Brown',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Style: {
                  BackColor: 'Purple',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Fish', 'Tuna'],
                },
              },
              {
                Style: {
                  BackColor: 'Green',

```

--------------------------------

### Implement Column Menu Reordering

Source: https://www.adaptabletools.com/docs/ui-column-menu-configuring

Full configuration example demonstrating column menu reordering and initial state setup for a web framework data grid.

```typescript
import {
  AdaptableOptions,
  CustomColumnMenuContext,
  CustomContextMenuContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Column Menu - Reordering',
  columnMenuOptions: {
    customColumnMenu: (context: CustomColumnMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableColumn,
      } = context;

      const openSettingsPanelMenuItem: any = defaultAdaptableMenuStructure.find(
        item => item !== '-' && item.name === 'settings-panel-open'
      );
      const otherAdaptableMenuItems = defaultAdaptableMenuStructure.filter(
        item => item === '-' || item.name !== 'settings-panel-open'
      );
      if (!context.isRowGroupColumn && adaptableColumn.columnId === 'name') {
        return [
          ...defaultAgGridMenuStructure,
          '-',
          openSettingsPanelMenuItem,
          '-',
          ...otherAdaptableMenuItems,
        ];
      }
      return [
        openSettingsPanelMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...otherAdaptableMenuItems,
      ];
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
            'description',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

--------------------------------

### Implement full Adaptable options with custom context menu

Source: https://www.adaptabletools.com/docs/ui-context-menu-configuring

A complete configuration example including primary key, custom context menu logic, and initial state settings.

```typescript
import {
  AdaptableOptions,
  CustomContextMenuContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Context Menu - Removing',
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      if (!context.isRowGroupColumn) {
        if (context.adaptableColumn.columnId === 'name') {
          return context.defaultAdaptableMenuItems.filter(
            item =>
              item.category === 'SettingsPanel' || item.category === 'Layout'
          );
        }
        if (context.adaptableColumn.columnId === 'github_stars') {
          return context.defaultAdaptableMenuStructure;
        }
        if (context.adaptableColumn.columnId === 'github_watchers') {
          return context.defaultAgGridMenuStructure;
        }
      }
      return [
        ...context.defaultAgGridMenuStructure,
        '-',
        ...context.defaultAdaptableMenuStructure,
      ];
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
            'description',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

--------------------------------

### Configure AdapTable Options with Initial State

Source: https://www.adaptabletools.com/docs/handbook-comments

Example of setting up the initial state within the AdapTable options object.

```javascript
              localStorage.removeItem(`DocsCommentsDemo_${user}`);
            });
            context.adaptableApi.stateApi.reloadInitialState();
          },
        },
      ],
    },
    initialState: {
      ...commonInitialState,
      ...userSpecificInitialState,
    },
  };

  return adaptableOptions;
};
```

--------------------------------

### Install ipushpull Plugin

Source: https://www.adaptabletools.com/docs/integrations-ipushpull

Use npm to install the ipushpull plugin for AdapTable. If using CommonJS, install the cjs variant instead.

```bash
npm install @adaptabletools/adaptable-plugin-ipushpull
```

```bash
npm install @adaptabletools/adaptable-plugin-ipushpull-cjs
```

--------------------------------

### Implement Full Application State Demo

Source: https://www.adaptabletools.com/docs/dev-guide-adaptable-state-custom

A complete configuration example demonstrating custom toolbar buttons, state resetting, and application data entry management.

```typescript
import {
  AdaptableApi,
  AdaptableButton,
  AdaptableOptions,
  AdaptableState,
  AdaptableStateFunctionConfig,
  ApplicationDataEntry,
  CustomToolbarButtonContext,
  DashboardButtonContext,
} from '@adaptabletools/adaptable';
import {SupabasePersistenceService} from './SupabasePersistenceService';

import {WebFramework} from './rowData';

const supabaseService = new SupabasePersistenceService();

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Application State Demo',
  adaptableStateKey: 'docs/ApplicationStateDemo',
  filterOptions: {
    columnFilterOptions: {
      showQuickFilter: false,
    },
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Reset State',
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          supabaseService.clearAdaptableState(
            context.adaptableApi.optionsApi.getAdaptableStateKey(),
            context.userName
          );
          context.adaptableApi.applicationApi.editApplicationDataEntry({
            Key: 'TimesClicked',
            Value: 0,
          });
          context.adaptableApi.stateApi.reloadInitialState();
        },
      },
    ],
    customToolbars: [
      {
        name: 'TimesClickedButton',
        toolbarButtons: [
          {
            label: 'Click Me',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              let entry: ApplicationDataEntry | undefined =
                context.adaptableApi.applicationApi.getApplicationDataEntryByKey(
                  'TimesClicked'
                );
              if (entry) {
                entry.Value = entry.Value + 1;
                context.adaptableApi.applicationApi.editApplicationDataEntry(
                  entry
                );

                context.adaptableApi.systemStatusApi.setWarningSystemStatus(
                  'Times Clicked: ' + entry.Value
                );
              }
            },
          },
        ],
      },
    ],
  },
  stateOptions: {
    loadState: (config: AdaptableStateFunctionConfig) => {
      return supabaseService.loadAdaptableState(config.adaptableStateKey);
    },
    persistState: (
      state: Partial<AdaptableState>,
      config: AdaptableStateFunctionConfig
    ) => {
      return supabaseService.persistAdaptableState(
        state,
        config.adaptableStateKey,
        config.userName
      );
    },
  },

  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['ColumnFilter', 'TimesClickedButton', 'SystemStatus'],
        },
      ],
    }
  }
}
```

--------------------------------

### Configure Initial Adaptable Options with Layouts and Metadata

Source: https://www.adaptabletools.com/docs/handbook-layouts-extending

This example sets up the initial state for Adaptable, defining multiple layouts with different column configurations, grouping, pivoting, and custom metadata.

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Layout Meta Data',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      PinnedToolbars: ['Layout'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'First Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'license',
            'language',
            'github_stars',
            'open_pr_count',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'First Layout',
          AutoSizeColumns: true,
          Metadata: 'Large',
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'open_pr_count',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'license',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Second Layout',
          RowGroupedColumns: ['language'],
          AutoSizeColumns: true,
          Metadata: 'Small',
        },
        {
          Name: 'Third Layout',
          PivotColumns: ['license'],
          PivotGroupedColumns: ['language'],
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'count',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          Metadata: 'Large',
        },
        {
          Name: 'Fourth Layout',
          PivotColumns: [],
          PivotGroupedColumns: ['license'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'Total',
              AggFunc: 'sum',
            },
          ],
          Metadata: 'Small',
        },
      ],
    },
  },
};

```

--------------------------------

### Full Adaptable Configuration

Source: https://www.adaptabletools.com/docs/ui-tutorial-editable-styles

A complete example showing the integration of edit options, UI styles, and initial state configuration.

```typescript
import {
  AdaptableOptions,
  CellEditableContext,
  GridCell,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Styling Editable Cells',
  editOptions: {
    isCellEditable: (cellEditableContext: CellEditableContext) => {
      const gridCell: GridCell = cellEditableContext.gridCell;
      if (!gridCell || !gridCell.column) {
        return false;
      }
      // Editable where 'Language' is 'HTML'
      if (gridCell.rowNode.data['language'] === 'HTML') {
        return true;
      }

      // Github Watchers editable if > 1000
      if (gridCell.column.columnId === 'github_watchers') {
        if (gridCell.rawValue > 1000) {
          return true;
        }
      }

      // Week Issue Change always Editable
      if (gridCell.column.columnId === 'week_issue_change') {
        return true;
      }

      return cellEditableContext.defaultColDefEditableValue;
    },
  },
  userInterfaceOptions: {
    editableCellStyle: {
      BorderColor: 'LightYellow',
      BorderRadius: 6,
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'week_issue_change',
            'github_watchers',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

--------------------------------

### Install Vue peer dependencies

Source: https://www.adaptabletools.com/docs/vue-installation

Ensure the required Vue peer dependencies are installed.

```bash
npm i vue
```

--------------------------------

### Full Application Icon Implementation

Source: https://www.adaptabletools.com/docs/ui-tutorial-creating-icon

A complete configuration example including notification settings, settings panel integration, and custom icon source.

```typescript
import {AdaptableOptions} from '@adaptabletools/adaptable';

import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Application Icon',
  notificationsOptions: {
    showApplicationIcon: true,
  },
  settingsPanelOptions: {
    icon: 'ApplicationIcon',
  },
  userInterfaceOptions: {
    applicationIcon: {
      src: 'https://img.icons8.com/color/100px/bungalow',
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-Info-58',
          Scope: {All: true},
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          MessageType: 'Info',
          AlertProperties: {
            DisplayNotification: true,
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

--------------------------------

### Initialize Adaptable Options with Custom Display Formats

Source: https://www.adaptabletools.com/docs/handbook-column-formatting-display-format

Sets up the primary configuration for Adaptable Tools, including initial state, theme, layout, and custom column display formats. This example demonstrates how to integrate custom formatting rules into the overall Adaptable options.

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Display Formats Precedence',
  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'created_at',
            'updated_at',
            'week_issue_change',
            'closed_pr_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'GreaterThan',
                Inputs: [1000000],
              },
            ],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              Multiplier: 0.000001,
              Suffix: 'M',
              FractionDigits: 2,
            },
          },
        },
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'GreaterThan',
                Inputs: [1000],
              },
            ],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              Multiplier: 0.001,
              Suffix: 'K',
              FractionDigits: 2,
            },
          },
        },
      ],
    },
  },
};
```

--------------------------------

### Install React Peer Dependencies

Source: https://www.adaptabletools.com/docs/react-installation

Ensure the minimum required React versions are installed.

```bash
npm i react npm i react-dom
```