chore(Table): split preset for th and td

src/runtime/app.config.ts

@@ -9,8 +9,20 @@ const table = {
     base: '',
     selected: 'bg-gray-50 dark:bg-gray-800/50'
   },
-  th: 'px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white',
-  td: 'whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400',
+  th: {
+    base: '',
+    padding: 'px-3 py-3.5',
+    color: 'text-gray-900 dark:text-white',
+    font: 'font-semibold',
+    size: 'text-sm'
+  },
+  td: {
+    base: 'whitespace-nowrap',
+    padding: 'px-3 py-4',
+    color: 'text-gray-500 dark:text-gray-400',
+    font: '',
+    size: 'text-sm'
+  },
   default: {
     sortAscIcon: 'i-heroicons-bars-arrow-up-20-solid',
     sortDescIcon: 'i-heroicons-bars-arrow-down-20-solid',

src/runtime/components/data/Table.vue

@@ -7,7 +7,7 @@
             <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="selected = $event.target.checked ? rows : []" />
           </th>
 
-          <th v-for="(column, index) in columns" :key="index" scope="col" :class="ui.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]">
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
@@ -27,7 +27,7 @@
             <UCheckbox v-model="selected" :value="row" />
           </td>
 
-          <td v-for="(column, subIndex) in columns" :key="subIndex" :class="ui.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]">
             <slot :name="`${column.key}-data`" :column="column" :row="row">
               {{ row[column.key] }}
             </slot>