Data Set Forms

Summary

Data Sets are defined in Adaptable Options
Data Set Definitions can include a Form definition to allow the Data Set to be populated based on user choice

DataSets can, optionally, include form definitions.

These allow users to further 'filter' what data will be returned by the DataSet.

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

Handling Form Submission

Unlike with other DataSets, AdapTable doesn't fire the DataSet Selected Event for DataSets that display forms.

Instead the data must be provided to AdapTable via a button provided within the form definition.

Caution

Make sure that your Form includes a button and an implementation for the onClick function

Deep Dive

Understanding DataSet Form Buttons onClick

The button's onClick function receives a DataSetFormContext object which contains a single property:

Property	Description
dataSet	The DataSet which triggered the Form
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

This object inherits from the FormContext object which also contains a single property:

Property	Description
formData	Adaptable Form Data
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Together that provides details of the DataSet which was selected, and all associated form data.

Using Data Set Forms

Fork Fork

In this example we provide 2 DataSets in the dataSets property of Data Set Options:
JavaScript
- loads Frameworks where Language is 'JavaScript'
- subscribes to DataSet Selected Event and populates AdapTable using the Grid API
- is loaded at start-up (by using the setDataSet method in DataSet API)
TypeScript
- loads Frameworks where Language is 'TypeScript'
- displays an Adaptable Form, allowing users to set additional filters
- the form contains an 'OK' button which has an onClick handler which sends data to AdapTable also using the Grid API

Expand to see the DataSet (and Form) definitions

The 2 DataSets are defined as follows (note that the 'TypeScript' DataSet includes a Form with a Button)

dataSetOptions: {
  dataSets: [
    {
      name: 'JavaScript',
      description: 'JavaScript Frameworks',
    },
    {
      name: 'TypeScript',
      description: 'TypeScript Frameworks',
      form: {
        fields: [
          {
            name: 'hasWiki',
            label: 'HasWiki',
            fieldType: 'checkbox',
            defaultValue: true,
          },
          {
            name: 'minStars',
            label: 'Minimum Stars',
            defaultValue: 10000,
            fieldType: 'number',
          },
          {
            name: 'license',
            label: 'License',
            fieldType: 'select',
            defaultValue: 'MIT License',
            options: [
              {
                label: 'MIT License',
                value: 'MIT License',
              },
              {
                label: 'BSD 3-Clause',
                value: 'BSD 3-Clause',
              },
              {
                label: 'Other',
                value: 'Other',
              },
            ],
          },
        ],
        buttons: [
          {
            label: 'OK',
            onClick: (button, context: DataSetFormContext) => {
              let tsFrameworks = rowData.filter(
                r =>
                  r['language'] === 'TypeScript' &&
                  r['license'] == context.formData?.license &&
                  r['github_stars'] > context.formData.minStars &&
                  r['has_wiki'] === context.formData.hasWiki
              );
              context.adaptableApi.gridApi.loadGridData(tsFrameworks);
            },
          },
        ],
      },
    },
  ],
},

The initial 'JavaScript' DataSet is loaded in the Adaptable Ready Event (note a small timeout is used):

setTimeout(() => {
  adaptableApi.dataSetApi.setDataSet('JavaScript');
}, 200);

The DataSetSelected Event Handler is as follows:

adaptableApi.eventApi.on('DataSetSelected', (info: DataSetSelectedInfo) => {
  if (info.dataSet != null) {
    switch (info.dataSet.name) {
      // Note we don't listen to 'TypeScript' as that is handled in the form buttons's onClick
      case 'HTML':
        let htmlFrameworks = rowData.filter(r => r['language'] === 'HTML');
        adaptableApi.gridApi.loadGridData(htmlFrameworks);
        break;

      case 'JavaScript':
        let jsFrameworks = rowData.filter(r => r['language'] === 'JavaScript');
        adaptableApi.gridApi.loadGridData(jsFrameworks);
        break;
    }
  }
});

Try It Out

Switch between the 2 DataSets to see the different data loaded
Use the Form in TypeScript to manipulate how many rows are returned to AdapTable

import {AdaptableOptions, DataSetFormContext} from '@adaptabletools/adaptable';
import {rowData} from './rowData';
import {WebFramework} from 'rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Data Set Forms',
  dataSetOptions: {
    dataSets: [
      {
        name: 'JavaScript',
        description: 'JavaScript Frameworks',
      },

      {
        name: 'TypeScript',
        description: 'TypeScript Frameworks',
        form: {
          fields: [
            {
              name: 'hasWiki',
              label: 'HasWiki',
              fieldType: 'checkbox',
              defaultValue: true,
            },
            {
              name: 'minStars',
              label: 'Minimum Stars',
              defaultValue: 10000,
              fieldType: 'number',
            },
            {
              name: 'license',
              label: 'License',
              fieldType: 'select',
              defaultValue: 'MIT License',
              options: [
                {
                  label: 'MIT License',
                  value: 'MIT License',
                },
                {
                  label: 'BSD 3-Clause',
                  value: 'BSD 3-Clause',
                },
                {
                  label: 'Other',
                  value: 'Other',
                },
              ],
            },
          ],
          buttons: [
            {
              label: 'OK',
              onClick: (button, context: DataSetFormContext) => {
                let tsFrameworks = rowData.filter(
                  r =>
                    r['language'] === 'TypeScript' &&
                    r['license'] == context.formData?.license &&
                    r['github_stars'] > context.formData.minStars &&
                    r['has_wiki'] === context.formData.hasWiki
                );
                context.adaptableApi.gridApi.loadGridData(tsFrameworks);
              },
            },
          ],
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Data Sets',
          Toolbars: ['DataSet'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['DataSet'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_wiki',
            'created_at',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousData Sets NextTechnical Reference

Framework: