Layouts

Layouts are the primary way in AdapTable to manage Columns and Column-related info.

They allow users to switch quickly between multiple, different, named, column set-ups in AG Grid.

AdapTable updates Layouts automatically in response to changes being made in AG Grid.

Layouts include multiple column-related properties including row grouping, aggregations, pinning, widths etc

By default, Layouts do not include styling or formatting information, i.e. all styles are available to all Layouts.

Table & Pivot Layouts

AdapTable provides 2 types of Layouts:

• Table Layouts - used when accessing AG Grid in "normal" column mode
• Pivot Layouts - opens AG Grid in pivot mode displaying pivot, row-grouping and aggregation columns

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Basic Layout',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      PinnedToolbars: ['Layout'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          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: 'Standard Layout',
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'license',
            'open_issues_count',
            'week_issue_change',
          ],
          TableAggregationColumns: [
            {
              ColumnId: 'open_issues_count',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'week_issue_change',
              AggFunc: 'max',
            },
          ],
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language'],
        },
        {
          Name: 'Pivot Layout',
          PivotColumns: ['license'],
          PivotGroupedColumns: ['language'],
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'count',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
        },
      ],
    },
  },
};

Layout Contents

A Layout contains a number of important column-related properties.

The contents of Table and Pivot Layouts are fairly similar, with just a few differences:

Item	Table Layout	Pivot Layout
Name	✅	✅
Table Columns	✅	❌
Pivot Columns	❌	✅
Column Visibility	✅	✅
Column Sizing	✅	✅
Column Sorts	✅	✅
Column Pinning	✅	✅
Row Groups	✅	✅
Expanded Row Group Info	✅	✅
Aggregations	✅	✅
Column Filters	✅	✅
Grid Filter	✅	✅
Expanded Column Group Info	✅	✅
Row Summaries	✅	❌
Total Rows	✅	✅
Total Columns	❌	✅
SuppressAggFuncInHeader	✅	✅
Auto Size Columns	✅	✅
Tags & MetaData	✅	✅

Extending Layouts

By default, Layouts are simply sets of column visibility, order and related column properties.

They do not include other Adaptable Objects, and everything in Adaptable State is available in all Layouts.

For some use cases this can be too restrictive - users might require some AdapTable Objects (e.g. styles, Alerts, Reports etc.) to be applicable to one Layout but not to another.

This can be accomplished via Object Tags which leverage the Tags property found in each Adaptable Object.

Using Layouts

Run-time access to Layouts is primarily available in the Layout section of the Settings Panel.

This displays a list of existing Layouts with buttons to edit, clone, share or delete each Layout.

There is also an Add button to enable run-time Users to create new Layouts via the Layout Wizard.

Special Behaviour

Because of their complexity and central importance, Layouts differ from many other AdapTable Objects in how they can be managed.

Some of the unique features of managing Layouts at run-time include:

• Cloning: Layouts can be cloned via a Clone button in each Layout; this opens the Layout Wizard with the contents cloned from the Layout but the Name of the new Layout left blank

• Suspending: Unlike with most Adaptable Objects, Layouts cannot be suspended

• Saving: Like all Adaptable Objects, Layouts save automatically when relevant changes are made in AG Grid

• Sharing: AdapTable will share Layouts using Team Sharing

• Deleting - Layouts can be deleted (if Permissions allows) but as there must always be one Layout, AdapTable will prevent the last Layout in Adaptable State being deleted

Layout Wizards

AdapTable provides Layout Wizards to help run-time users create or edit Layouts in a series of steps.

UI Entitlements

The UI Entitlements behaviour for Layouts is slightly more complicated than for other Modules, because Layouts are intrinsic to how AdapTable works. The rules are as follows:

• Full Entitlement - everything works as expected and nothing is hidden or disabled.

• ReadOnly Entitlement - existing Layouts can be selected, but Users cannot add, clone or delete them, nor edit them in Layout Wizard

• Hidden Entitlement - Layouts - and all Layout-related UI controls - are hidden from the User.

Read-Only Layouts

Like all Adaptable Objects, Layouts can be set with ReadOnly as true.

However, given the nature of Layouts this is more limited than with other objects.

Advanced Layouts

There are many advanced use cases regarding Layouts which AdapTable supports. These include:

• Programatically Updating Layouts
• Synchronising Layouts
• Manually Saving Layouts

Logging Layout Changes

AdapTable provides additional and specific logging capability for Layouts.

This logs to the console details of all changes to any Layout.

FAQ

Is there a limit on the number of Layouts allowed? No, you can create as many Layouts as you wish but you must always have at least one Layout. AdapTable will prevent you from deleting the last Layout in your state.

Can my colleague use the same Layout as me? Yes, if Team Sharing is enabled, then you can upload your Layout so that your colleague can also access it.

Does a Layout include which column(s) is currently sorted? Yes, this is included in the layout since version 16

Does a Layout include pivoting? Yes.

Can a Layout included multiple sorts? Yes.

Does a Layout include information about column widths or pinning? Yes it can - and it will be updated and saved automatically as the Layout changes.

Why do I not see all my Columns in the Aggregations or Grouping steps in the Layout Wizard? AdapTable follows the same rules as AG Grid for what can be set in the UI. This is based on the properties that have been set in the Column's definition in AG Grid GridOptions:

• The Row Groups step lists all Columns it defines as Groupable - where enableRowGroup is set to true
• The Aggregations step lists all Columns it defines as Aggregatable - where enableValue is set to true

Is every Layout editable and deletable? Yes, assuming that your Entitlements AccessLevel property for Layouts is Full.

Can I include Format Columns, Reports and other elements in my Layout? Not directly, because a Layout only includes Column-related information. But you can extend Layouts by leveraging object tags to achieve the same effect.

Why do the Columns in my Layout "jump back" after I move them? Check that the Layout is not set to ReadOnly; if it is, AdapTable tries to prevent any changes to the Layout.