Updating Layouts

Summary

The updateCurrentLayout function in Layout Api allows developers easily to update a Layout programatically

Updating a Layout programatically is one of the most frequent run-time actions.

For this reason, AdapTable provides the useful updateCurrentLayout function in Layout API.

It allows developers to pass in just the partial set of props that should be updated for the Current Layout (and the function returns the updated Layout object).

Note

This function is available for both Table Layouts and Pivot Layouts

updateCurrentLayout

updateFn

TableLayout | PivotLayout

Enable updating a partial set of properties in a Layout

This function allows developers to provide just those properties in the Current Layout which they wish to change.

It is defined as follows:

 updateCurrentLayout(
    updateFn: (layout: TableLayout | PivotLayout) => TableLayout | PivotLayout
  ): void;

Hint

The layout object with which the function is called, is a deep clone of the current Layout
This allows you to mutate it as required to match your specific needs

To mutate a Table Layout:

adaptableApi.layoutApi.updateCurrentLayout(
  (layout) => {
    layout.TableColumns = ['name', 'github_stars', 'github_watchers', 'has_projects']);
    layout.TableAggregationColumns = [
      {
        ColumnId: 'github_stars',
        AggFunc: 'sum',
      },
      {
        ColumnId: 'github_watchers',
        AggFunc: true,
      },
    ]
    layout.ColumnSizing = {
      name: { Width: 500 },
    };
    layout.RowGroupedColumns = ['language', 'license'];   
    return layout;
  }
);

To mutate a Pivot Layout:

adaptableApi.layoutApi.updateCurrentLayout(layout => {
  layout.PivotColumns = ['language'];
  layout.GridFilter = {
    Expression: '[language]="JavaScript" ',
  };
  return layout;
});

Updating Layouts Programatically

Fork Fork

This demo illustrates how to use updateCurrentLayout function
The Update Layout custom Dashboard button will, when clicked, change the Layout to show changes to grouping, aggregations, column visibility, widths and filters etc.

Try It Out

Switch to the Pivot Layout and update that one programatically also (by clicking the same Update Layout custom Dashboard button)

import {
  AdaptableButton,
  AdaptableOptions,
  ApplicationDataEntry,
  CustomToolbarButtonContext,
  DashboardButtonContext,
  TableLayout,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'tradeId',
  userName: 'Demo User',
  adaptableId: 'Updating Layouts',
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Update Layout',
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          if (context.adaptableApi.layoutApi.isCurrentLayoutPivot()) {
            context.adaptableApi.layoutApi.updateCurrentLayout(layout => {
              layout.PivotColumns = ['language'];
              layout.GridFilter = {
                Expression: '[language]="JavaScript" ',
              };
              return layout;
            });
          } else {
            context.adaptableApi.layoutApi.updateCurrentLayout(layout => {
              layout.TableColumns = [
                'name',
                'github_stars',
                'github_watchers',
                'open_issues_count',
                'closed_issues_count',
                'open_pr_count',
                'closed_pr_count',
                'has_projects',
                'has_pages',
                'week_issue_change',
              ];
              layout.TableAggregationColumns = [
                {
                  ColumnId: 'github_stars',
                  AggFunc: 'sum',
                },
              ];
              layout.ColumnSizing = {
                name: {Width: 400},
              };
              ((layout.ColumnFilters = [
                {
                  ColumnId: 'github_stars',
                  Predicates: [
                    {
                      PredicateId: 'GreaterThan',
                      Inputs: [50000],
                    },
                  ],
                },
              ]),
                (layout.RowGroupedColumns = ['language', 'license']));
              return layout;
            });
          }
        },
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Dashboard: {
      PinnedToolbars: ['Layout'],
    },
    Layout: {
      CurrentLayout: 'Table Layout',
      Layouts: [
        {
          Name: 'Table Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            '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: 'Pivot Layout',
          PivotColumns: [],
          PivotGroupedColumns: ['license'],
          PivotAggregationColumns: [
            {ColumnId: 'github_watchers', AggFunc: 'count'},
            {ColumnId: 'github_stars', AggFunc: 'sum'},
          ],
        },
      ],
    },
  },
};

PreviousGuide to Layouts NextSaving Layouts

Framework: