[Table] Support for slots in templates

[hywax]

For what version of Nuxt UI are you asking this question?

v3-alpha

Description

@benjamincanac Hi, will there be support for the same slots in v3 table as in v2? Passing render functions is very inconvenient, I want api like in v2.

Just yesterday you made a table #2364 , but you added slots only in render

[miguelrk]

Following up on this, I'm wondering if <script setup lang="tsx"> would work?

This would avoid the less-convenient DX of h() render functions. For instance, would this work?

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

const data = ref([...])

const columns: TableColumn[] = [
  {
    accessorKey: 'id',
    header: 'ID',
    cell: ({ row }) => (
      <div>
        {row.getValue('id')}
      </div>
    )
  },
  {
    accessorKey: 'date',
    header: 'Date',
    cell: ({ row }) => (
      <div>
        {row.getValue('date')}
      </div>
    )
  },
]
</script>

<template>
  <UTable :data="data" :columns="columns"/>
</template>

This would be great for the DX, but in general, the ability to also pass render functions is great IMO, especially if TSX can be used out of the box.

[benjamincanac]

@miguelrk Just tried it and it works 😊