diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 492e67d..38db977 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -47,6 +47,7 @@ function getComponents() {
     { text: 'Progress', link: 'components/progress' },
     { text: 'Rating', link: 'components/rating' },
     { text: 'Spinner', link: '/components/spinner' },
+    { text: 'Table', link: 'components/table' },
     { text: 'Tabs', link: '/components/tabs' },
     { text: 'ListGroup', link: 'components/list-group' },
     { text: 'Toast', link: 'components/toast' },
@@ -57,7 +58,6 @@ function getComponents() {
     { text: '- Footer', link: 'components/footer' },
     { text: '- Pagination', link: 'components/pagination' },
     { text: '- Sidebar', link: 'components/sidebar' },
-    { text: '- Table', link: 'components/table' },
     { text: '- Timeline', link: 'components/timeline' },
   ]
 }
diff --git a/docs/components/table.md b/docs/components/table.md
index 163ec9d..3d9f3a2 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -1,15 +1,219 @@
 <script setup>
-import TableExample from './table/examples/TableExample.vue'
+import TableExample from './table/examples/TableExample.vue';
+import TableStripedExample from './table/examples/TableStripedExample.vue';
+import TableStripedColumnsExample from './table/examples/TableStripedColumnsExample.vue';
+import TableHoverableExample from './table/examples/TableHoverableExample.vue';
 </script>
 # Vue Table Component - Flowbite
 
-```vue
-<script setup>
-import { Table } from 'flowbite-vue'
-</script>
-<template>
-  <Table></Table>
-</template>
-```
+#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/tables/](https://flowbite.com/docs/components/tables/)
+:::
+
+## Basic example
 
 <TableExample />
+
+```vue
+<template>
+  <Table>
+    <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>
+
+```
+
+## Striped example
+
+<TableStripedExample />
+
+```vue
+<template>
+  <Table striped>
+    <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>
+
+```
+
+## 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 />
+
+```vue
+<template>
+  <Table hoverable>
+    <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>
+
+```
diff --git a/docs/components/table/examples/TableExample.vue b/docs/components/table/examples/TableExample.vue
index e2c2921..0258b50 100644
--- a/docs/components/table/examples/TableExample.vue
+++ b/docs/components/table/examples/TableExample.vue
@@ -1,8 +1,43 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Table></Table>
-  </div>
+  <Table>
+    <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 } from '../../../../src/index'
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
 </script>
diff --git a/docs/components/table/examples/TableHoverableExample.vue b/docs/components/table/examples/TableHoverableExample.vue
new file mode 100644
index 0000000..40488b0
--- /dev/null
+++ b/docs/components/table/examples/TableHoverableExample.vue
@@ -0,0 +1,43 @@
+<template>
+  <Table hoverable>
+    <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>
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 @@
+<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>
diff --git a/docs/components/table/examples/TableStripedExample.vue b/docs/components/table/examples/TableStripedExample.vue
new file mode 100644
index 0000000..bfbb7d5
--- /dev/null
+++ b/docs/components/table/examples/TableStripedExample.vue
@@ -0,0 +1,43 @@
+<template>
+  <Table striped>
+    <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>
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index ff2de14..cb190ec 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -1,104 +1,29 @@
 <template>
   <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
     <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-        <tr>
-          <th scope="col" class="px-6 py-3">
-            Product name
-          </th>
-          <th scope="col" class="px-6 py-3">
-            Color
-          </th>
-          <th scope="col" class="px-6 py-3">
-            Category
-          </th>
-          <th scope="col" class="px-6 py-3">
-            Price
-          </th>
-          <th scope="col" class="px-6 py-3">
-            <span class="sr-only">Edit</span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
-            Apple MacBook Pro 17"
-          </th>
-          <td class="px-6 py-4">
-            Sliver
-          </td>
-          <td class="px-6 py-4">
-            Laptop
-          </td>
-          <td class="px-6 py-4">
-            $2999
-          </td>
-          <td class="px-6 py-4 text-right">
-            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-          </td>
-        </tr>
-        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
-            Microsoft Surface Pro
-          </th>
-          <td class="px-6 py-4">
-            White
-          </td>
-          <td class="px-6 py-4">
-            Laptop PC
-          </td>
-          <td class="px-6 py-4">
-            $1999
-          </td>
-          <td class="px-6 py-4 text-right">
-            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-          </td>
-        </tr>
-        <tr class="bg-white dark:bg-gray-800">
-          <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
-            Magic Mouse 2
-          </th>
-          <td class="px-6 py-4">
-            Black
-          </td>
-          <td class="px-6 py-4">
-            Accessories
-          </td>
-          <td class="px-6 py-4">
-            $99
-          </td>
-          <td class="px-6 py-4 text-right">
-            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-          </td>
-        </tr>
-      </tbody>
+      <slot></slot>
     </table>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import type { PropType } from 'vue'
+import { provide } from 'vue'
 
 const props = defineProps({
-  children: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
   striped: {
     type: Boolean,
     default: false,
   },
+  stripedColumns: {
+    type: Boolean,
+    default: false,
+  },
   hoverable: {
     type: Boolean,
     default: false,
   },
-  className: {
-    type: String,
-    default: '',
-  },
 })
 
+provide('striped', props.striped)
+provide('hoverable', props.hoverable)
+provide('stripedColumns', props.stripedColumns)
 </script>
diff --git a/src/components/Table/TableBody.vue b/src/components/Table/TableBody.vue
new file mode 100644
index 0000000..9a1b1f0
--- /dev/null
+++ b/src/components/Table/TableBody.vue
@@ -0,0 +1,7 @@
+<template>
+  <tbody>
+    <slot></slot>
+  </tbody>
+</template>
+<script lang="ts" setup>
+</script>
diff --git a/src/components/Table/TableCell.vue b/src/components/Table/TableCell.vue
new file mode 100644
index 0000000..9bc5e9a
--- /dev/null
+++ b/src/components/Table/TableCell.vue
@@ -0,0 +1,11 @@
+<template>
+  <td :class="tableCellClasses">
+    <slot></slot>
+  </td>
+</template>
+<script lang="ts" setup>
+
+import { useTableCellClasses } from '@/components/Table/composables/useTableCellClasses'
+
+const { tableCellClasses } = useTableCellClasses()
+</script>
diff --git a/src/components/Table/TableHead.vue b/src/components/Table/TableHead.vue
new file mode 100644
index 0000000..16aba62
--- /dev/null
+++ b/src/components/Table/TableHead.vue
@@ -0,0 +1,9 @@
+<template>
+  <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+    <tr>
+      <slot></slot>
+    </tr>
+  </thead>
+</template>
+<script lang="ts" setup>
+</script>
diff --git a/src/components/Table/TableHeadCell.vue b/src/components/Table/TableHeadCell.vue
new file mode 100644
index 0000000..b8e08b6
--- /dev/null
+++ b/src/components/Table/TableHeadCell.vue
@@ -0,0 +1,10 @@
+<template>
+  <th scope="col" :class="tableHeadCellClasses">
+    <slot></slot>
+  </th>
+</template>
+<script lang="ts" setup>
+import { useTableHeadCellClasses } from '@/components/Table/composables/useTableHeadCellClasses'
+
+const { tableHeadCellClasses } = useTableHeadCellClasses()
+</script>
diff --git a/src/components/Table/TableRow.vue b/src/components/Table/TableRow.vue
new file mode 100644
index 0000000..f129b2a
--- /dev/null
+++ b/src/components/Table/TableRow.vue
@@ -0,0 +1,10 @@
+<template>
+  <tr :class="tableRowClasses">
+    <slot></slot>
+  </tr>
+</template>
+<script lang="ts" setup>
+import { useTableRowClasses } from '@/components/Table/composables/useTableRowClasses'
+
+const { tableRowClasses } = useTableRowClasses()
+</script>
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<string> } {
+  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<string> } {
+  const isColumnsStriped = inject('stripedColumns')
+
+  const tableHeadCellClasses = computed(() => {
+    return classNames(baseClasses, {
+      [stripedHeadCellClasses]: isColumnsStriped,
+    })
+  })
+
+  return {
+    tableHeadCellClasses,
+  }
+}
diff --git a/src/components/Table/composables/useTableRowClasses.ts b/src/components/Table/composables/useTableRowClasses.ts
new file mode 100644
index 0000000..75209e5
--- /dev/null
+++ b/src/components/Table/composables/useTableRowClasses.ts
@@ -0,0 +1,23 @@
+import { computed, inject } from 'vue'
+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'
+const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600'
+
+export function useTableRowClasses(): { tableRowClasses: Ref<string> } {
+  const isStriped = inject('striped')
+  const isHoverable = inject('hoverable')
+
+  const tableRowClasses = computed(() => {
+    return classNames(baseClasses, {
+      [stripedClasses]: isStriped,
+      [hoverableClasses]: isHoverable,
+    })
+  })
+
+  return {
+    tableRowClasses,
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index 9de0f19..466a0a8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -32,6 +32,11 @@ export { default as Progress } from './components/Progress/Progress.vue'
 export { default as Rating } from './components/Rating/Rating.vue'
 export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
 export { default as Table } from './components/Table/Table.vue'
+export { default as TableHead } from './components/Table/TableHead.vue'
+export { default as TableBody } from './components/Table/TableBody.vue'
+export { default as TableHeadCell } from './components/Table/TableHeadCell.vue'
+export { default as TableRow } from './components/Table/TableRow.vue'
+export { default as TableCell } from './components/Table/TableCell.vue'
 export { default as Timeline } from './components/Timeline/Timeline.vue'
 export { default as Toast } from './components/Toast/Toast.vue'
 export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'