feat(Table): allow dynamically render checkbox (#2549)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/TableExampleAdvanced.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 // Columns
 const columns = [{
+  key: 'select',
+  class: 'w-2'
+}, {
   key: 'id',
   label: '#',
   sortable: true
@@ -20,6 +23,7 @@ const columns = [{
 
 const selectedColumns = ref(columns)
 const columnsTable = computed(() => columns.filter(column => selectedColumns.value.includes(column)))
+const excludeSelectColumn = computed(() => columns.filter(v => v.key !== 'select'))
 
 // Selected Rows
 const selectedRows = ref([])
@@ -153,7 +157,7 @@ const { data: todos, status } = await useLazyAsyncData<{
           </UButton>
         </UDropdown>
 
-        <USelectMenu v-model="selectedColumns" :options="columns" multiple>
+        <USelectMenu v-model="selectedColumns" :options="excludeSelectColumn" multiple>
           <UButton
             icon="i-heroicons-view-columns"
             color="gray"

docs/components/content/examples/TableExampleDynamicallyRenderSelectable.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+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'
+}, {
+  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'
+}, {
+  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'
+}]
+
+const selected = ref([people[1]])
+
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'User name'
+}, {
+  key: 'title',
+  label: 'Job position'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role'
+}, {
+  key: 'select',
+  class: 'w-2'
+}]
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" :columns="columns" />
+</template>

docs/content/2.components/table.md

@@ -285,6 +285,29 @@ componentProps:
 ---
 ::
 
+#### Single Select Mode
+Control how the select function allows only one row to be selected at a time.
+
+```vue
+<template>
+  <!-- Allow only one row to be selectable at a time -->
+  <UTable :single-select="true" />
+</template>
+```
+
+#### Checkbox Placement
+You can customize the checkbox column position by using the `select` key in the `columns` configuration.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-dynamically-render-selectable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
 ### Contextmenu
 
 Use the `contextmenu` listener on your Table to make the rows righ-clickable. The function will receive the original event as the first argument and the row as the second argument.
@@ -393,7 +416,6 @@ Controls whether multiple rows can be expanded simultaneously in the table.
   <!-- Or simply -->
   <UTable />
 </template>
-
 ```
 
 #### Disable Row Expansion
@@ -534,6 +556,82 @@ componentProps:
 ---
 ::
 
+### `select-header`
+This slot allows you to customize the checkbox appearance in the table header for selecting all rows at once while using feature [Selectable](#selectable).
+
+#### Usage
+```vue
+<template>
+  <UTable v-model="selectable"> 
+    <template #select-header="{ checked, change, indeterminate }">
+      <!-- Place your custom component here -->
+    </template>
+  </UTable>
+</template>
+```
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `checked` | `Boolean` | Indicates if all rows are selected |
+| `change` | `Function` | Function to handle selection state changes. Must receive a boolean value (true/false) |
+| `indeterminate` | `Boolean` | Indicates partial selection (when some rows are selected) |
+
+#### Example
+```vue
+<template>
+  <UTable>
+    <!-- Header checkbox customization -->
+    <template #select-header="{ indeterminate, checked, change }">
+      <input 
+        type="checkbox"
+        :indeterminate="indeterminate"
+        :checked="checked"
+        @change="e => change(e.target.checked)"
+      />
+    </template>
+  </UTable>
+</template>
+```
+
+### `select-data`
+This slot allows you to customize the checkbox appearance for each row in the table while using feature [Selectable](#selectable).
+
+#### Usage
+```vue
+<template>
+  <UTable v-model="selectable">
+    <template #select-data="{ checked, change }">
+      <!-- Place your custom component here -->
+    </template>
+  </UTable>
+</template>
+```
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `checked` | `Boolean` | Indicates if the current row is selected |
+| `change` | `Function` | Function to handle selection state changes. Must receive a boolean value (true/false) |
+
+#### Example
+```vue
+<template>
+  <UTable>
+    <!-- Row checkbox customization -->
+    <template #select-data="{ checked, change }">
+      <input 
+        type="checkbox"
+        :checked="checked"
+        @change="e => change(e.target.checked)"
+      />
+    </template>
+  </UTable>
+</template>
+```
+
 ### `expand-action`
 
 The `#expand-action` slot allows you to customize the expansion control interface for expandable table rows. This feature provides a flexible way to implement custom expand/collapse functionality while maintaining access to essential row data and state.

src/runtime/components/data/Table.vue

@@ -8,28 +8,27 @@
       </slot>
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
-          <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox
-              :model-value="isAllRowChecked"
-              :indeterminate="indeterminate"
-              v-bind="ui.default.checkbox"
-              aria-label="Select all"
-              @change="onChange"
-            />
-          </th>
-
           <th v-if="expand" scope="col" :class="ui.tr.base">
             <span class="sr-only">Expand</span>
           </th>
-
           <th
             v-for="(column, index) in columns"
             :key="index"
             scope="col"
-            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.key === 'select' && ui.checkbox.padding, column.class]"
             :aria-sort="getAriaSort(column)"
           >
-            <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
+            <slot v-if="!singleSelect && modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(index, 'select'))" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
+              <UCheckbox
+                :model-value="isAllRowChecked"
+                :indeterminate="indeterminate"
+                v-bind="ui.default.checkbox"
+                aria-label="Select all"
+                @change="onChange"
+              />
+            </slot>
+
+            <slot v-else :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
                 v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
@@ -77,16 +76,7 @@
 
         <template v-else>
           <template v-for="(row, index) in rows" :key="index">
-            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, ($attrs.onSelect || $attrs.onContextmenu) && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
+            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
-              <td v-if="modelValue" :class="ui.checkbox.padding">
-                <UCheckbox
-                  :model-value="isSelected(row)"
-                  v-bind="ui.default.checkbox"
-                  aria-label="Select row"
-                  @change="onChangeCheckbox($event, row)"
-                  @click.capture.stop="() => onSelect(row)"
-                />
-              </td>
               <td
                 v-if="expand"
                 :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
@@ -102,8 +92,25 @@
                   @click.capture.stop="toggleOpened(row)"
                 />
               </td>
-              <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class]">
+              <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
-                <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
+                <slot v-if="modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(subIndex, 'select')) " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
+                  <UCheckbox
+                    :model-value="isSelected(row)"
+                    v-bind="ui.default.checkbox"
+                    aria-label="Select row"
+                    @change="onChangeCheckbox($event, row)"
+                    @click.capture.stop="() => onSelect(row)"
+                  />
+                </slot>
+
+                <slot
+                  v-else
+                  :name="`${column.key}-data`"
+                  :column="column"
+                  :row="row"
+                  :index="index"
+                  :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)"
+                >
                   {{ getRowData(row, column.key) }}
                 </slot>
               </td>
@@ -130,6 +137,7 @@ import type { PropType, AriaAttributes } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { useVModel } from '@vueuse/core'
+import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
 import UProgress from '../elements/Progress.vue'
@@ -144,7 +152,7 @@ import { table } from '#ui/ui.config'
 const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)
 
 function defaultComparator<T>(a: T, z: T): boolean {
-  return JSON.stringify(a) === JSON.stringify(z)
+  return isEqual(a, z)
 }
 
 function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
@@ -159,6 +167,14 @@ function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
   }
 }
 
+function getStringifiedSet(arr: TableRow[]) {
+  return new Set(arr.map(item => JSON.stringify(item)))
+}
+
+function accessor<T extends Record<string, any>>(key: string) {
+  return (obj: T) => get(obj, key)
+}
+
 export default defineComponent({
   components: {
     UIcon,
@@ -247,6 +263,10 @@ export default defineComponent({
     multipleExpand: {
       type: Boolean,
       default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'update:sort', 'update:expand'],
@@ -292,8 +312,6 @@ export default defineComponent({
       }
     })
 
-    const getStringifiedSet = (arr: TableRow[]) => new Set(arr.map(item => JSON.stringify(item)))
-
     const totalRows = computed(() => props.rows.length)
 
     const countCheckedRow = computed(() => {
@@ -328,10 +346,6 @@ export default defineComponent({
       return props.by(a, z)
     }
 
-    function accessor<T extends Record<string, any>>(key: string) {
-      return (obj: T) => get(obj, key)
-    }
-
     function isSelected(row: TableRow) {
       if (!props.modelValue) {
         return false
@@ -397,7 +411,7 @@ export default defineComponent({
 
     function onChangeCheckbox(checked: boolean, row: TableRow) {
       if (checked) {
-        selected.value.push(row)
+        selected.value = props.singleSelect ? [row] : [...selected.value, row]
       } else {
         const index = selected.value.findIndex(item => compare(item, row))
         selected.value.splice(index, 1)
@@ -412,6 +426,13 @@ export default defineComponent({
       return expand.value?.openedRows ? expand.value.openedRows.some(openedRow => compare(openedRow, row)) : false
     }
 
+    function shouldRenderColumnInFirstPlace(index: number, key: string) {
+      if (!props.columns) {
+        return index === 0
+      }
+      return index === 0 && !props.columns.find(col => col.key === key)
+    }
+
     function toggleOpened(row: TableRow) {
       expand.value = {
         openedRows: isExpanded(row) ? expand.value.openedRows.filter(v => !compare(v, row)) : props.multipleExpand ? [...expand.value.openedRows, row] : [row],
@@ -465,7 +486,8 @@ export default defineComponent({
       getRowData,
       toggleOpened,
       getAriaSort,
-      isExpanded
+      isExpanded,
+      shouldRenderColumnInFirstPlace
     }
   }
 })