Table<unknown> after updating to 3.1.0?

[schillerenrico]

Description

Table is now of type unknown after updating to 3.1.0 - worked before in 3.0.x
Did I miss anything?

 const table = useTemplateRef("table"); 
 const selectedRowsMapPositions = computed(() =>
    table.value?.tableApi
      ?.getFilteredSelectedRowModel()
      .rows.map((row) => row.original?.id)
      .filter(Boolean)
  );

[benjamincanac]

@schillerenrico I think this is the same issue as the one you created already (#3980). Would you mind providing a reproduction? I don't the issue myself.

[schillerenrico]

@benjamincanac Sure, using the examples from the nuxt ui docs and some extra functions the ide is not getting the right type.
row is of type any or unknown instead of Payment.

https://codesandbox.io/p/devbox/strange-buck-dz55vr

[zguig52]

@schillerenrico and @benjamincanac , I had also same both issues when I tried to upgrade a project yesterday.

I first though I broke type inference with my change. I was suspecting this line:
const data = ref(props.data ?? []) as Ref<T[]>

But when I checked the nuxt ui playground directly I saw that I did not had this problem so I just roll-back due to lack of time.
@schillerenrico, when using your code in that playground of nuxt ui, there is no issue.

When searching for issues, I saw that typescript build files has changed and are no more in the same file. There might be something that nuxt clean and so do not fix.

There might be something to clear and restart typescript analysis required? I did not had such quick fix for the issue #3980.

Before upgrade:

After upgrade:

==> All types are removed and there is a new file specific with typescript stuff (ex: defineSlots)

[clopezpro]

I have the same type error when updating

[alexi190]

How to resolve this? npm update do not fix it.

[patriktoth67]

The example in the docs found here has this issue as well for easier reproduction:
https://ui.nuxt.com/components/table#with-slots

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

interface User {
  id: number
  name: string
  position: string
  email: string
  role: string
}

const toast = useToast()

const data = ref<User[]>([
  {
    id: 1,
    name: 'Lindsay Walton',
    position: 'Front-end Developer',
    email: 'lindsay.walton@example.com',
    role: 'Member'
  },
  {
    id: 2,
    name: 'Courtney Henry',
    position: 'Designer',
    email: 'courtney.henry@example.com',
    role: 'Admin'
  },
  {
    id: 3,
    name: 'Tom Cook',
    position: 'Director of Product',
    email: 'tom.cook@example.com',
    role: 'Member'
  },
  {
    id: 4,
    name: 'Whitney Francis',
    position: 'Copywriter',
    email: 'whitney.francis@example.com',
    role: 'Admin'
  },
  {
    id: 5,
    name: 'Leonard Krasner',
    position: 'Senior Designer',
    email: 'leonard.krasner@example.com',
    role: 'Owner'
  },
  {
    id: 6,
    name: 'Floyd Miles',
    position: 'Principal Designer',
    email: 'floyd.miles@example.com',
    role: 'Member'
  }
])

const columns: TableColumn<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID'
  },
  {
    accessorKey: 'name',
    header: 'Name'
  },
  {
    accessorKey: 'email',
    header: 'Email'
  },
  {
    accessorKey: 'role',
    header: 'Role'
  },
  {
    id: 'action'
  }
]

function getDropdownActions(user: User): DropdownMenuItem[][] {
  return [
    [
      {
        label: 'Copy user Id',
        icon: 'i-lucide-copy',
        onSelect: () => {
          navigator.clipboard.writeText(user.id.toString())
          toast.add({
            title: 'User ID copied to clipboard!',
            color: 'success',
            icon: 'i-lucide-circle-check'
          })
        }
      }
    ],
    [
      {
        label: 'Edit',
        icon: 'i-lucide-edit'
      },
      {
        label: 'Delete',
        icon: 'i-lucide-trash',
        color: 'error'
      }
    ]
  ]
}
</script>

<template>
  <UTable :data="data" :columns="columns" class="flex-1">
    <template #name-cell="{ row }">
      <div class="flex items-center gap-3">
        <UAvatar
          :src="`https://i.pravatar.cc/120?img=${row.original.id}`"
          size="lg"
          :alt="`${row.original.name} avatar`"
        />
        <div>
          <p class="font-medium text-highlighted">
            {{ row.original.name }}
          </p>
          <p>
            {{ row.original.position }}
          </p>
        </div>
      </div>
    </template>
    <template #action-cell="{ row }">
      <UDropdownMenu :items="getDropdownActions(row.original)">
        <UButton
          icon="i-lucide-ellipsis-vertical"
          color="neutral"
          variant="ghost"
          aria-label="Actions"
        />
      </UDropdownMenu>
    </template>
  </UTable>
</template>

[carlos-duran]

3.1.0 broke the typings of all my tables where I use row.original because inside the template it shows Row<unknown>.

I hope this can be fixed soon. Thanks

[Aietes]

Confirming the issue. I think it's caused by this line from the reactivity update.

6e27304#diff-b7fa789489c8c59a3f5b6fe1ae3dc8b57ba36a45fb99f9db8f4b598aa377a5cdR204

[UfukUstali]

i don't think this is an issue with just the table, all of the generic nuxt ui components are broken in my code base after the update

              <UCarousel
                :items="f.state.value"
                //               ^? string[]
                v-slot="{ item }"
                //         ^? before string after AcceptableValue which is an internal type of nuxt ui
              >

  <UAccordion
    :items="tags.data.value!"
    //                  ^? (AccordionItem & { total: number; customContent: { id: number; name: string; total: number }[]; })[]
  >
    <template #default="{ item }">
    //                     ^? before AccordionItem & { total: number; customContent: { id: number; name: string; total: number }[]; } after AccordionItem
      <span class="text-(--ui-primary)">
        {{ item.label }}
      </span>
    </template>