JavaScript/jQuery CardView - HeaderPanel

$(#dxCardView).dxCardView({
    // ...
    headerPanel: {
        itemTemplate(data) {
            return $('<div>').text(`${data.column.visibleIndex+1}: ${data.column.caption}`);
        },
    }
})

<dx-card-view ... >
    <dxo-card-view-header-panel
        itemTemplate="headerItemTemplate"
    ></dxo-card-view-header-panel>
    <div *dxTemplate="let data of 'headerItemTemplate'">
        <div>{{ data.column.visibleIndex+1 }}: {{ data.column.caption }}</div>
    </div>
</dx-card-view>

<template>
    <DxCardView ... >
        <DxHeaderPanel
            item-template="headerItemTemplate"
        />
        <template #headerItemTemplate="{ data }">
            <div>
                <div>{{ data.column.visibleIndex+1 }}: {{ data.column.caption }}</div>
            </div>
        </template>
    </DxCardView>
</template>

import CardView, { CardViewTypes, HeaderPanel } from "devextreme-react/card-view"

function headerItemRender(data: CardViewTypes.ColumnTemplateData) {
    return (
        <div>
            <div>{`${data.column.visibleIndex+1}: ${data.column.caption}`}</div>
        </div>
    )
}

// ...
function App() {
    return (
        <CardView ... >
            <HeaderPanel
                itemRender={headerItemRender}
            />
        </CardView>
    )
}