/ S

React Data Grid Column widths

Configure column widths, using an array or a function. Let your users manually change column widths using Handsontable's interface.

In this article

Overview

By default, the column width adjusts to the width of the content. However, if the width of the content is less than 50px, including 1px for borders on the sides, the column width remains constant at 50px. You can pass the column size 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.

Set the column width as a constant

In this example we set the same width of 100px for all columns across the entire grid.

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

      Set 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 manualColumnResize to 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 colHeaders to true.

        You can adjust the size of one or multiple columns simultaneously, even if the selected columns are not placed next to each other.

          Column stretching

          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.

          TIP

          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 stretchH: 'all'.

            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 stretchH: 'last'.

              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.

              ← Column summary →