Layout Config

The Predefined Configuration for the Layout function.

The Layout State contains a collection of Layouts and the Current Layout:

PropertyDescriptionDefault
CurrentLayoutLayout which will be loaded when AdapTable starts - must appear as Name property in a provided Layout''
LayoutsCollection of Layout objects - will appear in the Layout toolbar and Tool Panelnull

Layout Object

The full contents of the Layout object is as follows:

PropertyDescription
AggregationColumnsWhich columns will show aggregated values in grouped rows; first value in record is Column name and second is either the agg func (e.g. sum, avg etc.) or 'true' (to use default aggfunc)
AutoSaveWhether the Layout should automatically save or not - overrides autoSaveLayouts property in LayoutOptions
ColumnsWhich columns should be visible in the Layout and in which order
ColumnSortsThe Sorting which will be applied in the Layout
ColumnWidthMapSet of widths for some (or all columns)
EnablePivotWhether pivoting should be enabled in the Grid when this Layout loads
ExpandedRowGroupValuesValues of any row groups that have been opened - only used if includeExpandedRowGroups in LayoutOptions is true
NameName of Layout as will appear in Layout toolbar and tool panel
PinnedColumnsMapA set of pinned Columns
PivotColumnsList of Columns which should be pivoted when grid is in pivot mode
RowGroupedColumnsWhich columns should be row-grouped when the Layout is applied

As can be seen, there are a number of useful properties and collections including:

Columns

Which columns should be visible in the Layout and in which order.

caution

The names in this list should match those provided when the Columns were defined in the vendor grid (e.g. field in ag-Grid).

important

When the Layout is first applied, only the Columns in this array will be visible - and in the order that they are listed here.

Column Widths

ColumnWidthMap is a set of widths for some (or all columns)

The object is defined as follow:

ColumnWidthMap?: {
[columnId: string]: number;
};

To use its, simply pass the names of the Columns (without quotes) together with the widths required:

ColumnWidthMap: {
OrderId: 200,
Comments: 300,
},

Column Sorts

ColumnSorts is a collection of ColumnSort objects which define the sorting which will be applied in the Layout.

The object has 2 properties:

  • Column name
  • Sort Order (e.g. 'Asc' or 'Desc')
ColumnSorts: [
{
ColumnId: 'ShipName',
SortOrder: 'Asc',
},
{
ColumnId: 'ShipVia',
SortOrder: 'Desc'
},
],

Row Grouped Columns

List of columns which should be row-grouped when the Layout is applied.

tip

Make sure that the column names supplied are groupable according to the vendor grid you are using (e.g. enableRowGroup in ag-Grid)

Expanded Row Group Values

ExpandedRowGroupValues is a collection of values detailing which Row Groups are opened.

caution

This is only used if includeExpandedRowGroups in LayoutOptions is set to true

note

This is typically set by AdapTable at run-time, rather than provided in Predefined Config

Aggregations

Lists which columns will show aggregated values in Grouped Rows.

caution

This only applies when row grouping is enabled in the grid.

The definition is a Record which contains 2 values:

AggregationColumns?: Record<string, string | true>;
  1. The Column name

  2. Either the agg func required (e.g. sum, avg, min etc.) or *true(to use the default aggfunc)

note

The true value can only be used if an aggFunc was previously defined for the Column

AggregationColumns: {
InvoicedCost: 'sum',
ItemCount: 'avg',
OrderCost: true
},

Pivot Columns

PivotColumns is a collection of names of Columns which should be pivoted when Grid is in Pivot Mode.

caution

This will only be applied if the enablePivot property is set to true

Layout: {
CurrentLayout: 'Pivot View',
Layouts: [
{
Columns: [],
RowGroupedColumns: ['Employee'],
PivotColumns: ['ShipVia', 'ShipCountry'],
AggregationColumns: { InvoicedCost: 'sum', ItemCount: 'max' },
EnablePivot: true,
Name: 'Pivot View',
},
],
},

Pinned Columns

Defines a set of pinned columns. The definition of the PinnedColumnsMap object is:

PinnedColumnsMap?: { [columnId: string]: 'left' | 'right' };

To use provide the name of the Column (without quotes) together with the direction (of 'left' or 'right')

PinnedColumnsMap: {
OrderId: 'left',
Comments: 'right',
},

More Information