feat(frontend) : add actions slot to DataTable component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-12 18:06:28 +01:00
parent 0c4363d32b
commit e6bbe66d42

View File

@@ -10,7 +10,7 @@
> >
{{ col.label }} {{ col.label }}
</th> </th>
<th v-if="deletable" class="px-4 py-3 font-semibold text-neutral-700"> <th v-if="deletable || $slots.actions" class="px-4 py-3 font-semibold text-neutral-700">
Actions Actions
</th> </th>
</tr> </tr>
@@ -32,18 +32,22 @@
{{ item[col.key] }} {{ item[col.key] }}
</slot> </slot>
</td> </td>
<td v-if="deletable" class="px-4 py-3"> <td v-if="deletable || $slots.actions" class="px-4 py-3">
<button <div class="flex items-center gap-2">
class="text-[red-500] hover:text-[red-700]" <slot name="actions" :item="item" />
@click.stop="$emit('delete', item)" <button
> v-if="deletable"
<Icon name="mdi:delete-outline" size="20" /> class="text-[red-500] hover:text-[red-700]"
</button> @click.stop="$emit('delete', item)"
>
<Icon name="mdi:delete-outline" size="20" />
</button>
</div>
</td> </td>
</tr> </tr>
<tr v-if="items.length === 0 && !loading"> <tr v-if="items.length === 0 && !loading">
<td <td
:colspan="columns.length + (deletable ? 1 : 0)" :colspan="columns.length + (deletable || $slots.actions ? 1 : 0)"
class="px-4 py-8 text-center text-neutral-400" class="px-4 py-8 text-center text-neutral-400"
> >
{{ emptyMessage }} {{ emptyMessage }}