Setting the Default Row Height in React

Background:

FlexGrid computes row heights based on font size and cell padding by default. If that default row height doesn’t meet your needs, you can easily adjust it by setting the defaultSize property on the grid’s rows collection, either during initialization or at runtime. This lets you control how tall every row should be.

Steps to Complete:

1. Initialize the grid.
2. Set the rows.defaultSize property to the desired height.

Getting Started:

Initialize the grid

We set up a standard Wijmo FlexGrid, binding it to data and rendering it in React. Then we use a reference to modify its row settings as soon as the grid is ready.

import React, { useRef, useEffect } from 'react';
import * as wjcGrid from '@mescius/wijmo.react.grid';

export default function App({ data }) {
  const gridRef = useRef(null);

  useEffect(() => {
    const grid = gridRef.current;

    ...

  }, []);

  return (
    <div className="container-fluid">
      <wjcGrid.FlexGrid
        ref={gridRef}
        itemsSource={data}
        autoGenerateColumns={true}
      />
    </div>
  );
}

• We use a React ref to capture the FlexGrid instance.

Set the rows.defaultSize property to the desired height

Inside useEffect, once the grid is mounted, we set grid.rows.defaultSize to 40 (or any pixel value) to control row height.

  useEffect(() => {
    const grid = gridRef.current;

    if (grid) {
      // Set default row height
      grid.rows.defaultSize = 40;
    }
  }, []);

Change Row Height Later (Optional)

If you want to adjust row height after initialization, for example, based on user input or layout changes — simply update defaultSize whenever needed.

function increaseRowHeight() {
  const grid = gridRef.current;
  if (grid) {
    grid.rows.defaultSize = 60;
  }
}

• Calling this function at runtime will update the row height immediately.
• This provides runtime flexibility without re-rendering the grid.

With this React setup:

• All grid rows will use your specified pixel height (e.g., 40px).
• You can adjust row height dynamically at runtime as well.
• This is particularly useful when dealing with multi-line content or custom cell layouts.

Happy coding!