Customize Column Headers
The DataGrid generates column headers based on the names of data fields by default. For example, if a data field is "fullName", the column header text is "Full Name".
Specify the columns.caption property to change the column header text.
jQuery
JavaScript
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
columns: [
{ dataField: "CompanyName", caption: "Company" },
// ...
]
});
});Angular
HTML
TypeScript
<dx-data-grid ... >
<dxi-column dataField="CompanyName" caption="Company"></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})Vue
App.vue
<template>
<DxDataGrid ... >
<DxColumn data-field="CompanyName" caption="Company" />
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumn
} from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid,
DxColumn
},
// ...
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, {
Column
} from 'devextreme-react/data-grid';
class App extends React.Component {
render() {
return (
<DataGrid ... >
<Column dataField="CompanyName" caption="Company" />
</DataGrid>
);
}
}
export default App;If you need a more specific customization, define a custom template in the columns.headerCellTemplate property. This property accepts a function or template container.
jQuery
JavaScript
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
columns: [{
dataField: "Title",
caption: "Position",
headerCellTemplate: function (header, info) {
$('<div>')
.html(info.column.caption)
.css('font-size', '16px')
.appendTo(header);
}
}, {
dataField: "Address",
headerCellTemplate: $('<i style="color: black">Mailing Address</i>')
}]
});
});Angular
HTML
TypeScript
<dx-data-grid ... >
<dxi-column
dataField="Title"
caption="Position"
headerCellTemplate="titleHeaderTemplate">
</dxi-column>
<dxi-column
dataField="Address"
headerCellTemplate="addressHeaderTemplate">
</dxi-column>
<div *dxTemplate="let info of 'titleHeaderTemplate'">
<p style="font-size:16px">{{info.column.caption}}</p>
</div>
<div *dxTemplate="let info of 'addressHeaderTemplate'">
<i style="color: black">Mailing Address</i>
</div>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})Vue
App.vue
<template>
<DxDataGrid ... >
<DxColumn
data-field="Title"
caption="Position"
header-cell-template="title-header"
/>
<DxColumn
data-field="Address"
header-cell-template="address-header"
/>
<template #title-header="{ data }">
<p style="font-size:16px">{{ data.column.caption }}</p>
</template>
<template #address-header>
<i style="color: black">Mailing Address</i>
</template>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumn
} from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid,
DxColumn
},
// ...
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, {
Column
} from 'devextreme-react/data-grid';
const renderTitleHeader = (data) => {
return <p style={{ font-size: '16px' }}>{data.column.caption}</p>;
}
const renderAddressHeader = () => {
return <i style={{ color: 'black' }}>Mailing Address</i>;
}
class App extends React.Component {
render() {
return (
<DataGrid ... >
<Column
dataField="Title"
caption="Position"
headerCellRender={renderTitleHeader}
/>
<Column
dataField="Address"
headerCellRender={renderAddressHeader}
/>
</DataGrid>
);
}
}
export default App;To hide column headers, assign false to the showColumnHeaders property.
jQuery
JavaScript
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
showColumnHeaders: false
});
});Angular
HTML
TypeScript
<dx-data-grid ...
[showColumnHeaders]="false">
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})Vue
App.vue
<template>
<DxDataGrid ...
:show-column-headers="false">
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid
},
// ...
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
class App extends React.Component {
render() {
return (
<DataGrid ...
showColumnHeaders={false}>
</DataGrid>
);
}
}
export default App;See Also
Feedback