diff --git a/docs/components/table/examples/TableStripedColumnsExample.vue b/docs/components/table/examples/TableStripedColumnsExample.vue
new file mode 100644
index 0000000..7508083
--- /dev/null
+++ b/docs/components/table/examples/TableStripedColumnsExample.vue
@@ -0,0 +1,43 @@
+
+
+
+ Product name
+ Color
+ Category
+ Price
+ Edit
+
+
+
+ Apple MacBook Pro 17"
+ Sliver
+ Laptop
+ $2999
+
+ Edit
+
+
+
+ Microsoft Surface Pro
+ White
+ Laptop PC
+ $1999
+
+ Edit
+
+
+
+ Magic Mouse 2
+ Black
+ Accessories
+ $99
+
+ Edit
+
+
+
+
+
+
diff --git a/docs/components/table/table.md b/docs/components/table/table.md
index e97fe55..9e8e5ba 100644
--- a/docs/components/table/table.md
+++ b/docs/components/table/table.md
@@ -1,6 +1,7 @@
# Vue Table Component - Flowbite
@@ -115,6 +116,57 @@ import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from
```
+## Striped columns example
+
+
+
+```vue
+
+
+
+ Product name
+ Color
+ Category
+ Price
+ Edit
+
+
+
+ Apple MacBook Pro 17"
+ Sliver
+ Laptop
+ $2999
+
+ Edit
+
+
+
+ Microsoft Surface Pro
+ White
+ Laptop PC
+ $1999
+
+ Edit
+
+
+
+ Magic Mouse 2
+ Black
+ Accessories
+ $99
+
+ Edit
+
+
+
+
+
+
+
+```
+
## Hoverable example
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 0385e5a..341716b 100644
--- a/src/components/Table/Table.vue
+++ b/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)
diff --git a/src/components/Table/TableCell.vue b/src/components/Table/TableCell.vue
index 1d8e28c..9bc5e9a 100644
--- a/src/components/Table/TableCell.vue
+++ b/src/components/Table/TableCell.vue
@@ -1,7 +1,11 @@
-
+ |
|
diff --git a/src/components/Table/TableHeadCell.vue b/src/components/Table/TableHeadCell.vue
index 5b01927..b8e08b6 100644
--- a/src/components/Table/TableHeadCell.vue
+++ b/src/components/Table/TableHeadCell.vue
@@ -1,7 +1,10 @@
-
+ |
|
diff --git a/src/components/Table/TableRow.vue b/src/components/Table/TableRow.vue
index 40f4bbe..f129b2a 100644
--- a/src/components/Table/TableRow.vue
+++ b/src/components/Table/TableRow.vue
@@ -4,7 +4,7 @@
diff --git a/src/components/Table/composables/useTableCellClasses.ts b/src/components/Table/composables/useTableCellClasses.ts
new file mode 100644
index 0000000..86cd6c8
--- /dev/null
+++ b/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 } {
+ const isColumnsStriped = inject('stripedColumns')
+
+ const tableCellClasses = computed(() => {
+ return classNames(baseClasses, {
+ [stripedCellClasses]: isColumnsStriped,
+ })
+ })
+
+ return {
+ tableCellClasses,
+ }
+}
diff --git a/src/components/Table/composables/useTableHeadCellClasses.ts b/src/components/Table/composables/useTableHeadCellClasses.ts
new file mode 100644
index 0000000..f928fe8
--- /dev/null
+++ b/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 } {
+ const isColumnsStriped = inject('stripedColumns')
+
+ const tableHeadCellClasses = computed(() => {
+ return classNames(baseClasses, {
+ [stripedHeadCellClasses]: isColumnsStriped,
+ })
+ })
+
+ return {
+ tableHeadCellClasses,
+ }
+}
diff --git a/src/components/Table/composables/tableRowClasses.ts b/src/components/Table/composables/useTableRowClasses.ts
similarity index 72%
rename from src/components/Table/composables/tableRowClasses.ts
rename to src/components/Table/composables/useTableRowClasses.ts
index 7097cef..bed91c0 100644
--- a/src/components/Table/composables/tableRowClasses.ts
+++ b/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 } {
@@ -11,13 +11,10 @@ export function useTableRowClasses(): { tableRowClasses: Ref } {
const isHoverable = inject('hoverable')
const tableRowClasses = computed(() => {
- return classNames(
- baseClasses,
- {
- [stripedClasses]: isStriped,
- [hoverableClasses]: isHoverable,
- },
- )
+ return classNames(baseClasses, {
+ [stripedClasses]: isStriped,
+ [hoverableClasses]: isHoverable,
+ })
})
return {