Column Sizing

The width of the columns can be set using a given value through columnDefs or columnState (
see Column Definitions, Updating Column Definitions
and Column State). It is also
possible to let Dash AG Grid calculate the width of the columns with the columnSize property and allow the user to
resize the columns by dragging the top right portion of the column.

Sizing

Column resizing is enabled by default for all columns. To control resizing for individual columns, set the
boolean resizable property in the column definitions.

The snippet below allows all columns except Address to be resized.

columnDefs = [
    { "field": "name"},
    { "field": "age" },
    { "field": "address", "resizable": False},
]

The snippet below allows only the Address to be resized by setting resizable=False on the default column
definition and then resizable=True on the Address column.

defaultColDef = {
    "resizable": False,
}
columnDefs = [
    { "field": "name" },
    { "field": "age" },
    { "field": "address", "resizable": True },
]

columnSize property

To set the column size, use the columnSize property, along with columnSizeOptions to customize the columnSize
operation.

Note that columnSize and columnSizeOptions are Dash properties only. You won’t find these properties defined the
same way in the AG Grid documentation.

columnSize takes one of the following:

• "autoSize": changes the column sizes to fit the column’s content,
  see Autosize
  for details.
  This calls AG Grid functions autoSizeColumns or autoSizeAllColumns.
• "sizeToFit": changes the column sizes to fit the width of the grid,
  see Size to Fit and Responsive Size to Fit
  for details.
  This calls the AG Grid function sizeColumnsToFit.
• "responsiveSizeToFit": changes the column sizes to fit the width of the grid and also resizing upon grid or column
  changes,
  see Size to Fit and Responsive Size to Fit
  for details.
  This calls the AG Grid function sizeColumnsToFit.
• None: bypasses the altering of the column widths.

The following example shows how to make columns adjust to fit either the screen or their contents. With each option, try
resizing the columns (by dragging the column header) and resize the browser width to see how the grid responds.

Autosize

Setting columnSize="autoSize" will auto-size all columns based on its contents. Note that, just like Excel, each
column can also be auto-resized by double-clicking the right side of the header rather than dragging it.

Autosize and Virtualisation

Notes about autosizing and Virtualisation:

• The grid works out the best width by considering the virtually rendered rows only. For example, if your grid has
  10,000 rows, but only 50 rendered due to virtualisation of rows, then only these 50 will be considered for working
  out the width to display. The rendered rows are all the rows you can see on the screen through the vertical scroll
  plus a small buffer (default buffer size is 20).
• Autosizing columns looks at the rendered cells on the screen, and works out the width based on what it sees. It
  cannot see the columns that are not rendered due to column virtualisation. Thus, it is not possible to autosize a
  column that is not visible on the screen.
• Column Virtualisation is the technique the grid uses to render large amounts of columns without degrading performance
  by only rendering columns that are visible due to the horizontal scroll positions. For example, the grid can have
  1,000 columns with only 10 rendered if the horizontal scroll is only showing 10 columns.
  To get around this, you can turn off column virtualisation, the choice is yours, whether you want column
  virtualisation working OR auto-size working using off-screen columns, by setting grid option:
  python dashGridOptions = {"suppressColumnVirtualisation": True}

Skip header on autosize

By default, the grid will also resize the column to fit the header. If you do not want the headers to be included in
the autosize calculation, set the grid option:

dashGridOptions = {"skipHeaderOnAutoSize": True}

Autosize a subset of columns

Using columnSize="autoSize", it is possible to apply the auto-size to only a subset of columns or to not take into
account the headers when calculating the column size, it is possible to use columnSizeOptions with the following
parameters:

• keys (list of strings; optional): list of column IDs to auto-size. If omitted, all columns will be auto-sized.
• skipHeader (boolean; optional): if skipHeader=True, the header won’t be included when calculating the column
  widths.

Note that Column Groups are never considered when calculating the column widths.

Size to Fit and Responsive Size to Fit

Setting columnSize="sizeToFit" makes the columns fit the width of the grid. However, unlike "responsiveSizeToFit",
this is only done once when the grid is rendered. If the browser window changes, or the user changes the column width,
the columns will not be continually resized. But it is possible to set again "sizeToFit" to recalculate the width of
the columns when needed, see
example Size to Fit Triggered by Callback Example

Setting columnSize="responsiveSizeToFit" makes the currently visible columns fit the screen. The columns will scale (
growing or shrinking) to fit the available width.

Note that when columnSize="responsiveSizeToFit", the column default widths, rather than current widths, are
used while calculating the new widths. This ensures the result is deterministic and does not depend on any Column
resizing the user may have manually done.

Skip columns on resize

For both columnSize options, if you don’t want a particular column to be included in the resize, then set the column
definition suppressSizeToFit=True. This is helpful if, for example, you want the first column to remain fixed width,
but all other columns to fill the width of the grid.

Set a minimum and maximum width on resize

It is also possible to set minimum and maximum width when calculating the column sizes using columnSizeOptions with
the following parameters:

• columnLimits (list of dicts; optional): per-column minimum and maximum width, in pixels. columnLimits is a list
  of dicts with keys:
  • key (string; optional): column ID to apply minWidth and maxWidth.
  • maxWidth (number; optional): minimum width for this column (does not override the column minimum width).
  • minWidth (number; optional): maximum width for this column (does not override the column maximum width).
• defaultMaxWidth (number; optional): default maximum width, in pixels, if not overridden by columnLimits.
• defaultMinWidth (number; optional): default minimum width, in pixels, if not overridden by columnLimits.

Example Size to Fit Using Options

This example shows how to set options with "sizeToFit", note the following:

• The athlete column has suppressSizeToFit and is not resized.
• The age column has maxWidth: 50, which takes precedence over the functions defaultMinWidth: 100
• The country column has maxWidth: 300, which takes precedence over the functions minWidth: 900 defined for the
  country column.

Example Size to Fit Triggered by Callback

This example adds a button so the user can resize the grid. Try changing a column width or the browser window then
hit the “Resize” button.

Shift Resize

If you hold the <kbd>Shift<kbd> key while dragging the resize handle, the column will take space away from the column
adjacent to it. This means the total width for all columns will be constant.

You can also change the default behavior for resizing. To have shift resizing as the default and normal resizing to
happen when the <kbd>Shift<kbd> key is pressed, set the grid option:

dashGridOptions = {"colResizeDefault": 'shift'}

Resize Groups

When you resize a group, it will distribute the extra room to all columns in the group equally. In the example below,
the groups can be resized as follows:

• The group Everything Resizes will resize all columns.
• The group Only Year Resizes will resize only year, because the other columns have resizable=False.
• The group Nothing Resizes cannot be resized at all because all the columns in the groups have resizable=False.

Column Flex

It’s often required that one or more columns fill the entire available space in the grid. For this scenario, it is
possible to use the flex parameter. Some columns could be set with a regular width parameter, while other columns
would have a flex parameter.

Flex sizing works by dividing the remaining space in the grid among all flex columns in proportion to their flex value.
For example, suppose the grid has a total width of 450px and it has three columns: the first with width: 150 the
second with flex: 1 and third with flex: 2.
The first column will be 150px wide, leaving 300px remaining. The column with flex: 2 has twice the size
with flex: 1. So final sizes will be: 150px, 100px, 200px.

The flex parameter does not work with a width parameter in the same column. If you need to provide a
minimum width for a column, you should use flex and the minWidth parameter. flex will also take maxWidth
into account.

If you manually resize a column with flex either via the API or by dragging the resize handle, flex will
automatically be disabled for that column.

In the example below, note the following:

• Column A is fixed size. You can resize it with the drag handle and the other two columns will adjust to fill the
  available space
• Column B has flex: 2, minWidth: 200 and maxWidth: 350, so it should be constrained to this max/min width.
• Column C has flex: 1 so should be half the size of column B, unless column B is being constrained by
  its minWidth/maxWidth rules, in which case it should take up the remaining available space.

This second example has flex in all columns. Try changing the browser window size and note how the proportions of the
columns
are maintained.