✨ feature: Data table component updated

src/components/table/VDataTable.vue

@@ -4,8 +4,8 @@ import type { DataTableProps, DataTableSlots } from 'primevue/datatable';
 import { useId, ref, watch, computed } from 'vue';
 
 export interface IVDataTable extends Partial<Omit<DataTableProps, 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>{
-  id: string
+  id?: string
-  title: string
+  title?: string
 }
 
 const props = withDefaults(defineProps<IVDataTable>(), {
@@ -80,7 +80,12 @@ const props = withDefaults(defineProps<IVDataTable>(), {
   multiSortMeta: undefined,
 })
 
-const slots = defineSlots<DataTableSlots>();
+type VDataTableSlots = DataTableSlots & {
+  default?: (props: Record<string, unknown>) => unknown
+};
+
+const slots = defineSlots<VDataTableSlots>();
+
 
 const dataTableSlotKeys = [
   'header',
@@ -91,9 +96,7 @@ const dataTableSlotKeys = [
   'loading',
   'expansion',
   'loadingicon',
-  'reorderindicatorupicon',         // deprecated
   'rowreorderindicatorupicon',
-  'reorderindicatordownicon',       // deprecated
   'rowreorderindicatordownicon',
   'rowgrouptogglericon',
   'paginatorcontainer',
@@ -402,6 +405,7 @@ watch(localEditingRows, (newVal) => {
     @stateRestore="emit('state-restore', $event)"
     @stateSave="emit('state-save', $event)"
     @selectAllChange="emit('select-all-change', $event)"
+    class="p-datatable"
   >
     <template
       v-for="([name]) in availableSlots"
@@ -410,5 +414,12 @@ watch(localEditingRows, (newVal) => {
     >
       <slot :name="name" v-bind="slotProps" />
     </template>
+    <slot></slot>
   </DataTable>
 </template>
+
+<style lang="css" scoped>
+.p-datatable{
+  box-sizing: border-box;
+}
+</style>