React Data Grid

Column Sizing

react logo

All columns can be resized 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.

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

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.

The flex config does not work with a width config in the same column. If you need to provide a minimum width for a column, you should use flex and the minWidth config. 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.

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

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

Columns can be resized to fit the width of the grid. The columns will scale (growing or shrinking) to fit the available width.

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 = {
    type: 'fitGridWidth',
    defaultMinWidth: 100,
    columnLimits: [
        {
            colId: 'country',
            minWidth: 900
        }
    ]
};

<AgGridReact autoSizeStrategy={autoSizeStrategy} />