• Public
  • Public/Protected
  • All

The Predefined Configuration for the Layout function

Layouts are collections of Column visiblity, order and sorting.

You can also specify which Column grouping and pivoting information for the Layout.

Further AdapTable Help Resources

Demo Site | Api | Options | Layout Read Me

Layout Predefined Config Example

export default {
  Layout: {
   CurrentLayout: 'Pivoted Layout',
   Layouts: [
       Name: 'Simple Layout',
       Columns: ['country', 'currency', 'tradeId', 'notional', 'counterparty'],
       Name: 'Sorting Layout',
       ColumnWidthMap: {
         currency: 200,
         counterparty: 300,
       ColumnSorts: [
           Column: 'counterparty',
           SortOrder: 'Desc',
           Column: 'currency',
           SortOrder: 'Desc',
       Columns: ['country', 'currency', 'tradeId', 'notional', 'counterparty'],
       Name: 'Grouping Layout',
       Columns: ['country', 'currency', 'tradeId', 'notional', 'counterparty', 'InvoicedCost', 'ItemCount'],
       AggregationColumns: { InvoicedCost: 'sum', ItemCount: 'avg' },
       GroupedColumns: ['currency', 'country'],
       Name: 'Pivoted Layout',
       Columns: ['bid', 'ask', 'price', 'counterparty', 'status', 'stars'],
       RowGroupedColumns: ['currency'],
       EnablePivot: true,
       PivotColumns: ['status', 'stars'],
       AggregationColumns: {'bid':'avg', 'ask':'avg'},

} as PredefinedConfig;

In this example we have created 4 Layouts:

  • Simple Layout - a basic Layout setting column visibility and order

  • Sorting Layout - a Layout that includes 2 sort orders (and 2 columns with widths set)

  • Grouping Layout - a Layout which includes 2 grouped columns and 2 columns with aggregation set,

  • Pivoted Layout - a Layout that includes Pivot details (so that the grid will be pivoted when the Layout is selected)




Optional CurrentLayout

CurrentLayout: string

The name of the Layout which will be loaded AdapTable starts.

This will be the selected value in the Layout Toolbar and AdapTable will apply it automatically.

Make sure that the value appears in the name property of one of the Layouts that you provide

Default Value: Empty string

Optional Layouts

Layouts: Layout[]

A collection of Layout objects - which will appear in the Layout toolbar dropdown.

Default Value: Empty array

Optional Revision

Revision: number

The 'version' number of the Item.

Used for when developers want to update one section in Predefined Config while keeping others unchanged.

If the Revision number in Predefined Config is greater than the one stored in the User's state, then the section in Predefined Config will be used, and will replace the State.

If the Revision number in Predefined Config is not greater than the one stored in the User's state, then it is ignored as its already been passed into the User's state (and potentially superseded).

See Adaptable State Guide for more information.

Note: This is the only property in ConfigState - the base class for all Adaptable State objects.

Generated using TypeDoc