Interface GroupHeaderOptions

For grouped data grids, you can use the groupHeaderRenderer to display a custom header for each group. The group header can span the entire width of the grid, or it can be split into left and right locked sections. You can use the existing hierarchy column to display the group header, or you can use a custom renderer Please see https://reactdatagrid.com/examples/?example=Group_Headers and https://reactdatagrid.com/examples/?example=Large_Dynamic_Grid for examples.

Hierarchy

  • GroupHeaderOptions

Properties

columnGroupLabelFunction?: ((item: unknown) => string)

Type declaration

    • (item: unknown): string
    • The group header label function. This is used to control the text that is displayed in the group header.

      Returns

      The text that is displayed in the group header.

      Parameters

      • item: unknown

        The item that is being rendered.

      Returns string

enableGroupHeaders: boolean

The flag to turn on group headers.

groupHeaderField?: string

The field that is used to render the group header.

groupHeaderHeightFunction?: ((item: unknown) => number)

Type declaration

    • (item: unknown): number
    • The group header height function. This is used to control the height of the group header.

      Parameters

      • item: unknown

      Returns number

groupHeaderRenderer?: ((node: RendererProps) => unknown)

Type declaration

    • (node: RendererProps): unknown
    • The group header renderer. The group header renderer is used to display a custom header for each group.

      Parameters

      Returns unknown

groupHeaderRendererLeftLocked?: ((node: RendererProps) => unknown)

Type declaration

    • (node: RendererProps): unknown
    • The group header renderer for the left locked section.

      Parameters

      Returns unknown

groupHeaderRendererRightLocked?: ((node: RendererProps) => unknown)

Type declaration

    • (node: RendererProps): unknown
    • The group header renderer for the right locked section.

      Parameters

      Returns unknown

showGroupItemRow?: boolean

When grouped headers are used, you can optionally show the group item row itself. this is useful when you want to show the group header, but also want to show the group item row which may have summary data.

useHierarchyColumnForRenderer?: boolean

If you already have a column that renders hierarchy, you can use that column to render the group header. as we do in the following example: https://reactdatagrid.com/examples/?example=Group_Headers This is what enables the checkbox as well as the expand/collapse icon in the group header.

Generated using TypeDoc