feat: added striped-columns

docs/components/table/examples/TableStripedColumnsExample.vue

@@ -0,0 +1,43 @@
+<template>
+  <Table striped-columns>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
+</script>

docs/components/table/table.md

@@ -1,6 +1,7 @@
 <script setup>
 import TableExample from './examples/TableExample.vue';
 import TableStripedExample from './examples/TableStripedExample.vue';
+import TableStripedColumnsExample from './examples/TableStripedColumnsExample.vue';
 import TableHoverableExample from './examples/TableHoverableExample.vue';
 </script>
 # Vue Table Component - Flowbite
@@ -115,6 +116,57 @@ import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from
 
 ```
 
+## Striped columns example
+
+<TableStripedColumnsExample />
+
+```vue
+<template>
+  <Table striped-columns>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+</script>
+
+```
+
 ## Hoverable example
 
 <TableHoverableExample />

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(
+    return classNames(baseClasses, {
-      baseClasses,
+      [stripedClasses]: isStriped,
-      {
+      [hoverableClasses]: isHoverable,
-        [stripedClasses]: isStriped,
+    })
-        [hoverableClasses]: isHoverable,
-      },
-    )
   })
 
   return {