Headers in React Data Grid

The Syncfusion® React Data Grid component offers robust options for customizing column headers to enhance functionality and visual appeal. Header text, alignment, templates, wrapping, height, and styles can be modified to meet specific design and usability requirements. This guide outlines key features for configuring headers effectively.

Header text

The headerText property defines the title displayed in the column header cell. When header text is not provided, the grid defaults to displaying the corresponding field name as the column title.

Header template

The headerTemplate property enables the rendering of custom HTML elements or React components within a column header. This customization supports advanced features like adding interactive buttons or visual elements to the header. This property accepts a custom rendering function that receives a parameter of type ColumnHeaderTemplateProps, an interface that provides contextual information about the column.

Header text align

The headerTextAlign property sets the horizontal alignment of text within column headers. By default, header text is aligned to the left, but it can be configured to align center, right, or justify based on layout requirements.

To align both the header and cell content in a column, use the textAlign property.

Header text wrap

The textWrapSettings.enabled property enables text wrapping when header content exceeds the column width. Wrapping works only when columns have a defined width. Use textWrapSettings.wrapMode to control wrapping scope:

Header: Wraps only header content.
Content: Wraps only cell content.
Both: Wraps both header and cell content.

For example, setting textWrapSettings.wrapMode to Header wraps only the header content.

Header height

Adjusting the header height is essential when accommodating multiline text, images, or custom elements. The height can be modified using CSS by overriding the default .sf-grid .sf-grid-header-row .sf-cell class.

Header customization

The Data Grid component allows customization of header styles to align with design requirements. CSS classes and properties can be applied to modify attributes such as font, background color, and other header cell styles.

Using CSS

Header appearance can be customized by applying CSS to the .sf-grid-header-row .sf-cell class, allowing adjustments to properties like font, background color, and text color.

Using property

The cellClass property enables assigning a custom CSS class to specific column headers for targeted styling. By defining a CSS class and applying it through cellClass, individual headers can be customized.

<Column field="Priority" headerText="Priority" width="130" cellClass={(props?: CellClassProps)=>{return props?.cellType === CellType.Header ? 'customcss' : ''}} />

<Column field="Priority" headerText="Priority" width="130" cellClass={(props?: CellClassProps)=>{return props?.cellType === CellType.Header ? 'customcss' : ''}} />

Dynamic styling

The cellClass property enables dynamic styling of specific header cells by assigning custom CSS classes. It accepts a callback function whose parameter implements the CellClassProps interface, providing detailed information about the column.

When cellClass property is defined as a function, it runs every time a cell renders or updates. In grids with many cells or frequent changes, this repeated execution increases processing load and can slow down performance. To improve efficiency, use the headerTemplate feature for cell customization instead of function-based class assignments.