AdapTable Version:

Framework:

Integrating AdapTable Vue

Summary

To use AdapTable Vue, you need to:
- Import { Adaptable } from @adaptabletools/adaptable-vu3-aggrid
- Provide and configure 3 Vue components: AdaptableProvider, AdaptableUI and AdaptableAgGridVue

Creating applications that use AdapTable Vue 20 is straightforward.

Vue Components

There are 3 key Vue components that need to be provided:

AdaptableProvider - manages Adaptable State and orchestrates the AdapTable and AG Grid components
AdaptableUI - renders AdapTable's UI Components including the Dashboard
AdaptableAgGridVue - thin AdapTable wrapper around the AG Grid Vue component

Developer Guide

Defining the 3 Vue Components

<script setup>
import {
  AdaptableProvider,
  AdaptableUI,
  AdaptableAgGridVue,
} from '@adaptabletools/adaptable-vue3-aggrid';
</script>

Import AdapTable Components

Install 3 AdapTable Components:

AdaptableProvider
AdaptableUI
AdaptableAgGridVue

// Import AG Grid Enterprise Modules
import { Module, AllEnterpriseModule } from 'ag-grid-enterprise';

// Create Modules array (to be passed later to Adaptable Initializer)
export const agGridModules: Module[] = [AllEnterpriseModule];

Either: Import and Define AG Grid Enterprise Modules

Import the AG Grid Enterprise Modules.

Import them into your application and place in an array.

This will be passed to <Adaptable.Provider /> component in Step 6.

// Import AG Grid Enterprise Modules
import { Module, AllEnterpriseModule } from 'ag-grid-enterprise';

// Import AG Grid Charts
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';

// Provide both in the Modules array
export const agGridModules: Module[] = [AllEnterpriseModule.with(AgChartsEnterpriseModule)];

Or: Import and Define AG Grid Enterprise Modules with Charts

Import the AG Grid Enterprise Modules including Charts.

Do this if using AG Grid Charts or AdapTable Sparkline Columns.

Import them into your application and place in an array.

This will be passed to <Adaptable.Provider /> component in Step 6.

// Import AG Grid Modules
import { 
  Module, 
  ClientSideRowModelModule, 
  CsvExportModule, 
  ExcelExportModule, 
  MasterDetailModule 
} from 'ag-grid-enterprise';

// Create Modules array (passed later to Adaptable Initializer)
export const agGridModules: Module[] = [ 
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  MasterDetailModule
  // and many more...
];

Or: Import and Define the required subset of AG Grid Modules

Another alternative is to import just the subset of AG Grid Modules that you need to use in your application (given your feature set).

Find Out More

The AG Grid Modules Reference contains the minimum list of AG Grid Modules required by AdapTable (and those needed by key features)

const gridOptions: GridOptions = {
  theme: themeQuartz,
  columnDefs: [
    {headerName: 'Make', field: 'make', filter: true, cellDataType: 'text'},
    {headerName: 'Model', field: 'model', editable: true, cellDataType: 'text'},
  ],
  rowData: [
    {make: 'Toyota', model: 'Yaris', price: 40000},
    {make: 'Toyota', model: 'Corolla', price: 28000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
  ],
  cellSelection: true,
  sideBar: true,
  suppressAggFuncInHeader: true,
  suppressMenuHide: true,
};

Create an AG Grid GridOptions object

Define and populate a standard AG Grid GridOptions object.

Provide all required AG Grid related information including:

AG Grid theme
column schema (including correct dell data types)
initial data (if not lazy loading)
AG Grid events
additional, required properties

Caution

Always set the appropriate cellDataType property in ColumnDefs for every Column, to enable AdapTable to use the correct Filters and related properties
Many ColDef properties are ignored by AdapTable and replaced by Layout props - see full details in Guide to Layouts and ColDefs

import {
  AdaptableProvider,
  AdaptableUI,
  AdaptableAgGridVue,

  type AdaptableOptions,
  type AdaptableApi,
  type InitialState,
  type AdaptableColumn,
} from '@adaptabletools/adaptable-vue-aggrid';

Import AdapTable's types

Import AdaptableUI, AdaptableProvider, AdaptableAgGridVue and other AdapTable Types from @adaptabletools/adaptable-vue-aggrid (e.g. AdaptableApi, AdaptableOptions, InitialState etc.)

import "@adaptabletools/adaptable-vue-aggrid/index.css";
// if using dark theme then also import
import "@adaptabletools/adaptable-vue-aggrid/themes/dark.css";

Import AdapTable Styles

Import index.css which contains core styles

If using dark Theme, then import dark.css also

Find Out More

See AdapTable Theming Guide for full details on choosing Themes or creating Custom ones

const initialState: InitialState = {
  Dashboard: {
    PinnedToolbars: ['Layout', 'Pricing'],
  },
  Layout: {
    CurrentLayout: 'Cars',
    Layouts: [
      {
        TableColumns: ['Model', 'Price', 'Make'],
        RowGroupedColumns: ['Make'],
        Name: 'Cars',
      },
    ],
  },
  CustomSort: {
    CustomSorts: [{Name: 'CustomSort-Rating', ColumnId: 'Rating', SortedValues: ['AAA', 'AA+']}],
  },
} as InitialState;

Supply Initial Adaptable State

Add the Initial Adaptable State that is required to ship AdapTable with the objects you require for initial use.

This will later get merged into Adaptable State, together with any changes made by the run-time user.

It must include a Layouts section, containing at least one Layout.

In this example we do the following:

Add 2 Pinned Toolbars to the Dashboard: Layout and Export
Created a Layout called Cars with 3 columns and Row Grouping for the Make column
Set a Custom Sort for the 'Rating' Column so it will sort more intuitively for the users

const adaptableOptions: AdaptableOptions = {
  licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
  primaryKey: 'model',
  userName: 'Demo User',
  adaptableId: 'Basic Setup',
  filterOptions:{
    columnFilterOptions: {
      manuallyApplyColumnFilter: true,
    },
  },
  initialState: initialState,
  plugins: [nocode()],
  stateOptions:{
    persisteState:{}, // persist State remotely
    loadState:{} // load remotely persisted State
  }
};

Create an Adaptable Options object

Adaptable Options defines exactly how AdapTable should work. You should populate this object with:

a Primary Key by defining a Unique Column
an AdaptableId which will uniquely identify the Grid
License Key given when purchasing AdapTable
a User Name to identify the current user
implementations of State Options functions to persist (and reload) Adaptable State remotely
the initialState created in Step 6
any Plugins required (in this example No Code Plugin)
any of the other many properties and objects available (where the default values are not appropriate)
any Entitlements (Permissions) required for the User

Hint

Adaptable Options supports Typescript Generics which ensures a better developer experience by providing the row data type

Important

If the licenseKey property is not present, AdapTable will display a watermark and run with reduced functionality

<AdaptableProvider
  :gridOptions="gridOptions"
  :modules="agGridModules"
  :adaptableOptions="adaptableOptions"
>
  <!-- Children / content projection go here -->
</AdaptableProvider>

Render the AdaptableProvider Component

Render the AdaptableProvider component in your application.

Provide these 3 mandatory props:

gridOptions - GridOptions object created in Step 3
modules - AG Grid Modules array created in Step 2
adaptableOptions - the AdapTableOptions created in Step 7

<AdaptableProvider
  :gridOptions="gridOptions"
  :modules="agGridModules"
  :adaptableOptions={adaptableOptions}
  @onAdaptableReady="
    ({ adaptableApi, agGridApi }: AdaptableReadyInfo) => {
      adaptableApi.quickSearchApi.runQuickSearch('toy');
      agGridApi.autoSizeAllColumns();
    }
  "
>
  <!-- Children / content projection go here -->
</AdaptableProvider>

Subscribe to Adaptable Ready Event (optional)

Add an optional listener to Adaptable Ready Event in the AdaptableProvider component.

This Event is fired when AdapTable is initialised, and should be used to perform any setup related actions required.

The AdaptableReadyInfo object provided by the Event, contains two key objects:

adaptableApi which gives access to the Adaptable API
agGridApi which gives access to AG Grid's Api

<template>
  <AdaptableProvider
    style={{flex: 'none'}}
    gridOptions={gridOptions}
    modules={agGridModules}
    adaptableOptions={adaptableOptions}
  >
    <AdaptableUI class="adaptable-custom-class" />
  </AdaptableProvider>
</template>

Render the AdaptableUI Component

Render the <AdaptableUI /> component inside the <AdaptableProvider />.

This provides access to AdapTable's UI, notably the Dashboard

<template>
  <AdaptableProvider
    :gridOptions="gridOptions"
    :modules="agGridModules"
    :adaptableOptions="adaptableOptions"
  >
    <AdaptableUI />
    <!-- AG Grid props - but NOT gridOptions or modules -->
    <AdaptableAgGridVue style="flex: 1" />
  </AdaptableProvider>
</template>

Render the AdaptableAgGridVue Component

Render the AdaptableAgGridVue component inside the <AdaptableProvider />.

Set other properties as required (e.g. AG Grid theme)

Caution

Ensure you render the <AdaptableAgGridVue /> compoonent - and not the <AgGridVue /> component directly
AdaptableAgGridVue should not receive a gridOptions prop; instead pass this directly to AdaptableProvider component

Find Out More

See the Integration section in Getting Started for related articles on:

PreviousInstallation NextDemo Apps

Framework: