DevExtreme jQuery - 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 option 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
],
// ...
})If you need a more specific customization, define a custom template in the columns.headerCellTemplate option. This option 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
],
// ...
})To hide column headers, assign false to the showColumnHeaders option.
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
],
// ...
})See Also
Feedback