NuxtUI UTable meta prop doesnt do anything

[lethal coyote]

Hi @rare elk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The meta prop in Nuxt UI's UTable is intended to pass an object (following the TableMeta interface from TanStack Table) that can be accessed anywhere the table instance is available via table.options.meta. However, according to the official documentation, the meta prop is not directly used for applying styles or classes to the table's DOM elements. Instead, it is a way to pass arbitrary data or configuration to the table logic, not for direct styling or DOM manipulation.

For styling table rows (tr), you should use the meta property inside the column definition or use the :ui prop to target specific elements. The documentation provides examples of using meta for columns, but not for the table root or rows globally. For example, to style a td or th, you would use the meta property inside a column definition, not the table's meta prop:

const columns = [
  {
    accessorKey: 'email',
    header: 'Email',
    meta: {
      class: {
        td: 'w-full'
      }
    }
  }
]

Table columns and meta usage

If you want to style all rows, you should use the :ui prop and target the tr element, for example:

<UTable
  :ui="{ tr: 'your-custom-class' }"
  ...
/>

Table UI prop

Summary:
The meta prop on <UTable> does not apply styles to the DOM. For row styling, use the :ui prop or column-level meta. The knowledge sources do not mention support for global row styling via the table-level meta prop, so your current usage will not have any effect on the rendered table rows.

If you need to pass custom data for use in cell rendering or logic, meta is appropriate, but not for styling the table's DOM directly.
UTable meta prop reference

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@rare elk Kapa.ai is still learning and improving, please let me know how I did by reacting below.