AdapTable Version:

Framework:

AdapTable No Code

Summary

Enables the dynamic creation of new AdapTable instances
Contains a wizard which can receive 2 types of files:
- JSON
- Excel
The new AdapTable instance is fully featured with access to AdapTable State

AdapTable No Code enables the creation of new, fully populated AdapTable and AG Grid instances purely by dragging and dropping existing JSON or Excel files.

Find Out More

AdapTable No Code is available via a dedicated Plugin

An AdapTable wizard will work out the column names and types from the uploaded file - and allow you to set filtering, sorting, and editability as required.

The wizard will also allow you to choose from more advanced options so you can create a dynamic AdapTable instance to meet your particular requirements.

Once built AdapTable will save the state as it does for developer-built instances, so that any filters, searches, reports etc that are created are available the next time that named instance is run.

Installing No Code

AdapTable No Code is installed the same as all other Plugins:

Terminal

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

Caution

If using CommonJS, then install @adaptabletools/adaptable-plugin-nocode-aggrid-cjs instead

Setting up No Code

It is trivial to set up AdapTable No Code.

All that is required is to pass in nocode() to the plugins property in Adaptable Options.

Developer Guide

Setting up No Code

plugins: [
  nocode()
],

1

Set plugins property in Adaptable Options

Provide the plugins property in Adaptable Options

2

Supply No Code plugin

Pass in nocode to plugins - no other args are required

How it Works

The process of using AdapTable No Code is very straightforward.

It is all done using a No Code Wizard which performs the following steps:

Caution

AdapTable No Code is not currently available in AdapTable Angular

receives a data source (see below for more information)
works out which columns are available - and allow users to set properties on them
offers a series of AG Grid GridOptions and AdapTable Adaptable Options properties
finally creates - and populates - a new AG Grid and AdapTable instance

Once built AdapTable will save the Adaptable State as it does for design time built instances.

This means that any filters, formats, reports etc that are created are available the next time that named instance is run.

UI Step by Step Guide

Using the AdapTable No Code Wizard

The AdapTable No Code Wizard contains just a few steps:

1

Load the Data for the Grid

AdapTable No Code allows you either to drag and drop a file into the control or to load a file.

The file can be either:

JSON
Excel
Custom Data Source - see Configuring AdapTable No Code for more details

2

Configure Columns

The AdapTable No Code Wizard will read the file that was uploaded.

It will produce a table with one row for each column in the Data Source.

Each row will contain a number of features including:

Primary Key - Whether it should be the Primary Key column (the wizard picks the first column in the file)
Included - should this column be included in the Grid's Data Source
Field - what name should the column have in AG Grid
Type - AdapTable will try to guess this from the data in the column but this can be overridden
Column Properties - a number of options for the created Column:
- Sortable
- Editable
- Resizable
- Groupable
- Filterable

3

Provide an AdaptableId and other Adaptable Options

The AdapTableId is the unique name for the instance - and will appear in the Dashboard.

It will also be used in State - and will be reloaded the next time te No Code Wizard is loaded and the same Id is provided.

Other Adaptable Options properties can also be provided.

Note

Only a small subset of available options are currently provided

Feedback

If you require a missing Adaptable Options property, please contact us

4

Configure AG Grid GridOptions

This step shows a small subset of AG Grid GridOptions properties.

Feedback

If you require a missing AG Grid GridOptions property, please contact us

5

Provide UI Elements

Configure the UI controls provided by AdapTable.

There is one tab for each of the UI elements that can be set:

Tool Panel
Status Bar

6

Set up Entitlements

Configure the required Entitlements for the AdapTable instance.

When finished click 'Finish' to complete the Wizard.

AdapTable will now load with the data provided and the columns correctly configured.

You can now use AdapTable as you would if you had configured it at design-time.

Providing Data

The data which is provided to the first step of the No Code Wizard can be in 3 forms.

Excel Spreadsheet

Any Excel spreadsheet can be provided to the No Code Wizard.

It can be loaded or dragged and dropped into the drop panel.

Hint

Make sure the Spreadsheet has Titles - as the first row of the spreadsheet will be used to create Column Headers

JSON File

A standard JSON file can also save as the data source for AdapTable No Code.

Again, the file can be loaded or dragged and dropped into the drop panel.

Custom Data Source

For more advanced scenarios, developers can provide their own First Step of the Wizard allowing the data to be sourced from anywhere.

Find Out More

See Configuring AdapTable No Code for more details on how to provide a custom data source

AdapTable No Code

Fork Fork

This example shows a basic AdapTable No Code setup
Load your own file (JSON or Excel) or use our Orders.JSON to get you started

PreviousTechnical Reference NextConfiguring No Code