Nuxt expandeable after docs it's not updated | Nuxt | Page 1

#

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

#

You're right that the documentation for expandable rows in the Nuxt UI Table component might be confusing. Let me help clarify how to implement expandable rows based on the knowledge sources.

Looking at the example from the documentation, I can see that there are a few key elements needed to make expandable rows work:

You need to add an "expand" column with a button that toggles the row expansion
You need to define an #expanded slot to render the expanded content
You need to use v-model:expanded to control the expandable state

Here's a working example based on the documentation:

<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@nuxt/ui'

const UButton = resolveComponent('UButton')
const UBadge = resolveComponent('UBadge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: '[email protected]',
    amount: 594
  },
  // ... other data items
])

const columns: TableColumn<Payment>[] = [
  {
    id: 'expand',
    cell: ({ row }) =>
      h(UButton, {
        color: 'neutral',
        variant: 'ghost',
        icon: 'i-lucide-chevron-down',
        square: true,
        ui: {
          leadingIcon: [
            'transition-transform',
            row.getIsExpanded() ? 'duration-200 rotate-180' : ''
          ]
        },
        onClick: () => row.toggleExpanded()
      })
  },
  // ... other columns
]

// This is the key part that was missing - you need to initialize the expanded state
const expanded = ref({ 1: true }) // This will expand the row with index 1 by default
</script>

#

<template>
<UTable
v-model:expanded="expanded"
:data="data"
:columns="columns"
:ui="{ tr: 'data-[expanded=true]:bg-(--ui-bg-elevated)/50' }"
class="flex-1"

<template #expanded="{ row }">
  <pre>{{ row.original }}</pre>
</template>

</UTable>
</template>


The key part that might be missing from your implementation is the `expanded` ref that needs to be initialized and bound to the table with `v-model:expanded`. This ref controls which rows are expanded.

The format of the `expanded` object is a map where the keys are row indices and the values are booleans indicating whether the row is expanded. For example, `{ 1: true }` means the row with index 1 is expanded.

You can also see in the example that the UI configuration includes a special style for expanded rows: `:ui="{ tr: 'data-[expanded=true]:bg-(--ui-bg-elevated)/50' }"`, which changes the background color of expanded rows.

[Table Component Documentation](<https://ui.nuxt.com/components/table#with-row-actions>) provides more examples of how to use the Table component with various features.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

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

#Nuxt expandeable after docs it's not updated