refactor(frontend) : extract reusable DataTable component from repeated table markup

Replace inline table HTML in 8 files with a shared DataTable component
supporting columns definition, scoped slots for custom cells, and
built-in delete action.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/components/AdminEffortTab.vue

@@ -10,39 +10,15 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="items"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
+            empty-message="Aucun effort trouvé."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+            deletable
-                    </tr>
+            @row-click="openEdit"
-                </thead>
+            @delete="(item) => handleDelete(item.id)"
-                <tbody>
+        />
-                    <tr
-                        v-for="item in items"
-                        :key="item.id"
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
-                        @click="openEdit(item)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="2" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun effort trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <TaskEffortDrawer
             v-model="drawerOpen"
@@ -56,6 +32,12 @@
 import type { TaskEffort } from '~/services/dto/task-effort'
 import { useTaskEffortService } from '~/services/task-efforts'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+]
+
 const { getAll, remove } = useTaskEffortService()
 const items = ref<TaskEffort[]>([])
 const isLoading = ref(true)

frontend/components/AdminPriorityTab.vue

@@ -10,46 +10,22 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="items"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
+            empty-message="Aucune priorité trouvée."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
+            deletable
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+            @row-click="openEdit"
-                    </tr>
+            @delete="(item) => handleDelete(item.id)"
-                </thead>
+        >
-                <tbody>
+            <template #cell-color="{ item }">
-                    <tr
+                <span
-                        v-for="item in items"
+                    class="inline-block h-6 w-6 rounded-full"
-                        :key="item.id"
+                    :style="{ backgroundColor: item.color }"
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                />
-                        @click="openEdit(item)"
+            </template>
-                    >
+        </DataTable>
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucune priorité trouvée.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <TaskPriorityDrawer
             v-model="drawerOpen"
@@ -63,6 +39,13 @@
 import type { TaskPriority } from '~/services/dto/task-priority'
 import { useTaskPriorityService } from '~/services/task-priorities'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+]
+
 const { getAll, remove } = useTaskPriorityService()
 const items = ref<TaskPriority[]>([])
 const isLoading = ref(true)

frontend/components/AdminStatusTab.vue

@@ -10,48 +10,22 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="items"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
+            empty-message="Aucun statut trouvé."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
+            deletable
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Position</th>
+            @row-click="openEdit"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+            @delete="(item) => handleDelete(item.id)"
-                    </tr>
+        >
-                </thead>
+            <template #cell-color="{ item }">
-                <tbody>
+                <span
-                    <tr
+                    class="inline-block h-6 w-6 rounded-full"
-                        v-for="item in items"
+                    :style="{ backgroundColor: item.color }"
-                        :key="item.id"
+                />
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+            </template>
-                        @click="openEdit(item)"
+        </DataTable>
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="px-4 py-3 text-neutral-700">{{ item.position }}</td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun statut trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <TaskStatusDrawer
             v-model="drawerOpen"
@@ -65,6 +39,14 @@
 import type { TaskStatus } from '~/services/dto/task-status'
 import { useTaskStatusService } from '~/services/task-statuses'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'position', label: 'Position', class: 'text-neutral-700' },
+]
+
 const { getAll, remove } = useTaskStatusService()
 const items = ref<TaskStatus[]>([])
 const isLoading = ref(true)

frontend/components/AdminTypeTab.vue

@@ -10,46 +10,22 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="items"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
+            empty-message="Aucun type trouvé."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
+            deletable
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+            @row-click="openEdit"
-                    </tr>
+            @delete="(item) => handleDelete(item.id)"
-                </thead>
+        >
-                <tbody>
+            <template #cell-color="{ item }">
-                    <tr
+                <span
-                        v-for="item in items"
+                    class="inline-block h-6 w-6 rounded-full"
-                        :key="item.id"
+                    :style="{ backgroundColor: item.color }"
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+                />
-                        @click="openEdit(item)"
+            </template>
-                    >
+        </DataTable>
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun type trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <TaskTypeDrawer
             v-model="drawerOpen"
@@ -63,6 +39,13 @@
 import type { TaskType } from '~/services/dto/task-type'
 import { useTaskTypeService } from '~/services/task-types'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+]
+
 const { getAll, remove } = useTaskTypeService()
 const items = ref<TaskType[]>([])
 const isLoading = ref(true)

frontend/components/AdminUserTab.vue

@@ -10,49 +10,25 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="items"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Nom d'utilisateur</th>
+            empty-message="Aucun utilisateur trouvé."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Rôles</th>
+            deletable
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+            @row-click="openEdit"
-                    </tr>
+            @delete="(item) => handleDelete(item.id)"
-                </thead>
+        >
-                <tbody>
+            <template #cell-roles="{ item }">
-                    <tr
+                <span
-                        v-for="item in items"
+                    v-for="role in item.roles"
-                        :key="item.id"
+                    :key="role"
-                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
+                    class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
-                        @click="openEdit(item)"
+                >
-                    >
+                    {{ role }}
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.username }}</td>
+                </span>
-                        <td class="px-4 py-3">
+            </template>
-                            <span
+        </DataTable>
-                                v-for="role in item.roles"
-                                :key="role"
-                                class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
-                            >
-                                {{ role }}
-                            </span>
-                        </td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun utilisateur trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <UserDrawer
             v-model="drawerOpen"
@@ -66,6 +42,13 @@
 import type { UserData } from '~/services/dto/user-data'
 import { useUserService } from '~/services/users'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'username', label: "Nom d'utilisateur", primary: true },
+    { key: 'roles', label: 'Rôles' },
+]
+
 const { getAll, remove } = useUserService()
 const items = ref<UserData[]>([])
 const isLoading = ref(true)

frontend/components/DataTable.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <table class="w-full text-left text-sm">
+            <thead class="border-b border-neutral-200 bg-neutral-50">
+                <tr>
+                    <th
+                        v-for="col in columns"
+                        :key="col.key"
+                        class="px-4 py-3 font-semibold text-neutral-700"
+                    >
+                        {{ col.label }}
+                    </th>
+                    <th v-if="deletable" class="px-4 py-3 font-semibold text-neutral-700">
+                        Actions
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr
+                    v-for="item in items"
+                    :key="item.id"
+                    class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
+                    @click="$emit('row-click', item)"
+                >
+                    <td
+                        v-for="col in columns"
+                        :key="col.key"
+                        class="px-4 py-3"
+                        :class="[col.class, { 'font-semibold text-primary-500': col.primary }]"
+                    >
+                        <slot :name="`cell-${col.key}`" :item="item" :value="item[col.key]">
+                            {{ item[col.key] }}
+                        </slot>
+                    </td>
+                    <td v-if="deletable" class="px-4 py-3">
+                        <button
+                            class="text-red-500 hover:text-red-700"
+                            @click.stop="$emit('delete', item)"
+                        >
+                            <Icon name="mdi:delete-outline" size="20" />
+                        </button>
+                    </td>
+                </tr>
+                <tr v-if="items.length === 0 && !loading">
+                    <td
+                        :colspan="columns.length + (deletable ? 1 : 0)"
+                        class="px-4 py-8 text-center text-neutral-400"
+                    >
+                        {{ emptyMessage }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+export interface DataTableColumn {
+    key: string
+    label: string
+    primary?: boolean
+    class?: string
+}
+
+defineProps<{
+    columns: DataTableColumn[]
+    items: Record<string, any>[]
+    loading?: boolean
+    emptyMessage?: string
+    deletable?: boolean
+}>()
+
+defineEmits<{
+    (e: 'row-click', item: any): void
+    (e: 'delete', item: any): void
+}>()
+</script>

frontend/components/ProjectGroupTab.vue

@@ -10,50 +10,25 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="items"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Titre</th>
+            empty-message="Aucun groupe trouvé."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
+            deletable
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Description</th>
+            @row-click="openEdit"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+            @delete="(item) => handleDelete(item.id)"
-                    </tr>
+        >
-                </thead>
+            <template #cell-color="{ item }">
-                <tbody>
+                <span
-                    <tr
+                    class="inline-block h-6 w-6 rounded-full"
-                        v-for="item in items"
+                    :style="{ backgroundColor: item.color }"
-                        :key="item.id"
+                />
-                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
+            </template>
-                        @click="openEdit(item)"
+            <template #cell-description="{ item }">
-                    >
+                {{ item.description ?? '—' }}
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.title }}</td>
+            </template>
-                        <td class="px-4 py-3">
+        </DataTable>
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="max-w-xs truncate px-4 py-3 text-neutral-700">
-                            {{ item.description ?? '—' }}
-                        </td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun groupe trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <TaskGroupDrawer
             v-model="drawerOpen"
@@ -76,6 +51,14 @@ const emit = defineEmits<{
     (e: 'updated'): void
 }>()
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'title', label: 'Titre', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'description', label: 'Description', class: 'max-w-xs truncate text-neutral-700' },
+]
+
 const { getByProject, remove } = useTaskGroupService()
 const items = ref<TaskGroup[]>([])
 const isLoading = ref(true)

frontend/components/ProjectStatusTab.vue

@@ -10,48 +10,22 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="items"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Libellé</th>
+            empty-message="Aucun statut trouvé."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
+            deletable
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Position</th>
+            @row-click="openEdit"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
+            @delete="requestDelete"
-                    </tr>
+        >
-                </thead>
+            <template #cell-color="{ item }">
-                <tbody>
+                <span
-                    <tr
+                    class="inline-block h-6 w-6 rounded-full"
-                        v-for="item in items"
+                    :style="{ backgroundColor: item.color }"
-                        :key="item.id"
+                />
-                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
+            </template>
-                        @click="openEdit(item)"
+        </DataTable>
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="px-4 py-3 text-neutral-700">{{ item.position }}</td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="requestDelete(item)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun statut trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <TaskStatusDrawer
             v-model="drawerOpen"
@@ -80,6 +54,14 @@ const props = defineProps<{
     projectId: number
 }>()
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'position', label: 'Position', class: 'text-neutral-700' },
+]
+
 const statusService = useTaskStatusService()
 const taskService = useTaskService()
 

frontend/pages/clients.vue

@@ -10,45 +10,25 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
+        <DataTable
-            <table class="w-full text-left text-sm">
+            :columns="columns"
-                <thead class="border-b border-neutral-200 bg-neutral-50">
+            :items="clients"
-                    <tr>
+            :loading="isLoading"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Nom</th>
+            empty-message="Aucun client trouvé."
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Email</th>
+            deletable
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Adresse</th>
+            @row-click="openEdit"
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Téléphone</th>
+            @delete="(item) => handleDelete(item.id)"
-                        <th class="px-4 py-3 font-semibold text-neutral-700"></th>
+        >
-                    </tr>
+            <template #cell-email="{ item }">
-                </thead>
+                {{ item.email ?? '-' }}
-                <tbody>
+            </template>
-                    <tr
+            <template #cell-address="{ item }">
-                        v-for="client in clients"
+                {{ formatAddress(item) }}
-                        :key="client.id"
+            </template>
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
+            <template #cell-phone="{ item }">
-                        @click="openEdit(client)"
+                {{ item.phone ?? '-' }}
-                    >
+            </template>
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ client.name }}</td>
+        </DataTable>
-                        <td class="px-4 py-3 text-primary-500">{{ client.email ?? '-' }}</td>
-                        <td class="px-4 py-3 text-neutral-700">{{ formatAddress(client) }}</td>
-                        <td class="px-4 py-3 text-primary-500">{{ client.phone ?? '-' }}</td>
-                        <td class="px-4 py-3 text-right">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(client.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="clients.length === 0 && !isLoading">
-                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun client trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
         <ClientDrawer
             v-model="drawerOpen"
@@ -64,6 +44,15 @@ import { useClientService } from '~/services/clients'
 
 useHead({ title: 'Clients' })
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'name', label: 'Nom', primary: true },
+    { key: 'email', label: 'Email', class: 'text-primary-500' },
+    { key: 'address', label: 'Adresse', class: 'text-neutral-700' },
+    { key: 'phone', label: 'Téléphone', class: 'text-primary-500' },
+]
+
 const { getAll, remove } = useClientService()
 const clients = ref<Client[]>([])
 const isLoading = ref(true)