Column Header Height

The column header in Graphite Grid may have its height set to a fixed value or be dynamically determined by its content. The columnHeaderHeight property of the grid specifies the header height behavior the grid should use.

columnHeaderHeight may be a number that represents the header height in px, or it may be the value "auto".

Best practice

When the columnHeaderHeight property is set to 'auto', turning off column header virtualization is generally recommended. Graphite Grid relies on the browser's height calculations to determine the header height when 'auto' is used. If column virtualization is on, not all the columns will be present in the DOM, which can lead to layout shifts as the user scrolls horizontally.

To turn off column header virtualization, use the virtualizeColumnHeaders setting in the grid state.

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

export function ColumnHeaderHeight() {
  const grid = useGraphiteGrid({
    initial: {
      columnHeaderHeight: 32,
      // Other props
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Automatic header height is useful when the content of a header may wrap.

export function ColumnHeaderHeightAuto() {
  const grid = useGraphiteGrid({
    initial: {
      columnHeaderHeight: "auto",
      columnDefinitions: [
        {
          id: "company-name",
          headerLabel: "Company Name and some extra text to make this header text wrap",
          field: 0,
          headerTheme: {
            textOverflow: "wrap",
          },
        },
        // other column definitions
      ],
      // other grid properties
    },
  });
  // Additional logic or return if needed
}

By setting the columnHeaderHeight property, you can control the height of the column headers in Graphite Grid. Using a fixed value ensures consistent header heights, while "auto" allows the headers to adjust their height dynamically based on the content. When using "auto", turning off column header virtualization is recommended to avoid layout shifts during horizontal scrolling.