Selecting Data Sets

Summary

The DataSet Selector provides a way to supply an entirely new Data Set to AdapTable based on user selection
They are designed for scenarios when there is too much data to send to the client at start-up
Users switch at runtime between the "data sets" provided by Developers at design-time
Data Sets can also include Form Definitions which will be displayed by AdapTable when the DataSet is selected
AdapTable re-populates AG Grid afresh after each selection

DataSets are designed to allow developers to supply large amounts of data to AdapTable, while still using AG Grid's Client Side Row Model.

Developers provide a number of different data sets for users to choose from, based on the same Column set.

Caution

Data Sets cannot be used for providing data which has non-overlapping fields
This is because the same AdapTable instance is being used, and the same AdapTable objects are available
AdapTable objects are usually column-based (e.g. Format Column, Custom Sort) requiring consistent Column sets

DataSet Selector

AdapTable displays all these DataSets in a DataSet Selector.

Hint

DataSets typically correspond to concepts that make sense to the user's business model
For instance, they can map to a Stored Procedure, or specific time periods, or a regular used category (e.g. 'book')

The DataSet Selector appears in the following places in the AdapTable UI:

DataSet Forms

DataSets can optionally include Form definitions which allow users to further 'filter' on what data will be returned.

Whenever a DataSet with a form definition is selected, AdapTable will dynamically display an Adaptable Form.

Server-Side Row Model Alternative

DataSets provide a nice alternative to using the Server-Side Row Model as it allows for data to be dynamically retrieved from the server as a response to user selection.

However there is no need to build a whole server-side searching and filtering infrastructure - when using datasets, run-time users can filter the returned data set on the client as normal.

DataSet Selected Event

Whenever a DataSet is selected, AdapTable fires the DataSet Selected Event.

The Event's Info provides details of the newly selected DataSet, allowing developers to supply the associated data as required to AdapTable.

Caution

AdapTable performs no functionality itself when a DataSet is selected
It simply fires the DataSet Selected Event and event subscribers will provide AdapTable with the relevant data

Using Data Sets

Fork Fork

In this slightly contrived example (usually the DataSets are much bigger) we provide 3 DataSets in the dataSets property of Data Set Options:
- HTML - loads Frameworks where Language is 'HTML'
- JavaScript - loads Frameworks where Language is 'JavaScript'
- TypeScript - loads Frameworks where Language is 'TypeScript'
All 3 subscribe to the DataSet Selected Event and then populate AdapTable using the loadGridData function in the Grid API

Try It Out

Switch between the DataSets to see the different data loaded

Defining Data Sets

DataSets are provided in the dataSets property of Data Set Options.

Each DataSet includes a name and description together with an optional form definition.

dataSets

DataSet[]

DataSets provided for users to select the Grid's Data Source

DataSet[]

Use this property to set which DataSets are available in AdapTable

The DataSet is defined as follows

Property	Description
description	Describes the Data Set
form	Params for Data Set popup form
info	Additional info for Data Set
name	Name of Data Set
IsReadOnly	Sets Entity to ReadOnly (overwriting a Strategy Entitlement of 'Full')

// Create 3 Data Sets - for C#, Java and JavaScript
// For JavaScript define a Form which will appear when it is selected
const adaptableOptions: AdaptableOptions = {
  dataSetOptions: {
    dataSets: [
      {
        name: 'C#',
        description: 'C# Libraries',
      },
      {
        name: 'Java',
        description: 'Java Libraries',
      },
      {
        name: 'JavaScript',
        description: 'JavaScript Libraries',
        form: {
          fields: [
            {
              name: 'users',
              label: 'No. of users',
              defaultValue: 500,
              fieldType: 'number',
            },
            {
              name: 'country',
              label: 'Country',
              defaultValue: `United States`,
              fieldType: 'text',
            },
            {
              name: 'popular',
              label: 'Popular',
              fieldType: 'checkbox',
              defaultValue: true,
            },
            {
              name: 'framework',
              label: 'Framework',
              fieldType: 'select',
              defaultValue: 'React',
              options: [
                {
                  label: 'React',
                  value: 'react',
                },
                {
                  label: 'Angular',
                  value: 'angular',
                },
                {
                  label: 'Vue',
                  value: 'vue',
                },
              ],
            },
            {
              name: 'creationDate',
              label: 'Written',
              fieldType: 'date',
              defaultValue: '2010-01-01',
            },
          ],
          buttons: [
            {
              label: 'OK',
              onClick: (button, context) => {
                console.log({button, context});
              },
            },
          ],
        },
      },
    ],
  },
};

UI Entitlements

UI Entitlements behaviour is as follows:

Full - DataSets can be selected, and all DataSet UI components are available and display normally
Hidden - No DataSet UI components are visible or available
ReadOnly - Same as for Full

FAQ

Do DataSets include parameterised queries? Yes, these were introduced in Adaptable Version 12 by allowing Adaptable Form definitions

PreviousTechnical Reference NextData Set Forms