Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feature: Data table component updated

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-08-05 00:26:53 +02:00
parent 994237e98e
commit 073ddc9d7c
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/table/VDataTable.vue
View File

@ -2,6 +2,7 @@
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';
import type { DataTableProps, DataTableSlots } from 'primevue/datatable'; import type { DataTableProps, DataTableSlots } from 'primevue/datatable';
import { useId, ref, watch, computed } from 'vue'; import { useId, ref, watch, computed } from 'vue';
import styles from '@visua/typography.module.css';
export interface IVDataTable extends Partial<Omit<DataTableProps, 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>{ export interface IVDataTable extends Partial<Omit<DataTableProps, 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>{
id?: string id?: string
@ -415,6 +416,12 @@ watch(localEditingRows, (newVal) => {
<slot :name="name" v-bind="slotProps" /> <slot :name="name" v-bind="slotProps" />
</template> </template>
<slot></slot> <slot></slot>
<template #empty>
<div class="datatable-empty" :class="[styles['text-body-SM-detail-text-Regular']]">
<i class="ri-database-line database-icon"></i>
<p> Aucune donnée trouvée. </p>
</div>
</template>
</DataTable> </DataTable>
</template> </template>
@ -422,4 +429,17 @@ watch(localEditingRows, (newVal) => {
.p-datatable{ .p-datatable{
box-sizing: border-box; box-sizing: border-box;
} }
.datatable-empty{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
gap: 1.5rem;
}
.database-icon{
font-size: 5rem;
color: var(--border-contrast-grey);
}
</style> </style>