Variable Row Heights

The grid supports variable row heights. The row height can be set by using the rowHeight prop of the GridOptions interface. The rowHeight defaults to Constants.DEFAULT_ROW_HEIGHT.

Setting row height

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ rowHeight: 25, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        rowHeight: 25,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Similar to the row height, the header, footer, filter and toolbar heights can be set by using the headerRowHeight, footerRowHeight, filterRowHeight and toolbarHeight props of the GridOptions interface. The headerHeight, footerHeight, filterHeight and toolbarHeight defaults to Constants.DEFAULT_HEADER_HEIGHT, Constants.DEFAULT_FOOTER_HEIGHT, Constants.DEFAULT_FILTER_HEIGHT and Constants.DEFAULT_TOOLBAR_HEIGHT respectively.

Setting header, footer, filter and toolbar height

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ headerRowHeight: 75, footerRowHeight: 25, filterRowHeight: 25, toolbarHeight: 25, rowHeight: 25, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        headerRowHeight: 75,
        footerRowHeight: 25,
        filterRowHeight: 25,
        toolbarHeight: 25,
        rowHeight: 25,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

Setting row height based on data

The row height can be set based on the data by using the variableRowHeightOptions prop of the GridOptions interface. This is what the variableRowHeightOptions prop looks like:

export interface VariableRowHeightOptions {
  rowHeightFunction?: (value: RowPositionInfo) => number;
  cellHeightFunction?: (
    value: RowPositionInfo,
    col: ColumnPositionInfo
  ) => number;
  heightAdjustment?: number;
  fontSize?: number;
}
export interface VariableRowHeightColumnOptions
  extends VariableRowHeightOptions {
  enabled?: boolean;
}

The rowHeightFunction prop is a function that takes a RowPositionInfo object and returns a number. The RowPositionInfo object has the following properties:

export interface RowPositionInfo {
  type: RowType;
  startPosition: number;
  height: number;
  level: number;
  data: unknown;
  uniqueIdentifier: string;
  parent?: RowPositionInfo;
}

Lets see how we can use the rowHeightFunction prop to set the row height based on the data.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ variableRowHeightOptions: { rowHeightFunction: (row) => { if (row.data.firstName === "Brice") { return 75; } return 25; }, }, rowHeight: 25, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        variableRowHeightOptions: {
          rowHeightFunction: (row) => {
            if (row.data.firstName === "Brice") {
              return 75;
            }
            return 25;
          },
        },
        rowHeight: 25,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

The cellHeightFunction prop is a function that takes a RowPositionInfo object and a ColumnPositionInfo object and returns a number. For this to work, you have to set the variableRowHeightOptions prop of the ColumnOptions interface.

Setting cell height based on data

Lets see how we can use the cellHeightFunction prop to set the row height based on the data.

Live Editor

function App() { const columns = [ { ...createColumn("firstName", "string", "First Name"), width: 100, }, { ...createColumn("lastName", "string", "Last Name"), width: 100, }, { ...createColumn("employmentSummary", "string", "Employment Summary"), variableRowHeightOptions: { enabled: true, fontSize: 16, }, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ horizontalScrollMode: "off", dataProvider: [ { employeeId: "1", firstName: "Brice", lastName: "Johnson", employmentSummary: "Brice is a software engineer at Microsoft. He has been working on ReactDataGrid for the past 2 years. He is a very good software engineer.", }, { employeeId: "2", firstName: "John", lastName: "Doe", employmentSummary: "John is a software engineer at Google. He has been working on ReactDataGrid for the past 2 years. He is a very good software engineer.", }, { employeeId: "3", firstName: "Jane", lastName: "Doe", employmentSummary: "Jane is a software engineer at Apple. She has been working on ReactDataGrid for the past 2 years. She is a very good software engineer.", }, ], uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
  const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      width: 100,
    },
    {
      ...createColumn("lastName", "string", "Last Name"),
      width: 100,
    },

    {
      ...createColumn("employmentSummary", "string", "Employment Summary"),
      variableRowHeightOptions: {
        enabled: true,
        fontSize: 16,
      },
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        horizontalScrollMode: "off",
        dataProvider: [
          {
            employeeId: "1",
            firstName: "Brice",
            lastName: "Johnson",
            employmentSummary:
              "Brice is a software engineer at Microsoft. He has been working on ReactDataGrid for the past 2 years. He is a very good software engineer.",
          },
          {
            employeeId: "2",
            firstName: "John",
            lastName: "Doe",
            employmentSummary:
              "John is a software engineer at Google. He has been working on ReactDataGrid for the past 2 years. He is a very good software engineer.",
          },
          {
            employeeId: "3",
            firstName: "Jane",
            lastName: "Doe",
            employmentSummary:
              "Jane is a software engineer at Apple. She has been working on ReactDataGrid for the past 2 years. She is a very good software engineer.",
          },
        ],
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
      }}
    />
  );
}

Result

Loading...

In the above example, we have set the variableRowHeightOptions prop of the ColumnOptions interface for the employmentSummary column. This will enable the cellHeightFunction prop of the VariableRowHeightOptions interface for the employmentSummary column. The cellHeightFunction prop is a function that takes a RowPositionInfo object and a ColumnPositionInfo object and returns a number. If you dont specify one, the grid internally calculates the height of the cell based on the data.

Tip

Notice that we had to set the horizontalScrollMode prop of the GridOptions interface to off for the cellHeightFunction prop to work. We also set the fontSize prop of the VariableRowHeightOptions interface to 16 for the employmentSummary column. This is because the cellHeightFunction internally uses the fontSize prop to calculate the height of the cell. If you dont specify one, the grid internally uses the Constants.DEFAULT_FONT_SIZE value. You can use these properties along with the heightAdjustment prop to fine tune the height of the cell.