React TreeList - Customize Column Headers

The TreeList 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 UI component TreeList ColumnHeaders

Specify the columns.caption property to change the column header text.

App.vue
  • <template>
  • <DxTreeList ... >
  • <DxColumn data-field="CompanyName" caption="Company" />
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeList, {
  • DxColumn
  • } from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList,
  • DxColumn
  • },
  • // ...
  • }
  • </script>

If you need a more specific customization, define a custom template in the columns.headerCellTemplate property. This property accepts a function or template container.

App.vue
  • <template>
  • <DxTreeList ... >
  • <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>
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeList, {
  • DxColumn
  • } from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList,
  • DxColumn
  • },
  • // ...
  • }
  • </script>

To hide column headers, assign false to the showColumnHeaders property.

App.vue
  • <template>
  • <DxTreeList ...
  • :show-column-headers="false">
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeList from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList
  • },
  • // ...
  • }
  • </script>
See Also