diff --git a/frontend/components/ui/UiDataTable.vue b/frontend/components/ui/UiDataTable.vue
new file mode 100644
index 0000000..42317b5
--- /dev/null
+++ b/frontend/components/ui/UiDataTable.vue
@@ -0,0 +1,22 @@
+<template>
+    <table class="w-full border-collapse border border-slate-300">
+        <thead>
+        <tr>
+            <th
+                v-for="(column, index) in columns"
+                :key="index"
+                class="border border-slate-300 px-3 py-2 text-left"
+            >
+                {{ column }}
+            </th>
+        </tr>
+        </thead>
+    </table>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    columns: string[]
+    data?: any[]
+}>()
+</script>
diff --git a/frontend/pages/datatable.vue b/frontend/pages/datatable.vue
new file mode 100644
index 0000000..fde42e6
--- /dev/null
+++ b/frontend/pages/datatable.vue
@@ -0,0 +1,10 @@
+<template>
+    <UiDataTable
+        :columns="rowsLabel"
+    />
+</template>
+<script setup lang="ts">
+
+const rowsLabel = ['Numéro', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids', 'Date', 'Foursnisseur', 'Poids']
+</script>
+