Table Layouts - Column Visibility

Summary

The Table Layout supports customising Column Visibility

Any Column that is listed in the TableColumns property in the Layout will be visible in the Grid.

This means that if you wish for a Column not to be visible, simply don't include it in this array.

The Column will still be available in the Columns Tool Panel, so that it can be made visible in the Grid.

However it is possible to specify explicitly that a Column not be visible by adding it to the Layout's ColumnVisibility property.

Position

The main advantage to explicitly setting column invisibility, is position.

In other words you can set where non-visible columns will appear in the Columns Tool Panel (and, consequently, their position in the Grid when made visible).

Configuring the position of non-visible Columns is done using 2 properties in the Layout:

listing the Column (in its preferred position) in TableColumns property
adding the Column to the ColumnVisibility property

AdapTable automatically updates this property each time a Column is made invisible via the UI.

Developer Guide

Setting Column Visibility

// Make license and name Columns invisible
// They will not be visible but their order in the Columns array is maintained
const initialState: InitialState = {
 Layout: {
  CurrentLayout: 'Column Visibility Layout',
  Layouts: [
  {
    Name: 'Column Visibility Layout',
    TableColumns: ['license', 'github_watchers', 'name', 'github_stars', 'language', 'open_pr_count'],
    ColumnVisibility: {
      license: false,
      name: false,
    },
  }]
 },
};

Set Column Visibility

By default every Column listed in TableColumns property is visible in the Grid.

ColumnVisibility will make some columns hidden at start-up.

This allows you to "position" the invisible column in the correct place should the user later make it visible in the UI.

Table Layouts: Column Visibility

Fork Fork

This example also sets 2 columns (License and Github Stars) to be invisible using 2 Layouts:
- Column Visibility 1 positions them at the top of TableColumns
- Column Visibility 2 lists them further down in TableColumns
In both Layouts checking either of these Columns will make them visible - in the position they were listed in Table Columns

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts Column Visibility',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout', 'GridFilter'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},

    Layout: {
      CurrentLayout: 'Column Visibility 1',
      Layouts: [
        {
          TableColumns: [
            'github_stars',
            'license',
            'name',
            'language',
            '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',
          ],
          ColumnVisibility: {
            license: false,
            github_stars: false,
          },
          Name: 'Column Visibility 1',
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'github_stars',
            'license',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          ColumnVisibility: {
            license: false,
            github_stars: false,
          },
          Name: 'Column Visibility 2',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Always Hidden Columns

AdapTable allows for developers to set a Column to be always hidden in the UI, by leveraging Column Types.

Find Out More

See Hiding Columns in AdapTable for more details on how to achieve this, together with a demo

When a Column is set to be always hidden, it will not be:

rendered in the Grid
available in the Layout Wizard Editor
listed in the Columns Tool Panel

Caution

Hiding Columns in this way takes precedence over properties in a Layout (and in ColDefs)
Even if the Column is listed in TableColumns, it will still not be rendered if it has a type of hiddenColumn

Note

However, it is a "real" Column and therefore still available in Expressions, e.g. in Calculated Columns or Grid Filter
It is also available in the Expression Editor and Query Builder in order to use it to create these Expressions

ColDef `hide` property

The AG Grid Column Definition has a hide property which ensures a column is not rendered.

This property is ignored by AdapTable which uses the rules described above for setting column visibility.

PreviousColumn Order NextColumn Sizing

Framework: