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".

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid ColumnHeaders

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
    ],
    // ...
})
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 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
    ],
    // ...
})
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 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
    ],
    // ...
})
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