React Data Grid Column width
By default, the column width adjusts to the width of the content. However, if the width of the content is less than
1px for borders on the sides, the column width remains constant at
50px. The column size can be passed as a constant, an array, or a function.
The content inside a cell will be wrapped if it doesn't fit the cell's width.
Setting the column width as a constant
In this example we set the same width of
100px for all columns across the entire grid.
Setting the column width in an array
In this example, the width is only set for the first four columns. Each additional column would automatically adjust to the content.
Setting the column width using a function
In this example, the size of all columns is set using a function by taking a column
index (1, 2 ...) and multiplying it by
40px for each consecutive column.
Adjust the column width manually
Set the option
true to allow users to manually resize the column width by dragging the handle between the adjacent column headers. If you double-click on that handle, the width will be instantly adjusted to the size of the longest value in the column. Don't forget to enable column headers by setting
You can adjust the size of one or multiple columns simultaneously, even if the selected columns are not placed next to each other.
You can adjust the width of the columns to make them fit the table's width automatically. The width of a particular column will be calculated based on the size and number of other columns in the grid. This option only makes sense when you have at least one column in your data set and fewer columns than needed to enable the horizontal scrollbar.
Use the context menu to insert or remove columns. This will help you understand how the grid reacts to changes.
Fit all columns equally
This example fits all columns to the container's width equally by setting the option
Stretch only the last column
In this example, the first three columns are set to be 80px wide, and the last column automatically fills the remaining space. This is achieved by setting the option
A note about the performance
As mentioned above, the default width of the column is based on the widest value in any cell within the column. You may be wondering how it's possible for data sets containing hundreds of thousands of records.
This feature is made possible thanks to the AutoColumnSize plugin, which is enabled by default. Internally it divides the data set into smaller sets and renders only some of them to measure their size. The size is then applied to the entire column based on the width of the widest found value.
To increase the performance, you can turn off this feature by defining the fixed size for the specified column or all columns.
Size of the container
Setting the dimensions of the container that holds Handsontable is described in detail on the Grid Size page.
Related API reference
- Configuration options:
- Core methods: