
# header height

#### Change header height

- `headerHeight`: height of the header

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '70', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '70', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function btnSetHeaderHeightUp() {
  const headerHeight = gridView.header.height;
  gridView.header.height = headerHeight + 10;
}

function btnSetHeaderHeightDown() {
  const headerHeight = gridView.header.height;
  gridView.header.height = headerHeight - 10;
}

function btnFitHeaderHeight() {
  gridView.fitHeaderHeight(true, 2);
}
```

```js
   var headerHeight = gridView.header.height;
   gridView.header.height = headerHeight + 10;
```

```js
   var headerHeight = gridView.header.height;
   gridView.header.height = headerHeight - 10;
```

```js
function btnFitHeaderHeight() {
   //헤더 높이 자동조절
  gridView.fitHeaderHeight(true, 2);
}
```


#### Change group column header height

Specify the header height of the group column differently for each header row.

```js
const fields = [
  { fieldName: 'OrderID', dataType: 'text' },
  { fieldName: 'CustomerID', dataType: 'text' },
  { fieldName: 'EmployeeID', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CompanyName', dataType: 'text' },
  { fieldName: 'Country', dataType: 'text' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductName', dataType: 'text' },
  { fieldName: 'QuantityPerUnit', dataType: 'text' },
  { fieldName: 'Quantity', dataType: 'number' },
  { fieldName: 'UnitPrice', dataType: 'number' }
];

const columns = [
  {
    name: 'Country',
    fieldName: 'Country',
    type: 'data',
    width: '100',
    styles: { textAlignment: 'center' },
    header: { text: 'Country' }
  },
  {
    name: 'CompanyName',
    fieldName: 'CompanyName',
    type: 'data',
    width: '120',
    styleName: 'blue-column',
    styles: { textAlignment: 'near' },
    header: { text: 'Company Name' }
  },
  {
    name: 'UnitPrice2',
    fieldName: 'UnitPrice',
    type: 'data',
    width: '100',
    renderer: { type: 'bar', origin: 'left', barWidth: '80%' },
    header: { text: 'UnitPrice2' },
    footer: { expression: 'sum', styles: { textAlignment: 'far', numberFormat: '#,000' } }
  },
  {
    name: 'OrderID',
    fieldName: 'OrderID',
    type: 'data',
    width: '80',
    styles: { textAlignment: 'center' },
    header: { text: 'Order ID' },
    footer: { expression: 'max', groupExpression: 'max' }
  },
  {
    name: 'CustomerID',
    fieldName: 'CustomerID',
    type: 'data',
    width: '90',
    styles: { textAlignment: 'center' },
    header: { text: 'Customer ID' }
  },
  {
    name: 'EmployeeID',
    fieldName: 'EmployeeID',
    type: 'data',
    width: '90',
    styles: { textAlignment: 'center' },
    header: { text: 'Employee ID' },
    footer: { expression: 'min', groupExpression: 'min' }
  },
  {
    name: 'OrderDate',
    fieldName: 'OrderDate',
    type: 'data',
    width: '130',
    styles: { textAlignment: 'center' },
    header: { text: 'Order Date' }
  },
  {
    name: 'Phone',
    fieldName: 'Phone',
    type: 'data',
    width: '90',
    renderer: { type: 'button' },
    header: { text: 'Button' }
  },
  {
    name: 'Phone2',
    fieldName: 'Phone',
    type: 'data',
    width: '90',
    styles: { textAlignment: 'near' },
    header: { text: 'Phone2' }
  },
  {
    name: 'ProductName',
    fieldName: 'ProductName',
    type: 'data',
    width: '200',
    styles: { textAlignment: 'near' },
    header: { text: 'Product Name' }
  },
  {
    name: 'QuantityPerUnit',
    fieldName: 'QuantityPerUnit',
    type: 'data',
    width: '100',
    styles: { textAlignment: 'near' },
    header: { text: 'Quantity / Unit' }
  },
  {
    name: 'Quantity',
    fieldName: 'Quantity',
    type: 'data',
    width: '100',
    styles: { textAlignment: 'far' },
    header: { text: 'Quantity' },
    footer: { expression: 'sum', styles: { textAlignment: 'far', numberFormat: '#,000' } }
  },
  {
    name: 'UnitPrice',
    fieldName: 'UnitPrice',
    type: 'data',
    width: '100',
    styles: { textAlignment: 'far' },
    header: { text: 'Unit Price' },
    footer: { expression: 'avg', groupExpression: 'max', styles: { textAlignment: 'far', numberFormat: '0.00', prefix: 'AVG = ' } }
  },
  {
    name: 'Country2',
    fieldName: 'Country',
    type: 'data',
    width: '100',
    styles: { textAlignment: 'center' },
    header: { text: 'Country2' }
  }
];

const layout1 = [
  {
    name: 'companyGroup',
    direction: 'horizontal',
    items: ['Country', 'CompanyName'],
    header: { text: 'Company' }
  },
  'OrderID',
  'CustomerID',
  'EmployeeID',
  'OrderDate',
  'Phone'
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40,
    heights: [30, 60]
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.setColumnLayout(layout1);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
gridView.header.heights = [30,50]
```