Table Layouts

Table Layouts - Column Sizing

Summary

  • The Table Layout supports providing bespoke Column Widths
  • There is also an option to autosize all Columns in the Layout

AdapTable allows developers to set (and run-time users to update) the size of AG Grid Columns.

There are 3 main ways that Columns can be sized in AdapTable:

  • setting width and / or flex properties in the AdapTable Layout (using the ColumnSizing object)
  • setting the AutoSizeColumns property to true in the AdapTable Layout
  • providing the column sizing in the AG Grid ColumnDef (or DefaultColumnDef)

Column Sizing Precedence

AdapTable provides a set of precedence rules for evaluating each Column's size as follows:

  1. ColumnSizing in Layout

If ColumnSizing has been provided for a Column in the Layout, then that is used. Any sizing set in AG Grid ColumnDefs for that Column is ignored, as is the Layout's AutoSizeColumns property

Note

This rule applies to all 4 properties in the Layout's ColumnSizing object: Width, Flex MinWidth and MaxWidth

  1. AutoSizing in Layout

If no ColumnSizing has been provided for any column, but AutoSizeColumns is set to true, then all Columns are auto-sized, and any sizing set in any ColumnDefs is ignored

  1. AG Grid ColumnDefs

If no ColumnSizing has been provided for a Column in the Layout (and AutoSizeColumns is not true), AdapTable will size the Column using any sizing (width or flex) set in ColumnDefs (either in the Column directly or in defaultColumnDef)

Column Sizing in Layout

Layout Column Sizing is configured using the ColumnSizing property.

Deep Dive

Understanding the Column Sizing Objects

This allows you set the width (or flex) for each Column in the Layout.

Additionally you can set the Minumum Width, Maximum Width and Resizability of each Column.

Caution

  • One of Width or Flex must be set (but not both); all other properties are optional
  • Column Sizing defined in a Layout take precedence over any sizing explicitly set in columnDefs in GridOptions

Once the Layout is rendered, AdapTable automatically updates widths in the ColumnSizing property, when run time users resize columns manually in the Grid.

Developer Guide

Defining a Layout with Column Sizing

// Set sizing for 4 Columns in Layout: 
// Use Width for 2 Columns (name, license)
// Use Flex for other 2 Columns (updated_at, language)
// Turn off Resizability for Name and Language columns
const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'Table Layout',
    Layouts: [
    {
      Name: 'Table Layout',
      TableColumns: ['name', 'license', 'updated_at', 'language', 'open_pr_count'],
      ColumnSizing: {
        name: { 
          Width: 150,
          Resizability: false,
        }, 
        license: { 
          Width: 200, 
          MinWidth: 100, 
          MaxWidth: 300 
        }, 
        updated_at: { 
          Flex: 5,
        }, 
        language: { 
          Flex: 10, 
          Resizability: false
        }, 
    },
    }]
 },
};
1
Define Column Widths (including Min and Max)

Layouts can include details of initial Column Widths.

These will be overridden by changes made in AG Grid UI.

This is provided in the form of map with 2 properties:

  • ColumnId
  • ColumnSizingDefinition containing a Width property which provides the width of the column in pixels
2
Define Column Min and Max Widths

The ColumnSizingDefinition can also be used to configure MinWidth and MaxWidth if required.

3
Define Column Flex

As an alternative to setting Widths ColumnSizingDefinition can also be used to set the Flex for a Column.

One of Width or Flex must be set for each column listed.

4
Set Column Resizability

All columns are, by default, resizable.

But this can be set to false using the Resizable property.

Hint

  • Run time users can update this property by using the Table Layout UI Wizard
  • Click the expander next to any Column in the Columns step in order to set the width for that Column
Table Layouts: Column Sizing
Fork
  • This example contains 3 Layouts that each provide different custom column sizing:
    • Column Widths Layout - the Name, Language and Topics columns have all been given bespoke widths
    • Column Flex Layout - the Name, Language and Topics columns have all been given bespoke flex values
    • Column AutoSize Layout - all (visible) columns are auto-sized

Auto Sizing in Layout

As an alternative to defining specific Columns Widths, a Layout can have all columns set to be auto sized.

The AutoSizeColumns property in the Layout object (available for both Pivot and Table Layouts) auto sizes the Layout the first time that it loads.

Note

  • AutoSizeColumns works by leveraging AG Grid's own autosizing functionality
  • This means that if suppressColumnVirtualisation is set to true in GridOptions, only visible columns are auto sized

It sets each Column's width based on its contents, and saves it to the ColumnSizing property (see above).

Caution

  • ColumnSizing has precedence - if that is set for any Column, then AutoSizeColumns is ignored completely
  • AutoSizing requires the ColumnAutoSizeModule AG Grid Module is present
Developer Guide

Defining a Layout with Autosized Columns

// Create a Layout with AutoSized Columns
const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'AutoSized Layout',
    Layouts: [
    {
      Name: 'AutoSized Layout',
      TableColumns: ['name', 'license', 'github_stars', 'language', 'open_pr_count'],
      AutoSizeColumns: true,
    }
  ]
 },
};
1
Set Layout Columns to Autosize

AdapTable provides an option to autosize all Columns in the Layout.

This leverages the AG Grid autosizing functionality.

AG Grid Column Defs

Each Column in AG Grid Column Defs has width, flex, minWidth, maxWidth and initialWidth properties.

This properties will be used by AdapTable to set Column Sizing, but only if the property is not overrien in Layout ColumnSizing (and if Layout AutoSizeColumns is not true).

Caution

  • Usually ColDef properties which set values are ignored in favour of AdapTable Layout equivalents (even if not set)
  • However this is an exception to that rule, and the properties are applied if not explicitly overridden in a Layout
Table Layouts: ColDef Widths
Fork
  • This example contains a Layout where no custom sizing has been set (i.e. neither ColumnSizing nor AutoSizeColumns are provided)
  • However the Name and Language columns display the bespoke widths they were given in AG Grid ColumnDefs

Autogenerated Columns

AdapTable supports custom sizing of Columns automatically created by AG Grid.

This is typically done by adding the autogenerated ColumnId to the ColumnSizing property in the Layout.

Find Out More

PreviousColumn VisibilityNextColumn Pinning