
# Display multiple lines in HEADER and FOOTER

To display text in the header and footer over multiple lines, separate them using the line break symbol `\n`.
And apply the css white-space property.

#### Column header

Specify css in the styleName property of the header.

```js
RealGrid.setLocale('ko');

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', width: '100', header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', width: '120', header: { text: 'Company\nName', styleName: 'multi-line-css' } },
  { name: 'OrderID', fieldName: 'OrderID', width: '80', header: { text: 'Order ID' } },
  { name: 'CustomerID', fieldName: 'CustomerID', width: '90', header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', width: '90', header: { text: 'Employee ID' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '130', header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', width: '90', renderer: { type: 'button' }, header: { text: 'Phone' } },
  { name: 'ProductName', fieldName: 'ProductName', width: '200', header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', width: '100', header: { text: 'Quantity / Unit' } },
  { name: 'Quantity', fieldName: 'Quantity', width: '100', header: { text: 'Quantity' }, footer: { expression: 'sum', numberFormat: '#,000' } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', width: '100', header: { text: 'Unit Price' }, footer: { expression: 'avg', numberFormat: '#,##0.00' } }
];

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

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

```css
.multi-line-css {
   white-space: pre;
   background: #ff8b00;
}
```

```js
var columns = [{
     ...
}, {
   "name": "CompanyName",
   "fieldName": "CompanyName",
   "width": "120",
   "header": {
       "text": "Company\\nName",
       "styleName": "multi-line-css"
   }
}, {
     ...
}];
```

#### Column Footer

Specify css in the styleName property of the footer.

```js
RealGrid.setLocale('ko');

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', width: '100', header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', width: '120', header: { text: 'Company Name' }, footer: { text: 'FooterText:\nCompany Name', styleName: 'multi-line-css' } },
  { name: 'OrderID', fieldName: 'OrderID', width: '80', header: { text: 'Order ID' } },
  { name: 'CustomerID', fieldName: 'CustomerID', width: '90', header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', width: '90', header: { text: 'Employee ID' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '130', header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', width: '90', renderer: { type: 'button' }, header: { text: 'Phone' } },
  { name: 'ProductName', fieldName: 'ProductName', width: '200', header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', width: '100', header: { text: 'Quantity / Unit' } },
  { name: 'Quantity', fieldName: 'Quantity', width: '100', header: { text: 'Quantity' }, footer: { expression: 'sum', numberFormat: '#,000' } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', width: '100', header: { text: 'Unit Price' }, footer: { expression: 'avg', numberFormat: '#,##0.00' } }
];

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

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

```css
.multi-line-css {
   white-space: pre;
   background: #ff8b00;
}
```

```js
var columns = [{
     ...
}, {
   "name": "CompanyName",
   "fieldName": "CompanyName",
   "width": "120",
   "header": {
       "text": "Company Name"
   },
   "footer": {
     "text": "FooterText:\\nCompany Name",
     "styleName": "multi-line-css"
   }
}, {
     ...
}];
```

#### Layout header (group header)

In the case of the layout header, it is set in the layout rather than in the column.

```js
RealGrid.setLocale('ko');

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', width: '100', header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', width: '120', header: { text: 'Company Name' } },
  { name: 'OrderID', fieldName: 'OrderID', width: '80', header: { text: 'Order ID' } },
  { name: 'CustomerID', fieldName: 'CustomerID', width: '90', header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', width: '90', header: { text: 'Employee ID' }, footer: { expression: 'min', groupExpression: 'min' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '130', header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', width: '90', renderer: { type: 'button' }, header: { text: 'Phone' } },
  { name: 'ProductName', fieldName: 'ProductName', width: '200', header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', width: '100', header: { text: 'Quantity / Unit' } },
  { name: 'Quantity', fieldName: 'Quantity', width: '100', header: { text: 'Quantity' }, footer: { expression: 'sum', numberFormat: '#,000' } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', width: '100', header: { text: 'Unit Price' }, footer: { expression: 'avg', numberFormat: '#,##0.00' } }
];

const layout = [
  {
    name: 'companyGroup',
    direction: 'horizontal',
    items: ['Country', 'CompanyName'],
    header: {
      text: 'Company\nGroup',
      styleName: 'multi-line-css'
    }
  },
  'OrderID',
  'CustomerID',
  'EmployeeID',
  'OrderDate',
  'Phone'
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 100
  },
  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(layout);
      });
  }
}, {
  fields
});

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

```css
.multi-line-css {
   white-space: pre;
   background: #ff8b00;
}
```

```js
layout1 = [
   {
     name: "companyGroup",
     direction: "horizontal",
     items: [
       "Country",
       "CompanyName"
     ],
     header: {
       text: "Company\\nGroup",
       styleName: "multi-line-css"
     }
   },
   "OrderID",
   "CustomerID",
   "EmployeeID",
   "OrderDate",
   "Phone"
]
```