Vue TreeList - Customize Cells

Customize the Value and Text

Use the customizeText function to customize the text displayed in cells. Note that this text is not used is not used to sort, filter, and group data or calculate summaries.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Price",
            customizeText: function(cellInfo) {
                return cellInfo.value + "$";
            }
        }]
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    priceColumn_customizeText (cellInfo) {
        return cellInfo.value + "$";
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-tree-list-column dataField="Price" [customizeText]="priceColumn_customizeText"></dxi-tree-list-column>
</dx-tree-list>
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxColumn
            data-field="Price"
            :customize-text="priceColumn_customizeText"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    methods: {
        priceColumn_customizeText(cellInfo) {
            return cellInfo.value + '$';
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import TreeList, {
    Column
} from 'devextreme-react/tree-list';

const priceColumn_customizeText = (cellInfo) => {
    return cellInfo.value + '$';
};

export default function App() {
    return (
        <TreeList ... >
            <Column
                dataField="Price"
                customizeText={priceColumn_customizeText}
            />
        </TreeList>
    );
}

To use the text displayed in cells in those data processing operations, specify the calculateCellValue function instead. It populates a column with custom values and allows you to create unbound columns - columns that are not bound to any individual data field. In the following example, this function combines full names using data from the firstName and lastName fields:

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Full Name",
            calculateCellValue: function (rowData) {
                return rowData.firstName + " " + rowData.lastName;
            }
        }]
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    fullNameColumn_calculateCellValue (rowData) {
        return rowData.firstName + " " + rowData.lastName;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-tree-list-column caption="Full Name" [calculateCellValue]="fullNameColumn_calculateCellValue"></dxi-tree-list-column>
</dx-tree-list>
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxColumn
            caption="Full Name"
            :calculate-cell-value="fullNameColumn_calculateCellValue"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    methods: {
        fullNameColumn_calculateCellValue(rowData) {
            return rowData.firstName + ' ' + rowData.lastName;
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.fluent.blue.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

const fullNameColumn_calculateCellValue = (rowData) => {
    return rowData.firstName + ' ' + rowData.lastName;
};

export default function App() {
    return (
        <TreeList ... >
            <Column
                caption="Full Name"
                calculateCellValue={fullNameColumn_calculateCellValue}
            />
        </TreeList>
    );
}

Some features are disabled in columns with calculated values. Refer to the calculateCellValue description for a list of disabled features and the properties that enable them.

Customize the Appearance

To customize cell appearance, use a column's cellTemplate.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Title",
            cellTemplate: function(element, info) {
                 element.append("<div>" + info.text + "</div>")
                        .css("color", "blue");
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-tree-list-column dataField="Title" cellTemplate="cellTemplate"></dxi-tree-list-column>
    <div *dxTemplate="let cell of 'cellTemplate'">
        <div style="color:blue">{{ cell.text }}</div>
    </div>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTreeList ... >
        <DxColumn
            data-field="Title"
            cell-template="cell"
        />
        <template #cell="{ data }">
            <div style="color:blue">{{ data.cell.text }}</div>
        </template>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import TreeList, {
    Column
} from 'devextreme-react/tree-list';

const renderCell = (data) => {
    return <div style={{ color: 'blue' }}>{data.cell.text}</div>;
};

export default function App() {
    return (
        <TreeList ... >
            <Column
                dataField="Title"
                cellRender={renderCell}
            />
        </TreeList>
    );
}

While cellTemplate customizes data cells only, the onCellPrepared function can customize any cell. Unlike cellTemplate, this function does customizations after a cell is created, so you cannot use it to change the cell value. Check the rowType field of the function's argument to detect the UI element that owns the cell.

jQuery
JavaScript
CSS
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onCellPrepared: function(e) {
            if (e.rowType == "detailAdaptive") {
                e.cellElement.addClass("adaptiveRowStyle"); 
            }
        }
    });
});
.adaptiveRowStyle { 
    background-color: #cce6ff;
    font-size: 12pt
}
Angular
TypeScript
HTML
CSS
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onCellPrepared (e) {
        if (e.rowType == "detailAdaptive") {
            e.cellElement.classList.add("adaptiveRowStyle");
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    (onCellPrepared)="onCellPrepared($event)">
</dx-tree-list>
.adaptiveRowStyle { 
    background-color: #cce6ff;
    font-size: 12pt
}
Vue
App.vue
<template>
    <DxTreeList ...
        @cell-prepared="onCellPrepared">
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    methods: {
        onCellPrepared(e) {
            if (e.rowType == 'detailAdaptive') {
                e.cellElement.classList.add('adaptiveRowStyle');
            }
        }
    }
}
</script>
<style scoped>
    .adaptiveRowStyle { 
        background-color: #cce6ff;
        font-size: 12pt
    }
</style>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import TreeList from 'devextreme-react/tree-list';

const onCellPrepared = (e) => {
    if (e.rowType == 'detailAdaptive') {
        e.cellElement.classList.add('adaptiveRowStyle');
    }
};

export default function App() {
    return (
        <TreeList ...
            onCellPrepared={onCellPrepared}>
        </TreeList>
    );
}
See Also

Add Tooltips to Cells

The cellHintEnabled property adds a native browser tooltip to truncated cell content automatically. If you use a custom cellTemplate, you need to add the title attribute manually:

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: dataSource,
        columns: [{
            dataField: "name",
            caption: "Name"
        }, {
            dataField: "description",
            caption: "Description",
            cellTemplate: function(container, options) {
                $("<div>")
                    .text(options.value)
                    .attr("title", options.value)
                    .appendTo(container);
            }
        }]
    });
});
Angular
app.component.html
app.component.ts
<dx-tree-list [dataSource]="dataSource">
    <dxi-tree-list-column dataField="name" caption="Name"></dxi-tree-list-column>
    <dxi-tree-list-column
        dataField="description"
        caption="Description"
        cellTemplate="descriptionTemplate">
    </dxi-tree-list-column>
    <div *dxTemplate="let cell of 'descriptionTemplate'" [title]="cell.value">
        {{ cell.value }}
    </div>
</dx-tree-list>
import { Component } from "@angular/core";
import { DxTreeListModule } from "devextreme-angular";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    standalone: true,
    imports: [DxTreeListModule]
})
export class AppComponent {
    dataSource = [ /* ... */ ];
}
Vue
App.vue
<template>
    <DxTreeList :data-source="dataSource">
        <DxColumn data-field="name" caption="Name" />
        <DxColumn
            data-field="description"
            caption="Description"
            cell-template="descriptionTemplate"
        />
        <template #descriptionTemplate="{ data: cell }">
            <div :title="cell.value">{{ cell.value }}</div>
        </template>
    </DxTreeList>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';

const dataSource = [ /* ... */ ];
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { TreeList, Column } from 'devextreme-react/tree-list';

const dataSource = [ /* ... */ ];

function DescriptionCell({ data }: { data: { value: string } }) {
    return <div title={data.value}>{data.value}</div>;
}

export default function App() {
    return (
        <TreeList dataSource={dataSource}>
            <Column dataField="name" caption="Name" />
            <Column
                dataField="description"
                caption="Description"
                cellRender={(data) => <DescriptionCell data={data} />}
            />
        </TreeList>
    );
}

To add tooltips to multiple columns without modifying each cell template, use the onCellPrepared event:

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: dataSource,
        columns: ["name", "description"],
        onCellPrepared: function(e) {
            if (e.rowType === "data") {
                $(e.cellElement).attr("title", e.value);
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-tree-list
    [dataSource]="dataSource"
    (onCellPrepared)="onCellPrepared($event)">
    <dxi-tree-list-column dataField="name" caption="Name"></dxi-tree-list-column>
    <dxi-tree-list-column dataField="description" caption="Description"></dxi-tree-list-column>
</dx-tree-list>
import { Component } from "@angular/core";
import { DxTreeListModule } from "devextreme-angular";
import { CellPreparedEvent } from "devextreme/ui/tree-list";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    standalone: true,
    imports: [DxTreeListModule]
})
export class AppComponent {
    dataSource = [ /* ... */ ];

    onCellPrepared(e: CellPreparedEvent) {
        if (e.rowType === "data") {
            (e.cellElement as HTMLElement).title = e.value;
        }
    }
}
Vue
App.vue
<template>
    <DxTreeList
        :data-source="dataSource"
        @cell-prepared="onCellPrepared">
        <DxColumn data-field="name" caption="Name" />
        <DxColumn data-field="description" caption="Description" />
    </DxTreeList>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';
import type { CellPreparedEvent } from 'devextreme/ui/tree-list';

const dataSource = [ /* ... */ ];

function onCellPrepared(e: CellPreparedEvent) {
    if (e.rowType === 'data') {
        (e.cellElement as HTMLElement).title = e.value;
    }
}
</script>
React
App.tsx
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { TreeList, Column } from 'devextreme-react/tree-list';
import type { CellPreparedEvent } from 'devextreme/ui/tree-list';

const dataSource = [ /* ... */ ];

export default function App() {
    const onCellPrepared = useCallback((e: CellPreparedEvent) => {
        if (e.rowType === 'data') {
            (e.cellElement as HTMLElement).title = e.value;
        }
    }, []);

    return (
        <TreeList dataSource={dataSource} onCellPrepared={onCellPrepared}>
            <Column dataField="name" caption="Name" />
            <Column dataField="description" caption="Description" />
        </TreeList>
    );
}

To display a styled Tooltip with custom content, initialize the Tooltip component inside cellTemplate:

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: dataSource,
        columns: [{
            dataField: "description",
            caption: "Description",
            cellTemplate: function(container, options) {
                const cellEl = $("<span>")
                    .text(options.value)
                    .appendTo(container);

                $("<div>").dxTooltip({
                    target: cellEl,
                    showEvent: "mouseenter",
                    hideEvent: "mouseleave",
                    contentTemplate: function() {
                        return options.value;
                    }
                }).appendTo(container);
            }
        }]
    });
});
Angular
app.component.html
app.component.ts
<dx-tree-list [dataSource]="dataSource">
    <dxi-tree-list-column
        dataField="description"
        caption="Description"
        cellTemplate="descriptionTemplate">
    </dxi-tree-list-column>
    <div *dxTemplate="let cell of 'descriptionTemplate'">
        <span [id]="'cell_' + cell.rowIndex">{{ cell.value }}</span>
        <dx-tooltip
            [target]="'#cell_' + cell.rowIndex"
            showEvent="mouseenter"
            hideEvent="mouseleave">
            <div *dxTemplate="let t of 'content'">{{ cell.value }}</div>
        </dx-tooltip>
    </div>
</dx-tree-list>
import { Component } from "@angular/core";
import { DxTreeListModule, DxTooltipModule } from "devextreme-angular";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    standalone: true,
    imports: [DxTreeListModule, DxTooltipModule]
})
export class AppComponent {
    dataSource = [ /* ... */ ];
}
Vue
App.vue
<template>
    <DxTreeList :data-source="dataSource">
        <DxColumn
            data-field="description"
            caption="Description"
            cell-template="descriptionTemplate"
        />
        <template #descriptionTemplate="{ data: cell }">
            <div>
                <span :id="'cell_' + cell.rowIndex">{{ cell.value }}</span>
                <DxTooltip
                    :target="'#cell_' + cell.rowIndex"
                    show-event="mouseenter"
                    hide-event="mouseleave">
                    <template #content>{{ cell.value }}</template>
                </DxTooltip>
            </div>
        </template>
    </DxTreeList>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';
import { DxTooltip } from 'devextreme-vue/tooltip';

const dataSource = [ /* ... */ ];
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { TreeList, Column } from 'devextreme-react/tree-list';
import { Tooltip } from 'devextreme-react/tooltip';

const dataSource = [ /* ... */ ];

function DescriptionCell({ data }: { data: { value: string; rowIndex: number } }) {
    return (
        <div>
            <span id={`cell_${data.rowIndex}`}>{data.value}</span>
            <Tooltip
                target={`#cell_${data.rowIndex}`}
                showEvent="mouseenter"
                hideEvent="mouseleave">
                {data.value}
            </Tooltip>
        </div>
    );
}

export default function App() {
    return (
        <TreeList dataSource={dataSource}>
            <Column
                dataField="description"
                caption="Description"
                cellRender={(data) => <DescriptionCell data={data} />}
            />
        </TreeList>
    );
}

To add a tooltip to a header cell, use the headerCellTemplate property as described above.

You can replace "mouseenter" and "mouseleave" with other events such as "click", "dblclick", "focus", or "blur" to control when the Tooltip is displayed.