[Table] New generic slots.

[caiotarifa]

Description

Currently, we have slots named <column>-header and <column>-data. However, in some scenarios, it may be necessary to intercept all cells, regardless of the column name.

It would be beneficial to introduce generic header and data slots.

<UTable>
  <template #data="{ row }">
    Now, all data cells are equal.
  </template>
</UTable>

Additional context

No response

[migro1982]

I'm also looking for a way to manipulate the header because I would like to display icons there

[caiotarifa]

I'm also looking for a way to manipulate the header because I would like to display icons there

@migro1982 you can do something like this.

It's not as obvious as proposed in the issue, but it solves the problem.

<template
  v-for="header in headers"
  :key="header.key"
  #[`${header.key}-header`]="{ column }"
>
  Slot of "{{ column }}"
</template>

[Nyantekyi]

This would be so helpful... this is my current set up

<script setup lang="ts">
import { z } from "zod";
import type { FormError, FormSubmitEvent } from "#ui/types";
const formtype = z.object({
  name: z.string(),
  title: z.string(),
  email: z.string().email(),
  role: z.string(),
});

const datatype = z.object({
  id: z.number(),
  name: z.string(),
  title: z.string(),
  email: z.string().email(),
  role: z.string(),
});
type dataschema = z.output<typeof datatype>;

const people = reactive<dataschema[]>([
  {
    id: 1,
    name: "Lindsay Walton",
    title: "Front-end Developer",
    email: "[email protected]",
    role: "Member",
  },
  {
    id: 2,
    name: "Courtney Henry",
    title: "Designer",
    email: "[email protected]",
    role: "Admin",
  },
  {
    id: 3,
    name: "Tom Cook",
    title: "Director of Product",
    email: "[email protected]",
    role: "Member",
  },
  {
    id: 4,
    name: "Whitney Francis",
    title: "Copywriter",
    email: "[email protected]",
    role: "Admin",
  },
  {
    id: 5,
    name: "Leonard Krasner",
    title: "Senior Designer",
    email: "[email protected]",
    role: "Owner",
  },
]);
const edit = ref<boolean>(false);
const editIndex = ref<number>();
function select(row: dataschema) {
  edit.value = true;
  editIndex.value = row.id;
}

// const selected = ref([people[1]]);
</script>

<template>
  <UTable :rows="people" @select="select">
    <template #name-data="{ row }">
      <div class="flex items-center">
        <!-- Create a uinput that only shows when editindex is row.id else show row content -->

        <UInput v-if="editIndex === row.id" v-model="row.name" :state="row.name" />
        <span v-else>{{ row.name }}</span>
      </div>
    </template>
    <template #title-data="{ row }">
      <div class="flex items-center">
        <UInput v-if="editIndex === row.id" v-model="row.title" :state="row.title" />
        <span v-else>{{ row.title }}</span>
      </div>
    </template>
    <template #email-data="{ row }">
      <div class="flex items-center">
        <UForm :schema="datatype" :state="row">
          <UFormGroup name="email">
            <UInput v-if="editIndex === row.id" v-model="row.email" />
            <span v-else>{{ row.email }}</span>
          </UFormGroup>
        </UForm>
        <!-- <UInput v-if="editIndex === row.id" v-model="row.email" :state="row.email" /> -->
      </div>
    </template>

    <template #role-data="{ row }">
      <div class="flex items-center">
        <USelect
          v-if="editIndex === row.id"
          v-model="row.role"
          :state="row.role"
          :options="[
            { value: 'Admin', label: 'Admin' },
            { value: 'Member', label: 'Member' },
            { value: 'Owner', label: 'Owner' },
          ]"
        />
        <span v-else>{{ row.role }}</span>
      </div>
    </template>
  </UTable>
</template>

I would really prefer it if I could indicate a condition for when the row is selected and present the complete form with validation else default to the table data... This is my implementation of utable with form input

[Nyantekyi]

@benjamincanac
An I deal situation for me is something similar to what primevue did here
https://tailwind.primevue.org/datatable/#cell_edit

[benjamincanac]

@Nyantekyi I'll keep this in mind when building the Table component for v3 😊

[benjamincanac]

Duplicate #818.

[caiotarifa]

Reading the issue you commented above, it doesn't seem to be the same topic. Anyway, I hope it's available in #2139.

[benjamincanac]

@caiotarifa It's implicit, all components in Nuxt UI v3 implement generics 😊