feat: support custom td class for each column

gitsindonesia · Sep 12, 2022 · 153a37b · 153a37b
1 parent 1733164
commit 153a37b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/packages/table/src/VDataTable.stories.ts b/packages/table/src/VDataTable.stories.ts
@@ -14,14 +14,20 @@ const headers = [
   {
     value: 'index',
     text: 'ID',
+    class: '',
+    tdClass: '',
   },
   {
     value: 'name',
     text: 'Name',
+    class: '',
+    tdClass: '',
   },
   {
     value: 'email',
     text: 'Email',
+    class: '',
+    tdClass: '',
   },
 ];
 
@@ -210,14 +216,15 @@ CustomClass.args = {
   columnInactiveClass: 'text-blue-50 hover:text-blue-200',
   hover: true,
   hoverClass: 'transition duration-300 hover:bg-blue-500 hover:text-white',
-  tdClass: 'group-hover:text-white',
+  tdClass: 'group-hover:text-white __GLOBAL_TD_CLASS__',
+  headers: headers.map((e, idx) => ({...e, class: `__CLASS_${idx}__`, tdClass: `__TD_HEAD_CLASS_${idx}__`, }))
 };
 CustomClass.parameters = {
   docs: {
     source: {
       code: `
 <v-data-table
-  :headers="headers"
+  :headers="${JSON.stringify(CustomClass.args.headers).replaceAll('"', "'")}"
   :items="items"
   header-class="bg-blue-600"
   body-class="bg-gray-100"

diff --git a/packages/table/src/VDataTable.vue b/packages/table/src/VDataTable.vue
@@ -512,7 +512,7 @@ const start = computed(() =>
               v-for="header in headers"
               :key="`header-${header.value}`"
               class="whitespace-nowrap text-sm text-gray-900"
-              :class="[getTdClass(header), paddingClass, tdClass]"
+              :class="[getTdClass(header), paddingClass, tdClass, header?.tdClass || '']"
             >
               <slot
                 v-if="selectable && header.value === 'selected'"

diff --git a/packages/table/src/types.ts b/packages/table/src/types.ts
@@ -11,6 +11,7 @@ export interface VDataTableHeader {
   align?: string;
   sortable?: false;
   class?: string;
+  tdClass?: string;
   [key: string]: any;
 }