feat(Table): improve expanded row (#2485)

docs/components/content/examples/TableExampleDisabledExpandable.vue

@@ -0,0 +1,75 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin',
+  disabledExpand: true
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin',
+  disabledExpand: true
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member',
+  disabledExpand: true
+}]
+const columns = [
+  {
+    label: 'Name',
+    key: 'name'
+  },
+  {
+    label: 'title',
+    key: 'title'
+  },
+  {
+    label: 'Email',
+    key: 'email'
+  },
+  {
+    label: 'role',
+    key: 'role'
+  }
+]
+
+const expand = ref({
+  openedRows: [],
+  row: null
+})
+</script>
+
+<template>
+  <UTable v-model:expand="expand" :rows="people" :columns="columns">
+    <template #expand="{ row }">
+      <div class="p-4">
+        <pre>{{ row }}</pre>
+      </div>
+    </template>
+  </UTable>
+</template>

docs/components/content/examples/TableExampleExpandActionSlot.vue

@@ -0,0 +1,65 @@
+<script setup lang='ts'>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member',
+  hasExpand: false
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin',
+  hasExpand: true
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member',
+  hasExpand: false
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin',
+  hasExpand: true
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner',
+  hasExpand: false
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member',
+  hasExpand: true
+}]
+
+const expand = ref({
+  openedRows: [people.find(v => v.hasExpand)],
+  row: {}
+})
+</script>
+
+<template>
+  <UTable v-model:expand="expand" :rows="people">
+    <template #expand="{ row }">
+      <div class="p-4">
+        <pre>{{ row }}</pre>
+      </div>
+    </template>
+    <template #expand-action="{ row, isExpanded, toggle }">
+      <UButton v-if="row.hasExpand" @click="toggle">
+        {{ isExpanded ? 'collapse' : 'expand' }}
+      </UButton>
+    </template>
+  </UTable>
+</template>

docs/components/content/examples/TableExampleExpandable.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang='ts'>
 const people = [{
   id: 1,
   name: 'Lindsay Walton',
@@ -36,10 +36,15 @@ const people = [{
   email: 'floyd.miles@example.com',
   role: 'Member'
 }]
+
+const expand = ref({
+  openedRows: [people[0]],
+  row: {}
+})
 </script>
 
 <template>
-  <UTable :rows="people">
+  <UTable v-model:expand="expand" :rows="people">
     <template #expand="{ row }">
       <div class="p-4">
         <pre>{{ row }}</pre>