feat(Table): column resizing

docs/app/components/content/examples/table/TableResizingExample.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+interface User {
+  id: number
+  name: string
+  position: string
+  email: string
+  role: string
+}
+
+const data = ref<User[]>([{
+  id: 1,
+  name: 'Lindsay Walton',
+  position: 'Front-end Developer',
+  email: '[email protected]',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  position: 'Designer',
+  email: '[email protected]',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  position: 'Director of Product',
+  email: '[email protected]',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  position: 'Copywriter',
+  email: '[email protected]',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  position: 'Senior Designer',
+  email: '[email protected]',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  position: 'Principal Designer',
+  email: '[email protected]',
+  role: 'Member'
+}])
+
+const columns: TableColumn<User>[] = [{
+  accessorKey: 'id',
+  header: 'ID',
+  minSize: 200,
+  size: 300,
+  maxSize: 500
+}, {
+  accessorKey: 'name',
+  header: 'Name',
+  maxSize: 200
+}, {
+  accessorKey: 'email',
+  header: 'Email',
+  minSize: 225
+}, {
+  accessorKey: 'role',
+  header: 'Role'
+}, {
+  id: 'action'
+}]
+</script>
+
+<template>
+  <UTable :data="data" :columns="columns" :column-sizing-options="{ enableColumnResizing: true }" class="flex-1" sticky />
+</template>

docs/content/3.components/table.md

@@ -523,6 +523,21 @@ class: '!p-0'
 ---
 ::
 
+### With resizable columns
+
+You can make the columns resizable by setting the `enableColumnResizing` prop.
+
+Use the `enableResizing` field on the column to allow resizing for specific columns.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-resizing-example'
+class: '!p-0'
+---
+::
+
 ## API
 
 ### Props

playground/app/pages/components/table.vue

@@ -158,11 +158,13 @@ const columns: TableColumn<Payment>[] = [{
     'aria-label': 'Select row'
   }),
   enableSorting: false,
-  enableHiding: false
+  enableHiding: false,
+  enableResizing: false
 }, {
   accessorKey: 'id',
   header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
+  cell: ({ row }) => `#${row.getValue('id')}`,
+  enableResizing: false
 }, {
   accessorKey: 'date',
   header: 'Date',
@@ -192,7 +194,8 @@ const columns: TableColumn<Payment>[] = [{
     })[row.getValue('status') as string]
 
     return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
+  },
+  maxSize: 200
 }, {
   accessorKey: 'email',
   header: ({ column }) => {
@@ -279,6 +282,8 @@ const pagination = ref({
   pageSize: 10
 })
 
+const resizeMode = ref<'fit' | 'expand'>('fit')
+
 function addElement() {
   data.value.unshift({
     id: currentID.value.toString(),
@@ -318,6 +323,8 @@ onMounted(() => {
       <UButton color="neutral" label="Randomize" @click="randomize" />
       <UButton color="neutral" label="Add element" @click="addElement" />
 
+      <USelect v-model="resizeMode" class="min-w-[100px]" :items="['fit', 'expand']" />
+
       <UDropdownMenu
         :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
@@ -355,6 +362,11 @@ onMounted(() => {
       :ui="{
         tr: 'divide-x divide-default'
       }"
+      :column-sizing-options="{
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange'
+      }"
+      :resize-mode="resizeMode"
       sticky
       class="border border-accented rounded-sm"
       @select="onSelect"

src/runtime/components/Table.vue

@@ -164,6 +164,12 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
    */
   facetedOptions?: FacetedOptions<T>
+  /**
+   * Whether the table should fit its container's width or expand it when resizing the columns.
+   *
+   * @defaultValue 'fit'
+   */
+  resizeMode?: 'fit' | 'expand'
   onSelect?: (row: TableRow<T>, e?: Event) => void
   class?: any
   ui?: Table['slots']
@@ -192,6 +198,7 @@ import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 
 const props = withDefaults(defineProps<TableProps<T>>(), {
+  resizeMode: 'expand',
   watchOptions: () => ({
     deep: true
   })
@@ -209,7 +216,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.table || {})
   sticky: props.sticky,
   loading: props.loading,
   loadingColor: props.loadingColor,
-  loadingAnimation: props.loadingAnimation
+  loadingAnimation: props.loadingAnimation,
+  resizable: props.columnSizingOptions?.enableColumnResizing
 }))
 
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
@@ -325,6 +333,34 @@ function handleRowSelect(row: TableRow<T>, e: Event) {
   props.onSelect(row, e)
 }
 
+const tableStyle = computed(() => {
+  return props.columnSizingOptions?.enableColumnResizing && props.resizeMode === 'expand'
+    ? {
+        width: `${tableApi.getTotalSize()}px`
+      }
+    : undefined
+})
+
+function getHeaderStyle(header: Header<T, unknown>) {
+  return props.columnSizingOptions?.enableColumnResizing ? { width: `${header.getSize()}px` } : undefined
+}
+
+function getResizeHandleStyle(header: Header<T, unknown>) {
+  return {
+    transform: props.columnSizingOptions?.columnResizeMode === 'onEnd'
+      && header.column.getIsResizing()
+      ? `translateX(${
+        (props.columnSizingOptions.columnResizeDirection
+          === 'rtl'
+          ? -1
+          : 1)
+        * (tableApi.getState().columnSizingInfo
+          .deltaOffset ?? 0)
+      }px)`
+      : undefined
+  }
+}
+
 watch(
   () => props.data, () => {
     data.value = props.data ? [...props.data] : []
@@ -339,7 +375,11 @@ defineExpose({
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
+    <table
+      ref="tableRef"
+      :class="ui.base({ class: [props.ui?.base] })"
+      :style="tableStyle"
+    >
       <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
           {{ caption }}
@@ -360,10 +400,20 @@ defineExpose({
               ],
               pinned: !!header.column.getIsPinned()
             })"
+            :style="getHeaderStyle(header)"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
             </slot>
+            <div
+              v-if="columnSizingOptions?.enableColumnResizing && header.column.getCanResize()"
+              :class="ui.resizeHandle({ class: props.ui?.resizeHandle })"
+              :aria-controls="header.id"
+              :style="getResizeHandleStyle(header)"
+              @doubleclick="header.column.resetSize"
+              @mousedown="header.getResizeHandler()($event)"
+              @touchstart="header.getResizeHandler()($event)"
+            />
           </th>
         </tr>
       </thead>

src/theme/table.ts

@@ -5,13 +5,14 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative overflow-auto',
     base: 'min-w-full overflow-clip',
     caption: 'sr-only',
-    thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)',
+    thead: 'relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-(--ui-border-accented) before:z-1',
     tbody: 'divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary',
     tr: 'data-[selected=true]:bg-elevated/50',
     th: 'px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
     td: 'p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0',
     empty: 'py-6 text-center text-sm text-muted',
-    loading: 'py-6 text-center'
+    loading: 'py-6 text-center',
+    resizeHandle: 'select-none cursor-ew-resize absolute top-0 bottom-0 bg-primary w-1 right-0 '
   },
   variants: {
     pinned: {
@@ -27,7 +28,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     loading: {
       true: {
-        thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px'
+        thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px after:z-1'
       }
     },
     loadingAnimation: {
@@ -39,6 +40,11 @@ export default (options: Required<ModuleOptions>) => ({
     loadingColor: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       neutral: ''
+    },
+    resizable: {
+      true: {
+        th: 'relative'
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((loadingColor: string) => ({