{/* Do not edit this file. It is automatically generated by API Documenter. */}


## HeaderSummary

Single configuration model in the Header Summary area

**Signature:**

```typescript
export interface HeaderSummary extends GridSummaryObject
```
**Extends:** GridSummaryObject

## Remarks

Grid automatically creates one summary if there is no separate setting, and [GridBase.headerSummary](/refs/Class/GridBase#headersummary){/* */} returns the first summary.

Change the property using [setHeaderSummary()](/refs/Class/GridBase#setheadersummary){/* */} or [GridBase.headerSummary](/refs/Class/GridBase#headersummary){/* */} Use to specify only the desired properties.

## Example


```js
gridView.setHeaderSummary({styleName: 'custom-hsummary-1'});
// or
gridView.headerSummary.styleName = 'custom-hsummary-1';
```

## Events

| Property | Type | Description |
| --- | --- | --- |
| [cellStyleCallback](/refs/Interface/HeaderSummary#cellstylecallback) | [CellStyleCallback](/refs/realgrid#cellstylecallback) | Callback to specify cell style |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [height](/refs/Interface/HeaderSummary#height) | number | height |
| [minHeight](/refs/Interface/HeaderSummary#minheight) | number | Minimum Height |
| [styleName](/refs/Interface/HeaderSummary#stylename) | string | style class name |
| [summaryIndex](/refs/Interface/HeaderSummary#summaryindex) | number | summary Order within the collection |
| [value](/refs/Interface/HeaderSummary#value) | any | Stores the value calculated from valueCallback or expression. |
| [visible](/refs/Interface/HeaderSummary#visible) | boolean | Visibility |

## Events Desc

### cellStyleCallback

Callbacks for specifying cell styles

`Type` - [CellStyleCallback](/refs/realgrid#cellstylecallback)

**Remarks:**

It can be specified as a CSS class name in `string` form or in the form of [ColumnSummaryStyleObject](/refs/Interface/ColumnSummaryStyleObject).

**Example:**


```js
// Apply footer
const f = function (grid, cell) {
 if (cell.value > 10) {
 return {
 styleName: 'custom-summary'
 }
 }
}
headerSummary.cellStyleCallback = f;
```

<hr/>

## Properties Desc

### height

height

`Type` - number

**Remarks:**

If it is `0`{/* */}, it is automatically calculated and specified. If it is `0` or more, compare it to minHeight and specify a larger value.

<hr/>

### minHeight

minimum height

`Type` - number

<hr/>

### styleName

style class name

`Type` - string

<hr/>

### summaryIndex

Summary Order within the collection

`Type` - number

<hr/>

### value

Stores the value calculated from valueCallback or expression.

`Type` - any

<hr/>

### visible

Visibility

`Type` - boolean

<hr/>