tidy up

src/components/ui/data-table/DataTableLayout.vue

@@ -6,7 +6,7 @@
 
         <div class="rounded-md border">
             <div v-loading="loading" class="overflow-auto" :style="tableStyle">
-                <Table class="table-fixed">
+                <Table :class="tableClassValue" :style="tableElementStyle">
                     <TableHeader>
                         <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                             <TableHead
@@ -119,6 +119,14 @@
             type: Object,
             required: true
         },
+        tableClass: {
+            type: [String, Array],
+            default: null
+        },
+        useTableMinWidth: {
+            type: Boolean,
+            default: false
+        },
         tableStyle: {
             type: Object,
             default: null
@@ -184,6 +192,15 @@
             .filter(Boolean)
             .join(' ');
 
+    const tableClassValue = computed(() => joinClasses('table-fixed', props.tableClass));
+
+    const tableElementStyle = computed(() => {
+        if (!props.useTableMinWidth) return undefined;
+        const size = props.table?.getTotalSize?.();
+        if (!Number.isFinite(size) || size <= 0) return undefined;
+        return { minWidth: `${size}px` };
+    });
+
     const resolveClassValue = (value, ctx) => {
         if (typeof value === 'function') {
             return value(ctx);

src/components/ui/table/Table.vue

@@ -2,7 +2,8 @@
     import { cn } from '@/lib/utils';
 
     const props = defineProps({
-        class: { type: null, required: false }
+        class: { type: null, required: false },
+        style: { type: [String, Array, Object], required: false }
     });
 </script>
 
@@ -10,7 +11,8 @@
     <div data-slot="table-container" class="relative w-full">
         <table
             data-slot="table"
-            :class="cn('w-full caption-bottom text-[13px] in-[.is-compact-table]:text-[12px]', props.class)">
+            :class="cn('w-full caption-bottom text-[13px] in-[.is-compact-table]:text-[12px]', props.class)"
+            :style="props.style">
             <slot />
         </table>
     </div>