1771 Technologies Logo

Rows

Row Height

The rowHeight property on the Graphite Grid state determines a row's vertical space. The value provided to rowHeight may be:

  • A number, specifying a fixed row height for every row.
  • "auto", allowing the height of the grid to be determined by the row's content.
  • A function that returns a number given a row index. This can be used for variable row heights.
  • An object of the form { kind: "fill", min: number; max?:number }, causing the rows to expand to fill available space.

Fixed Row Height

When the rowHeight property is set to a number, the height of the rows in the Grid will be a fixed amount.

export function RowHeightFixed() {
  const grid = useGraphiteGrid({
    initial: {
      rowHeight: 20,
      // other properties
    },
  });
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Best practice

Prefer a fixed row height unless you have a good reason to use one of the other row height settings. A fixed row height has the best overall performance.

"auto" Row Height

When the row height value is set to "auto", Graphite Grid observes the rendered row height and uses the observed height for row calculations.

Caution

"auto" row height is currently not supported by the GraphiteGridCanvas renderer.

export function RowHeightAutoHeight() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "Lorem",
          field: 0,
          width: 250,
          cellTheme: { textOverflow: "wrap", verticalPadding: 8, horizontalPadding: 12 },
        },
        { id: "Random Data", field: 1 },
        { id: "Passage Number", field: 2 },
      ],
      rowHeight: "auto",
      virtualizeCells: false,
      // other props
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Best practice

When rowHeight is "auto", turning off cell virtualization is usually preferable. Graphite Grid relies on the browser's height calculations to determine the row height when "auto" is used. If cell virtualization is on, not all the columns will be present in the DOM, resulting in layout shifts as the user scrolls horizontally.

To turn off cell virtualization, use the virtualizeCells setting in the grid state.

const grid = useGraphiteGrid({
  initial: {
    virtualizeCells: false,
    // Other props
  },
});

Limitations of Auto Height

Auto height works by guessing the height each row will take and then lazily observing each row's actual height. Only the displayed rows are observed, so the height of each row is updated as it is rendered.

As the user scrolls, more rows are observed, and the viewport's scroll height will change. If the user drags the scroll bar, the scroll position may jump and become out of sync with the mouse position as the user scrolls. The further away the observed row heights are from the estimated row height, the more significant the difference.

These effects cannot be avoided, which is one reason to prefer some of the other row height methods.

Variable Row Height

The rowHeight property may be a function that returns a number representing the row height for a given row index. This allows for variable row heights that are known ahead of time. Variable row heights are an excellent compromise between fixed and automatic row heights.

export function RowHeightVariable() {
  const grid = useGraphiteGrid({
    initial: {
      rowHeight: ({ rowIndex }) => [20, 80, 120][rowIndex % 3],
    },
  });
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Variable row heights are only slightly less performant than fixed row heights and do not have any of the scroll issues associated with "auto" row height.

Fill Row Height

The fill row height setting expands rows to fill any available vertical space in the viewport. This setting is often practical when the Grid has only a few rows of data.

export function RowHeightFill() {
  const grid = useGraphiteGrid({
    initial: {
      rowHeight: { kind: "fill", min: 30 },
      // other props
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

The rowHeight property for fill is an object of the form:

type FillRowHeight = {
  kind: "fill"; // the kind of row height
  min: number; // the minimum height a row should have
  max?: number; // (optional) the maximum height a row should have
};

If a value is provided for max, it is possible that the rows will not expand to fill the available vertical space as the max value will constrain them.

Updating Row Height

The rowHeight value of the grid may be changed after it has been initially set using the setRowHeightCalculator API method.

export function RowHeightChange() {
  const grid = useGraphiteGrid({
    initial: {
      rowHeight: 20,
      // other props
    },
  });
  useEffect(() => {
    grid.api.autosizeColumns({ includeHeader: true });
  }, [grid.api]);
 
  return (
    <div>
      <div>
        <Button onClick={() => grid.api.setRowHeightCalculator({ kind: "fill", min: 20 })}>
          Fill
        </Button>
        <Button onClick={() => grid.api.setRowHeightCalculator(20)}>Small Row</Button>
        <Button onClick={() => grid.api.setRowHeightCalculator(40)}>Medium Row</Button>
        <Button onClick={() => grid.api.setRowHeightCalculator(60)}>Large Row</Button>
      </div>
      <div style={{ height: 300, border: "1px solid gray" }}>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}

Caution

Updating the rowHeight of the grid is an expensive operation and shouldn't be done inside a loop of frequently called functions.

Next
Row Pinning