feat: added striped-columns

src/components/Table/Table.vue

@@ -13,6 +13,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  stripedColumns: {
+    type: Boolean,
+    default: false,
+  },
   hoverable: {
     type: Boolean,
     default: false,
@@ -21,4 +25,5 @@ const props = defineProps({
 
 provide('striped', props.striped)
 provide('hoverable', props.hoverable)
+provide('stripedColumns', props.stripedColumns)
 </script>

src/components/Table/TableCell.vue

@@ -1,7 +1,11 @@
 <template>
-  <td class="px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right">
+  <td :class="tableCellClasses">
     <slot></slot>
   </td>
 </template>
 <script lang="ts" setup>
+
+import { useTableCellClasses } from '@/components/Table/composables/useTableCellClasses'
+
+const { tableCellClasses } = useTableCellClasses()
 </script>

src/components/Table/TableHeadCell.vue

@@ -1,7 +1,10 @@
 <template>
-  <th scope="col" class="px-6 py-3">
+  <th scope="col" :class="tableHeadCellClasses">
     <slot></slot>
   </th>
 </template>
 <script lang="ts" setup>
+import { useTableHeadCellClasses } from '@/components/Table/composables/useTableHeadCellClasses'
+
+const { tableHeadCellClasses } = useTableHeadCellClasses()
 </script>

src/components/Table/TableRow.vue

@@ -4,7 +4,7 @@
   </tr>
 </template>
 <script lang="ts" setup>
-import { useTableRowClasses } from '@/components/Table/composables/tableRowClasses'
+import { useTableRowClasses } from '@/components/Table/composables/useTableRowClasses'
 
 const { tableRowClasses } = useTableRowClasses()
 </script>

src/components/Table/composables/useTableCellClasses.ts

@@ -0,0 +1,20 @@
+import { computed, inject } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+
+const baseClasses = 'px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right'
+const stripedCellClasses = 'even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
+
+export function useTableCellClasses(): { tableCellClasses: Ref<string> } {
+  const isColumnsStriped = inject('stripedColumns')
+
+  const tableCellClasses = computed(() => {
+    return classNames(baseClasses, {
+      [stripedCellClasses]: isColumnsStriped,
+    })
+  })
+
+  return {
+    tableCellClasses,
+  }
+}

src/components/Table/composables/useTableHeadCellClasses.ts

@@ -0,0 +1,20 @@
+import { computed, inject } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+
+const baseClasses = 'px-6 py-3 text-xs uppercase'
+const stripedHeadCellClasses = 'even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
+
+export function useTableHeadCellClasses(): { tableHeadCellClasses: Ref<string> } {
+  const isColumnsStriped = inject('stripedColumns')
+
+  const tableHeadCellClasses = computed(() => {
+    return classNames(baseClasses, {
+      [stripedHeadCellClasses]: isColumnsStriped,
+    })
+  })
+
+  return {
+    tableHeadCellClasses,
+  }
+}

src/components/Table/composables/useTableRowClasses.ts

@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import classNames from 'classnames'
 
 const baseClasses = 'bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700'
-const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 bg-white dark:border-gray-700 dark:bg-gray-800'
+const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-800'
 const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600'
 
 export function useTableRowClasses(): { tableRowClasses: Ref<string> } {
@@ -11,13 +11,10 @@ export function useTableRowClasses(): { tableRowClasses: Ref<string> } {
   const isHoverable = inject('hoverable')
 
   const tableRowClasses = computed(() => {
-    return classNames(
-      baseClasses,
-      {
-        [stripedClasses]: isStriped,
-        [hoverableClasses]: isHoverable,
-      },
-    )
+    return classNames(baseClasses, {
+      [stripedClasses]: isStriped,
+      [hoverableClasses]: isHoverable,
+    })
   })
 
   return {