
# Style for Excel output

You can separately apply styles for Excel output by specifying the exportStyleName property on the header, footer, and column.

When output to Excel, the background color of the "Name" column header and "Gender" column data cells is set to blue.

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Address', dataType: 'text' },
  { 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',
      exportStyleName: 'blueColor'
    }
  },
  {
    name: 'Gender',
    fieldName: 'Gender',
    width: '40',
    header: {
      text: 'Gender'
    },
    exportStyleName: 'blueColor'
  },
  {
    name: 'Age',
    fieldName: 'Age',
    width: '40',
    header: {
      text: 'Age'
    },
    styleName: 'right-column'
  },
  {
    name: 'Address',
    fieldName: 'Address',
    width: '200',
    header: {
      text: 'Address'
    },
    styleName: 'left-column'
  },
  {
    name: 'Phone',
    fieldName: 'Phone',
    width: '100',
    header: {
      text: 'Phone'
    }
  },
  {
    name: 'ProductId',
    fieldName: 'ProductId',
    width: '120',
    header: {
      text: 'Product Code'
    }
  },
  {
    name: 'KorCountry',
    fieldName: 'KorCountry',
    width: '100',
    header: {
      text: 'Country'
    }
  },
  {
    name: 'OrderDate',
    fieldName: 'OrderDate',
    width: '100',
    header: {
      text: 'Order Date'
    }
  },
  {
    name: 'CardNumber',
    fieldName: 'CardNumber',
    width: '140',
    header: {
      text: 'Card No.'
    }
  },
  {
    name: 'Monetary',
    fieldName: 'Monetary',
    width: '40',
    header: {
      text: 'Monetary'
    }
  },
  {
    name: 'StartDate',
    fieldName: 'StartDate',
    width: '100',
    header: {
      text: 'Start Date'
    }
  },
  {
    name: 'EndDate',
    fieldName: 'EndDate',
    width: '100',
    header: {
      text: 'End Date'
    }
  },
  {
    name: 'ToMonth',
    fieldName: 'ToMonth',
    width: '50',
    header: {
      text: 'Pay Cnt.'
    },
    styleName: 'right-column'
  },
  {
    name: 'Month',
    fieldName: 'Month',
    width: '50',
    header: {
      text: 'Residuum'
    },
    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'
    },
    styleName: 'right-column'
  },
  {
    name: 'SaveMaturity',
    fieldName: 'SaveMaturity',
    width: '80',
    numberFormat: '#,##0',
    header: {
      text: 'Save Maturity'
    },
    styleName: 'right-column'
  },
  {
    name: 'CurrentSave',
    fieldName: 'CurrentSave',
    width: '80',
    numberFormat: '#,##0',
    header: {
      text: 'Currency Save'
    },
    styleName: 'right-column'
  }
];

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

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

function excelExport() {
  gridView.exportGrid({
    type: 'excel',
    target: 'local',
    fileName: 'gridExportSample.xlsx',
    applyDynamicStyles: true,
    done: function () {
      alert('done excel export');
    }
  });
}
```

#### Download Excel

```js
gridView.exportGrid({
     type: "excel",
     target: "local",
     fileName: "gridExportSample.xlsx",
     applyDynamicStyles: true;
     done: function () {
         alert("done excel export")
     }
});
```

#### set exportStyleName

```js
var columns = [
     {
       name: "KorName",
       fieldName: "KorName",
       width: "60",
       header: {
         text: "Name",
         exportStyleName: "blueColor"
       },
     },
     {
       name: "Gender",
       fieldName: "Gender",
       width: "40",
       header: {
         text: "Gender"
       },
       exportStyleName: "blueColor"
     },
     ...
```

#### Dynamic Excel Styles

You can also use the exportStyleName property for dynamic styles.

```js
styleCallback: function(grid, dataCell){
   var ret = {}
   if(dataCell.value == true){
     ret.styleName = "blue-column"
     ret.exportStyleName = "yellow-color"
   }

   return ret;
}
```