# GridSectionsProp

**Category:** Common/Types

## API

### Overview

Configuration object for the `sections` prop on [`Grid`](./?path=/story/base-components-collections-grid--grid). Enables grouping grid items into sections with headers. Provide a `GridSections` component, a `groupBy` function that extracts the grouping key from each item, and an optional `renderSection` callback for custom section headers.

### Description

Pass to the `sections` prop of a `Grid` component to create [Grid Sections](./?path=/story/features-display-grid-sections--grid-sections).

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `GridSections` | `(<T, F extends FiltersMap>(props: GridSectionsContentProps<T, F>) => Element) & { displayName: string; }` | Yes | - | A `GridSections` component. Import and pass the component without parameters. |
| `groupBy` | `GroupBy<T>` | Yes | - | A function that extracts the grouping key from an item. Items with the same key will be grouped into the same section. |
| `renderSection` | `RenderSection<T>` | No | - | A callback function to render the grid sections. The function receives the section ID and items in the section, and should return the `title`, and optional `primaryAction`, `badge`, or `summary` for each section. For more information, see the [section](./?path=/story/common-types--collectionsection) type. |