React Data Grid Row height

Overview

By default, the row height adjusts to the height of the content. The minimum height is 23px. The row height can be passed as a constant, an array, or a function.

The content inside a cell gets wrapped if it doesn't fit the cell's size.

Setting the row height as a constant

We set the same height of 40px for all rows across the entire grid in this example.

    Setting the row height in an array

    In this example, the height is only set for the first rows. Each additional row would be automatically adjusted to the content.

      Setting the row height using a function

      The row height can be set using a function. In this example, the size of all rows is set using a function that takes a row index (1, 2 ...) and multiplies it by 20px for each consecutive row.

        Adjust the row height manually

        Set the option manualRowResize to true to allow users to manually resize the row height by dragging the handle between the adjacent row headers. Don't forget to enable row headers by setting rowHeaders to true.

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