AdapTable Vue Example App

This is a fairly basic example of how to get started with AdapTable Vue.

AdapTable Vue is the Vue Framework version of AdapTable - the market-leading, low code AG Grid extension.

For full information on how to use AdapTable Vue see the AdapTable Documentation.

For an absolute barebones example see the Adaptable Vue Support Template

Versions and Dependencies

The demo is built using these key packages:

• Vue version 3.x
• AdapTable version 18.x
• AG Grid version 31.x

AdapTable Vue Custom Components

The main benefit of using AdapTable Vue is that it allows you to supply custom components in AdapTable in a Vue-friendly way.

For full information on how to install and use AdapTable Vue see the AdapTable Documentation.

This demo showcases 3 Vue-specific features of AdapTable:

Settings Panel

The demo illustrates how to pass custom Vue components to the Settings Panel:

const adaptableOptions: AdaptableOptions = {
  // ...
  settingsPanelOptions: {
    customSettingsPanels: [
      {
        // CUSTOM SETTINGS PANEL COMPONENT
        frameworkComponent: ({ adaptableApi }) =>
          h(CustomSettingsPanel, { adaptableApi }),
        name: "Custom Settings",
      },
    ],
  },
  // ...
};

Tool Panel

The demo illustrates how to pass custom Vue components to the Tool Panel:

const adaptableOptions: AdaptableOptions = {
  // ...
  toolPanelOptions: {
    toolPanelOrder: ["adaptable", "columns", "filters"],
    customToolPanels: [
      {
        // CUSTOM TOOLPANEL COMPONENT
        // wraps a reusable Vue component (same component is used in a custom toolbar)
        name: "CustomQuickSearch",
        title: "Custom Quick Search",
        frameworkComponent: ({ adaptableApi }) => {
          return h(CustomQuickSearch, {
            onChange: (searchText: string) => {
              adaptableApi.quickSearchApi.runQuickSearch(searchText);
            },
          });
        },
      },
    ],
  },
  // ...
};

Custom Toolbar

The demo illustrates how to pass custom Vue components to the Dashboard Toolbar:

const adaptableOptions: AdaptableOptions = {
  // ...
  dashboardOptions: {
    customToolbars: [
      {
        // CUSTOM TOOLBAR COMPONENT
        // wraps a reusable Vue component (same component is used in a custom tool panel)
        name: "CustomQuickSearch",
        title: "Custom Quick Search",
        frameworkComponent: ({ adaptableApi }) => {
          return h(CustomQuickSearch, {
            onChange: (searchText: string) => {
              adaptableApi.quickSearchApi.runQuickSearch(searchText);
            },
          });
        },
      },
    ],
  },
  // ...
};

For more information on how to use Vue Components in AdapTable see the AdapTable Documentation.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Licences

An AdapTable Licence provides access to all product features as well as quarterly updates and enhancements through the lifetime of the licence, comprehensive support, and access to all 3rd party libraries.

We can make a trial licence available for a short period of time to allow you to try out AdapTable for yourself.

Please contact sales@adaptabletools.com or read the Licence Documentation for more information.

Demo

To see AdapTable Vue in action visit Adaptable Documentation which contains a large number of small demos each showing a different feature, function or option in AdapTable Vue (using dummy data sets).

Additionally, there is a page with larger 'recipe-type' Demos at the Adaptable Tools website.

Help

Developers can learn how to access AdapTable Vue programmatically at AdapTable Documentation.

General information about Adaptable Tools is available at our Website

Support

For all support enquiries please raise a Support Ticket.