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".
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.