Loading Grid Data

Summary

AdapTable provides a Grid API function which can be used to load and reload the Grid as required
This fully supports delayed loading (i.e. fetching data after AG Grid has initialised)

The loadGridData function in Grid API is used to provide AG Grid with a full set of row data.

Hint

This function should be used when you want to populate AG Grid programatically at run-time
This is very popular with delayed data scenarios - when the data is not available until after the Grid has loaded

AdapTable replaces all the current data in the Grid with the data provided in the function.

loadGridData

data: any[]

void

Loads AG Grid with either initial or replacement set of data

Use this function to provide AG Grid with either an initial set of Data or to replace the Data at run-time.

This function - introduced in AdapTable Version 18 - replaced previous setInitialGridData and resetGridData functions.

The function receives an array of data rows and returns void:

loadGridData(data: any[]): void;

// Provide initial set of Trades to the Grid
const trade: ITrade[] = getTradesFromServer();
adaptableApi.gridApi.loadGridData(trades);

This function triggers the Row Changed Event with a Trigger of Load.

Loading Grid Data

Fork Fork

This demo opens AG Grid and AdapTable with no data provided (a typical "Delayed Data" scenario)
Initial data (JavaScript rows) is added by clicking the Load Initial Grid Data button in the Dashboard
A replacement set of data (TypeScript rows) can be provided by clicking the Re-load Grid Data button in the Dashboard
Note: You are still able to create AdapTable objects (e.g. Format Columns) in the absence of data

Try It Out

Create a Format Column on a row (e.g. '[language]="JavaScript" ')
Load the Data by clicking the button in the Dashboard
Note that Format Column is applied to the loaded data

Caution

Only use loadGridData to replace the whole data set if it is definitely required, or there is not alternative
Because the entire data set is replaced, loadGridData will not invoke Cell or Row Flashing nor trigger Alerts

Find Out More

See Updating Grid Rows> or Updating Cells for better alternatives that update only specific cells or rows

Delaying Grid Data

All the demos in this site load the data up front as part of initialising AG Grid.

This is because they are designed to illustrate run-time features of AdapTable.

However in many advanced, real-world, scenarios lazy loading is required.

AdapTable support lazy-loading, for both Columns and row data.

Delaying Grid Data

Fork Fork

In this demo at startup no Columns or Data is provided
Clicking a button starts a process that adds all the columns and data dynamically after the grid loads and then creates and sets a Layout as follows:
- after 1 second: add the new column definitions using setAgGridColumnDefinitions in Adaptable's Grid API
- after 2 seconds: load the data using loadGridData in Adaptable's Grid API
- after 3 seconds: create and set the Grouped Layout using createAndSetLayout in Layout API
All these steps are accompanied by System Status messages

Expand to see the code

api.systemStatusApi.setWarningSystemStatus('Setting Up Columns');
// Add the Column Defs to the Columns 1 second after the Grid loads using setAgGridColumnDefinitions method in GridApi
setTimeout(() => {
  api.gridApi.setAgGridColumnDefinitions(columnDefs);
  api.systemStatusApi.setInfoSystemStatus('Loading Data');
}, 1000);

// Add data to grid after a further second using loadGridData method in GridApi
setTimeout(() => {
  api.systemStatusApi.setSuccessSystemStatus('Creating a "Grouped Layout"');
  api.gridApi.loadGridData(rowData);
}, 2000);

// After a further second create and set a new Layout
setTimeout(() => {
  const groupedLayout: Layout = {
    TableColumns: ['price', 'model', 'available', 'firstBought'],
    RowGroupedColumns: ['make'],
    Name: 'Grouped Layout',
    TableAggregationColumns: [
      {
        ColumnId: 'price',
        AggFunc: 'sum',
      },
    ],
  };
  api.layoutApi.createAndSetLayout(groupedLayout);
  api.systemStatusApi.setInfoSystemStatus(
    'All Data, Columns and Layouts Loaded'
  );
}, 3000);

import {
  AdaptableApi,
  AdaptableButton,
  AdaptableOptions,
  DashboardButtonContext,
  Layout,
} from '@adaptabletools/adaptable';
import {columnDefs} from './columnDefs';
import {Car, rowData} from './rowData';

export const adaptableOptions: AdaptableOptions<Car> = {
  primaryKey: 'model',
  adaptableId: 'Dynamic Columns',
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Add Dynamic Columns & Data',
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          const api: AdaptableApi = context.adaptableApi;

          api.systemStatusApi.setWarningSystemStatus('Setting Up Columns');
          // Add the Column Defs to the Columns 1 second after the Grid loads using setAgGridColumnDefinitions method in GridApi
          setTimeout(() => {
            api.gridApi.setAgGridColumnDefinitions(columnDefs);
            api.systemStatusApi.setInfoSystemStatus('Loading Data');
          }, 1000);

          // Add data to grid after a further second using loadGridData method in GridApi
          setTimeout(() => {
            api.systemStatusApi.setSuccessSystemStatus(
              'Creating a "Grouped Layout"'
            );
            api.gridApi.loadGridData(rowData);
          }, 2000);

          // After a further second create and set a new Layout
          setTimeout(() => {
            const groupedLayout: Layout = {
              TableColumns: ['price', 'model', 'available', 'firstBought'],
              RowGroupedColumns: ['make'],
              Name: 'Grouped Layout',
              TableAggregationColumns: [
                {
                  ColumnId: 'price',
                  AggFunc: 'sum',
                },
              ],
            };
            api.layoutApi.createAndSetLayout(groupedLayout);
            api.systemStatusApi.setInfoSystemStatus(
              'All Data, Columns and Layouts Loaded'
            );
          }, 3000);
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'warning',
        },
        disabled: () => false,
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Dashboard: {
      Tabs: [
        {
          Name: 'Messages',
          Toolbars: ['SystemStatus', 'Layout'],
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousHandling Grid Data NextManaging Rows