React Data GridColumn Sizing

All columns can be resized by dragging the top right portion of the column.

Sizing Copy

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.

const [columnDefs, setColumnDefs] = useState([
    { field: 'name' },
    { field: 'age' },
    { field: 'address', resizable: false },
]);

<AgGridReact columnDefs={columnDefs} />

The snippet below shows how to only allow the Address column to be resized by setting resizable=false on the default column definition and then resizable=true on the Address column.

const defaultColDef = useMemo(() => { 
	return {
        resizable: false,
    };
}, []);
const [columnDefs, setColumnDefs] = useState([
    { field: 'name' },
    { field: 'age' },
    { field: 'address', resizable: true },
]);

<AgGridReact
    defaultColDef={defaultColDef}
    columnDefs={columnDefs}
/>

Column Flex Copy

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 config. Some columns could be set with a regular width config, while other columns would have a flex config.

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.

If a column has no width or flex properties set, it will default to 200px.

The example below shows flex in action. Things to note are as follows:

• 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.

Auto-Sizing Columns Copy

Columns can be auto-sized in two main ways:

1. Auto-size columns to fit grid - The columns will scale to fit the available grid width (or a provided width if desired).
2. Auto-size columns to fit cell contents - The columns will resize to fit their visible cell contents.

Auto-Size Columns to Fit Grid Copy

Columns can be resized to fit the width of the grid. The columns will scale (growing or shrinking) to fit the available width unless they have suppressSizeToFit=true. In the example below, the Athlete column will not be affected when columns are sized to fit the grid because it's setting suppressSizeToFit=true.

Provide the grid option autoSizeStrategy to size the columns to fit when the grid is loaded. This can either be set to size to the actual grid width (type = 'fitGridWidth'), or to a fixed width that is provided (type = 'fitProvidedWidth').

const autoSizeStrategy = useMemo(() => { 
	return {
        type: 'fitGridWidth',
        defaultMinWidth: 100,
        columnLimits: [
            {
                colId: 'country',
                minWidth: 900
            }
        ]
    };
}, []);

<AgGridReact autoSizeStrategy={autoSizeStrategy} />

The columns can also be sized on demand via api.sizeColumnsToFit(params).

If you don't want a particular column to be included in the auto-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 table.

The grid calculates new column widths while maintaining the ratio of the column default widths. So for example if Column A has a default size twice as wide as Column B, then after the sizing is performed, Column A will still be twice the size of Column B, assuming no column min-width or max-width constraints are violated.

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.

A parameters object can be provided with minimum and maximum widths, either for all columns or for specific columns, to further restrain the column's resulting width from that function call. These widths will not exceed the column's defined minimum and maximum widths.

Auto-Size Columns to Fit Cell Contents Copy

Columns can be resized to fit the contents of the cells. The example below demonstrates the use of autoSizeStrategy to size the columns by default. The example button can restore this sizing by using the API if the columns are first resized by dragging the resize handle.

Provide the grid option autoSizeStrategy with type = 'fitCellContents' to size the columns to fit their content when the first data is rendered in the grid.

const autoSizeStrategy = useMemo(() => { 
	return {
        type: 'fitCellContents'
    };
}, []);

<AgGridReact autoSizeStrategy={autoSizeStrategy} />

This can also be performed on demand via the following API methods:

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 auto-size calculation, set the grid property skipHeaderOnAutoSize = true, or pass skipHeader = true to the autoSizeStrategy params or the API method.

Column Groups are never considered when calculating the column widths.

Just like Excel, each column can also be auto-resized by double clicking the right side of the header rather than dragging it. When you do this, the grid will work out the best width to fit the contents of the cells in the column.

Shift Resizing Copy

If you hold the ⇧ Shift 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 behaviour for resizing. Set the grid property colResizeDefault='shift' to have shift resizing as the default and normal resizing to happen when the ⇧ Shift key is pressed.

In the example below, note the following:

• Grid property colResizeDefault='shift' so default column resizing will behave as if ⇧ Shift key is pressed.
• Holding down ⇧ Shift will then resize the normal default way.

Resizing Groups Copy

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.