I was invited to "Start your project using the nuxt/starter#ui template with Nuxt UI pre-configured." (from https://ui.nuxt.com/getting-started/installation/nuxt). I did that, and found myself using Nuxt-UI V3.x. Lots of changes, of course, but everything seemed good until I crashed head-on into this problem.

I should have noticed that a whole page of examples for Table had no row styles.

Thanks for your work and do know that row style is critical for every app I've ever written that uses tables.

I updated to Nuxt/UI 3.1.0 and read the table documentation which says:

Use the meta prop as an object (TableMeta) to pass properties like:

class:
tr: The classes to apply to the tr element.

The tanstack doc didn't help either.

I was unable to get anything working. Could someone add a working example to the table component doc? Preferably this would include data-dependent styling like "all rows with column A = bad get pink background".

Thanks again.

I tired Nuxt UI 3.1.0 and I confirm that the the feature works.

Here is a code snippet showing what add to UTable to, for instance, conditionally apply the bg-red-500 class to rows that have data.value > 10.

<template>
  <!-- 1. Provide "tableMeta" to UTable -->
  <UTable
    :columns="columns"
    :data="rows"
    :meta="tableMeta"
  >
  <!-- ... -->
  </UTable>
</template>

<script setup lang="ts">
import type { TableRow } from "@nuxt/ui";

// 2. Use "tableMeta" to customize table's tr
const tableMeta = {
  class: {
    tr: (row: TableRow<{ value: number }>) => {
      return row.original.value > 10 ? "bg-red-500" : "";
    },
  },
};

</script>

Thanks. Will try it tomorrow morning.