Column Header Styling

Graphite Grid column headers come with minimal default styling. You can override these styles to customize the appearance of column headers. There are two primary ways to apply styles:

headerTheme: Defines style properties directly within the theme
headerClassName: Custom CSS classes are added to the header

Info

Even when a column definition includes a custom HeaderRenderer, the headerTheme and headerClassName styles are still applied. The contents generated by the HeaderRenderer are placed within the styled header container cell, ensuring that the custom header maintains consistent styling with the rest of the grid.

Caution

Before reading the remainder of this page, please ensure you have familiarized yourself with Grid Theming, which covers basic theming for the Grid.

`headerTheme`

The headerTheme property applies theme-specific properties to a column's header. This approach is generally preferred over headerClassName as it integrates more seamlessly with other Graphite Grid functionalities. It also supports autosizing calculations even when the header is not visible, ensuring better performance and consistency.

In addition to the theme values, the keyedThemes property may be specified, which provides additional overrides based on the grid's current themeKey value.

export function HeaderTheme() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "company-name", headerLabel: "Company Name", field: 0 },
        { id: "founded", headerLabel: "Founded", field: 1 },
        {
          id: "employee-count",
          headerLabel: "No. Employee",
          field: 2,
          headerTheme: {
            backgroundColor: "blue",
            color: "white",
            align: "center",
            justify: "center",
            fontFamily: "monospace",
            keyedThemes: {
              dark: {
                backgroundColor: "lightblue",
                color: "black",
              },
            },
          },
        },
      ],
      // other props
    },
  });
}

The headerTheme property may also be a function that returns the theme object.

Column Header Theme Properties

Name
color
Type
string
Description
The foreground color for text corresponds to the CSS color rule.
Name
backgroundColor
Type
string
Description
The background color for the header cell.
Name
fontFamily
Type
string
Description
The font family for header text.
Name
fontSize
Type
string
Description
The font size for header text may be any valid CSS font value.
Name
fontWeight
Type
string
Description
The font weight for header text.
Name
lineHeight
Type
string
Description
The line height for header text that wraps.
Name
textOverflow
Type
clip | wrap
Description
The text-overflow behavior of the header. clip prevents text from wrapping and truncates text that overflows its container. wrap breaks text onto a new line if it overflows the header container. clip is the default.
Name
verticalPadding
Type
number
Description
The block padding for a header cell.
Name
horizontalPadding
Type
number
Description
The inline padding for a header cell.
Name
align
Type
start | center | end
Description
The header content is aligned as follows: "start" aligns the content at the top of the header cell, "center" aligns it in the middle, and "end" aligns it at the bottom.
Name
justify
Type
start | center | end
Description
The justification of the header content. "start" justifies content at the beginning of the cell, "center" justifies it in the middle, and "end" justifies it at the end of the header cell.

`headerClassName`

The headerClassName property allows you to add one or more CSS classes to the header container of a specific column. This property can be a string or a function that returns a string. When specifying multiple classes, concatenate them into a single string.

export function HeaderClasses() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "company-name", headerLabel: "Company Name", field: 0 },
        { id: "founded", headerLabel: "Founded", field: 1 },
        {
          id: "employee-count",
          headerLabel: "No. Employee",
          field: 2,
          headerClassName: "bg-rose-600 text-white",
        },
      ],
      // other props
    },
  });
}

By leveraging the headerTheme and headerClassName properties, you can customize the appearance of column headers in Graphite Grid. The headerTheme approach is generally preferred as it integrates seamlessly with other grid functionalities and supports autosizing calculations. However, the headerClassName property provides flexibility for adding custom CSS classes to achieve specific styling requirements.