feat: add new props: rowClass and itemClass

gitsindonesia · Oct 24, 2023 · 46376e9 · 46376e9
1 parent 6a8072c
commit 46376e9
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/packages/table/src/VDataTable.stories.ts b/packages/table/src/VDataTable.stories.ts
@@ -472,6 +472,36 @@ export const RowColors: StoryFn<typeof VDataTable> = (args) => ({
 `,
 });
 
+export const RowClass: StoryFn<typeof VDataTable> = (args) => ({
+  components: { VDataTable },
+  setup() {
+    return { args };
+  },
+  template: `
+  <VDataTable
+    v-bind="args"
+    :row-class="(item, index) => {
+      return index % 2 === 0 ? 'v-table-tr--primary' : 'v-table-tr--success'
+    }"
+  />
+`,
+});
+
+export const ItemClass: StoryFn<typeof VDataTable> = (args) => ({
+  components: { VDataTable },
+  setup() {
+    return { args };
+  },
+  template: `
+  <VDataTable
+    v-bind="args"
+    :item-class="(item, index) => {
+      return index % 2 === 0 ? 'v-table-tr--error' : 'v-table-tr--warning'
+    }"
+  />
+`,
+});
+
 export const ItemSlot: StoryFn<typeof VDataTable> = (args) => ({
   components: { VDataTable },
   setup() {

diff --git a/packages/table/src/VDataTable.vue b/packages/table/src/VDataTable.vue
@@ -61,6 +61,8 @@ const props = withDefaults(
     bordered?: boolean;
     tile?: boolean;
     multiSort?: boolean;
+    rowClass?: (item: T, index: number) => string;
+    itemClass?: (item: T, index: number) => string;
   }>(),
   {
     modelValue: () => [] as T[],
@@ -625,11 +627,15 @@ defineSlots<
               >
                 <tr
                   class="group v-table-tr"
-                  :class="{
-                    [stripedClass]: striped,
-                    [hoverClass]: hover,
-                    [trClass]: Boolean(trClass),
-                  }"
+                  :class="[
+                    {
+                      [stripedClass]: striped,
+                      [hoverClass]: hover,
+                      [trClass]: Boolean(trClass),
+                    },
+                    index % 2 === 0 ? 'v-table-tr--even' : 'v-table-tr--odd',
+                    rowClass?.(item, index),
+                  ]"
                   @click="handleRowClick(item, index)"
                 >
                   <td
@@ -640,6 +646,7 @@ defineSlots<
                       getTdClass(header),
                       tdClass,
                       header?.tdClass || '',
+                      itemClass?.(item, index),
                     ]"
                   >
                     <slot