UTable: How to display the cell value if its column header contains a dot (".")?

[jerryfromearth]

Description

Hi, first of all thanks for the great library! I have a (maybe stupid) question:

<template>
    <UTable :rows="data2"></UTable>
</template>
<script setup>
const data2 = [{ 'na.me': 'John' }];
</script>

The cell value (John) is not seen in the output. Is there any way to make sure the cell value can be seen? Thanks in advance.

Full playground: https://stackblitz.com/edit/nuxt-ui-vhvpqr?file=app.vue

[MuhammadKhizar7]

Use columns to make it work, like

<template>
    <UTable :rows="data2" :columns="col"></UTable>
</template>
<script setup>
const data2 = [{ 'na.me': 'John' }];
const col = [{ key: 'na.me', label: 'Name' }];
</script>

[jerryfromearth]

Use columns to make it work, like

<template>
    <UTable :rows="data2" :columns="col"></UTable>
</template>
<script setup>
const data2 = [{ 'na.me': 'John' }];
const col = [{ key: 'na.me', label: 'Name' }];
</script>

Thanks @MuhammadKhizar7 . Unfortunately it is the same result ("John" isn't displayed in the table cell): https://stackblitz.com/edit/nuxt-ui-vhvpqr?file=app.vue

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.