Html – How to change displayed names for specific values in a DevExtreme DataGrid column in Angular?

I’m working on an Angular application that utilizes DevExtreme components, and I’ve encountered an issue with customizing the display of data in a DataGrid component. I have a column named "Type" that displays codes from a database, such as YPT, QRT, and QRI. Instead of directly displaying these codes, I would like the column to display user-friendly names.
Specifically, instead of QRT I want to display "tests", and instead of QRI – "reports". The rest of the codes can be displayed as is.
Here’s a snippet of my code related to the column:

<dxi-column dataField="Type"
            caption="Type"
            [allowEditing]="true">
</dxi-column>

I tried using cellTemplate to achieve this goal but am having difficulty implementing the conditional logic to change the text displayed in the cell. Could someone show me how to properly implement this functionality in Angular using DevExtreme?

Thank you for any help!

I tried:

<dxi-column dataField="IsCompleted"
            caption="Status"
            [allowEditing]="false"
            [lookup]="{
        dataSource: [{ id: 0, text: 'Nie ukończone' },
                     { id: 1, text: 'Zapisane - nie wysłane' },
                     { id: 2, text: 'Ukończone - wysłane' }],
        valueExpr: 'id',
        displayExpr: 'text'
    }">
</dxi-column>