add empty component and poilsh styles

src/components/ui/data-table/DataTableEmpty.vue

@@ -0,0 +1,34 @@
+<template>
+    <Empty>
+        <EmptyHeader>
+            <EmptyMedia variant="icon">
+                <SearchAlert v-if="props.type === 'nomatch'" class="text-lg" />
+                <Inbox v-else class="text-lg" />
+            </EmptyMedia>
+            <EmptyDescription>
+                {{ emptyText }}
+            </EmptyDescription>
+        </EmptyHeader>
+    </Empty>
+</template>
+
+<script setup>
+    import { Inbox, SearchAlert } from 'lucide-vue-next';
+    import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
+
+    import { Empty, EmptyDescription, EmptyHeader, EmptyMedia } from '../empty';
+
+    const props = defineProps({
+        type: {
+            type: String,
+            default: 'nodata'
+        }
+    });
+
+    const { t } = useI18n();
+
+    const emptyText = computed(() => {
+        return props.type === 'nomatch' ? t('common.no_matching_records') : t('common.no_data');
+    });
+</script>

src/components/ui/data-table/DataTableLayout.vue

@@ -59,9 +59,9 @@
                         </template>
 
                         <TableRow v-else>
-                            <TableCell class="h-24 text-center">
+                            <TableCell class="h-24 text-center" :colspan="table.getVisibleLeafColumns().length">
                                 <slot name="empty">
-                                    {{ emptyText }}
+                                    <DataTableEmpty :type="emptyType" />
                                 </slot>
                             </TableCell>
                         </TableRow>
@@ -134,6 +134,8 @@
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
 
+    import DataTableEmpty from './DataTableEmpty.vue';
+
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const { isDataTableStriped } = storeToRefs(appearanceSettingsStore);
 
@@ -162,10 +164,6 @@
             type: Array,
             default: () => []
         },
-        emptyText: {
-            type: String,
-            default: 'No results.'
-        },
         showPagination: {
             type: Boolean,
             default: true
@@ -187,6 +185,11 @@
     const { t } = useI18n();
     const tableScrollRef = ref(null);
 
+    const emptyType = computed(() => {
+        const totalRows = props.table?.getCoreRowModel?.().rows?.length ?? 0;
+        return totalRows === 0 ? 'nodata' : 'nomatch';
+    });
+
     const expandedRenderer = computed(() => {
         const columns = props.table.getAllColumns?.() ?? [];
         for (const column of columns) {

src/components/ui/data-table/index.js

@@ -1 +1,2 @@
 export { default as DataTableLayout } from './DataTableLayout.vue';
+export { default as DataTableEmpty } from './DataTableEmpty.vue';