Merge branch 'datatable' into 'main'

Datatable

See merge request cellule-financiere-pmo/design-system/visua-vue!13

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.13] - 2025-07-29
+### Added
+- Data table compoenent
+- List style
+
 ## [1.0.12] - 2025-07-28
 ### Added
 - Modal compoenent

README.md

@@ -1,3 +1,3 @@
 # visua-vue
 
-**Current version: v1.0.12**
+**Current version: v1.0.13**

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cellule-financiere-pmo/visua-vue",
-      "version": "1.0.12",
+      "version": "1.0.13",
       "license": "ISC",
       "dependencies": {
         "@cellule-financiere-pmo/visua": "1.1.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -12,7 +12,8 @@
 // import VFileUploadView from '../template/VFileUploadView.vue';
 // import VAlertView from '../template/VAlertView.vue';
 // import VModalView from '../template/VModalView.vue';
-import VConfirmModalView from '../template/VConfirmModalView.vue';
+// import VConfirmModalView from '../template/VConfirmModalView.vue';
+import VDataTableView from '../template/VDataTableView.vue';
 </script>
 
 
@@ -30,5 +31,6 @@ import VConfirmModalView from '../template/VConfirmModalView.vue';
   <!-- <VFileUploadView/> -->
   <!-- <VAlertView/> -->
    <!-- <VModalView/> -->
-    <VConfirmModalView/>
+    <!-- <VConfirmModalView/> -->
+  <VDataTableView/>
 </template>

src/assets/style/global.css

@@ -22,7 +22,7 @@
     --input-padding-y: 0.5rem;
     --input-border-raduis: 0.25rem 0.25rem 0px 0px;
     /* datatable */
-    --datatable-background: var(--background-contrast-grey);
+    --datatable-background: var(--background-default-grey);
     --datatable-alt-background: var(--background-alt-grey);
     --datatable-hover-background: var(--background-alt-grey-hover);
     --datatable-active-background: var(--background-alt-grey-active);

src/assets/style/primevue-configuration.css

@@ -18,3 +18,6 @@
 @import './primevue-style/toast.css';
 @import './primevue-style/dialog.css';
 @import './primevue-style/confirmdialog.css';
+@import './primevue-style/datatable.css';
+@import './primevue-style/paginator.css';
+@import './primevue-style/list.css';

src/assets/style/primevue-style/datatable.css

@@ -0,0 +1,110 @@
+:root{
+  --p-datatable-paginator-bottom-border-color: var(--p-datatable-border-color);
+  --p-datatable-paginator-bottom-border-width: 0 0 1px 0;
+  --p-datatable-paginator-top-border-color: var(--p-datatable-border-color);
+  --p-datatable-paginator-top-border-width: 0 0 1px 0;
+  --p-datatable-filter-inline-gap: 0.5rem;
+  --p-datatable-filter-constraint-focus-background: var(--p-list-option-focus-background);
+  --p-datatable-filter-constraint-selected-background: var(--p-list-option-selected-background);
+  --p-datatable-filter-constraint-selected-focus-background: var(--p-list-option-selected-focus-background);
+  --p-datatable-filter-constraint-color: var(--p-list-option-color);
+  --p-datatable-filter-constraint-focus-color: var(--p-list-option-focus-color);
+  --p-datatable-filter-constraint-selected-color: var(--p-list-option-selected-color);
+  --p-datatable-filter-constraint-selected-focus-color: var(--p-list-option-selected-focus-color);
+  --p-datatable-filter-constraint-padding: var(--p-list-option-padding);
+  --p-datatable-filter-constraint-border-radius: var(--p-list-option-border-radius);
+  --p-datatable-filter-constraint-separator-border-color: var(--p-content-border-color);
+  --p-datatable-filter-constraint-list-padding: var(--p-list-padding);
+  --p-datatable-filter-constraint-list-gap: var(--p-list-gap);
+  --p-datatable-filter-rule-border-color: var(--p-content-border-color);
+  --p-datatable-filter-overlay-popover-background: var(--p-overlay-popover-background);
+  --p-datatable-filter-overlay-popover-border-color: var(--p-overlay-popover-border-color);
+  --p-datatable-filter-overlay-popover-border-radius: var(--p-overlay-popover-border-radius);
+  --p-datatable-filter-overlay-popover-color: var(--p-overlay-popover-color);
+  --p-datatable-filter-overlay-popover-shadow: var(--p-overlay-popover-shadow);
+  --p-datatable-filter-overlay-popover-padding: var(--p-overlay-popover-padding);
+  --p-datatable-filter-overlay-popover-gap: 0.5rem;
+  --p-datatable-filter-overlay-select-background: var(--p-overlay-select-background);
+  --p-datatable-filter-overlay-select-border-color: var(--p-overlay-select-border-color);
+  --p-datatable-filter-overlay-select-border-radius: var(--p-overlay-select-border-radius);
+  --p-datatable-filter-overlay-select-color: var(--p-overlay-select-color);
+  --p-datatable-filter-overlay-select-shadow: var(--p-overlay-select-shadow);
+  --p-datatable-row-toggle-button-hover-background: var(--datatable-hover-background);
+  --p-datatable-row-toggle-button-selected-hover-background: var(--datatable-background);
+  --p-datatable-row-toggle-button-color: var(--datatable-row-color);
+  --p-datatable-row-toggle-button-hover-color: var(--datatable-row-color);
+  --p-datatable-row-toggle-button-selected-hover-color: var(--datatable-row-color);
+  --p-datatable-row-toggle-button-size: 1.75rem;
+  --p-datatable-row-toggle-button-border-radius: 0px;
+  --p-datatable-row-toggle-button-focus-ring-width: var(--focus-width);
+  --p-datatable-row-toggle-button-focus-ring-style: var(--focus-style);
+  --p-datatable-row-toggle-button-focus-ring-color: var(--focus-color);
+  --p-datatable-row-toggle-button-focus-ring-offset: var(--focus-offset);
+  /* --p-datatable-row-toggle-button-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-datatable-loading-icon-size: 2rem;
+  --p-datatable-sort-icon-color: var(--datatable-row-color);
+  --p-datatable-sort-icon-hover-color: var(--datatable-row-color);
+  --p-datatable-sort-icon-size: 0.875rem;
+  --p-datatable-resize-indicator-width: 1px;
+  --p-datatable-resize-indicator-color: var(--p-primary-color);
+  --p-datatable-column-resizer-width: 0.5rem;
+  --p-datatable-drop-point-color: var(--p-primary-color);
+  --p-datatable-footer-background: var(--datatable-background);
+  --p-datatable-footer-border-color: var(--p-datatable-border-color);
+  --p-datatable-footer-color: var(--p-content-color);
+  --p-datatable-footer-border-width: 0 0 1px 0;
+  --p-datatable-footer-padding: 1rem;
+  --p-datatable-footer-lg-padding: 1.25rem;
+  --p-datatable-footer-sm-padding: 0.5rem;
+  --p-datatable-column-footer-font-weight: 600;
+  --p-datatable-footer-cell-background: var(--datatable-background);
+  --p-datatable-footer-cell-border-color: var(--p-datatable-border-color);
+  --p-datatable-footer-cell-color: var(--p-content-color);
+  --p-datatable-footer-cell-padding: 1rem;
+  --p-datatable-footer-cell-lg-padding: 1.25rem;
+  --p-datatable-footer-cell-sm-padding: 0.5rem;
+  --p-datatable-body-cell-border-color: var(--p-datatable-border-color);
+  --p-datatable-body-cell-padding: 1rem;
+  --p-datatable-body-cell-lg-padding: 1.25rem;
+  --p-datatable-body-cell-sm-padding: 0.5rem;
+  --p-datatable-row-background: var(--datatable-alt-background);
+  --p-datatable-row-hover-background: var(--datatable-hover-background);
+  --p-datatable-row-selected-background: var(--datatable-active-background);
+  --p-datatable-row-color: var(--datatable-row-color);
+  --p-datatable-row-hover-color: var(--datatable-row-color);
+  --p-datatable-row-selected-color: var(--datatable-row-color);
+  --p-datatable-row-focus-ring-width: var(--focus-width);
+  --p-datatable-row-focus-ring-style: var(--focus-style);
+  --p-datatable-row-focus-ring-color: var(--focus-color);
+  --p-datatable-row-focus-ring-offset: -1px;
+  /* --p-datatable-row-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-datatable-column-title-font-weight: var(--text-body-SM-detail-text-Bold-weight);
+  --p-datatable-header-cell-background: var(--datatable-background);
+  --p-datatable-header-cell-hover-background: var(--datatable-hover-background);
+  --p-datatable-header-cell-selected-background: var(--datatable-active-background);
+  --p-datatable-header-cell-border-color: var(--border-plain-grey);
+  --p-datatable-header-cell-color: var(--datatable-header-cell-color);
+  --p-datatable-header-cell-hover-color: var(--datatable-header-cell-color);
+  --p-datatable-header-cell-selected-color: var(--datatable-header-cell-color);
+  --p-datatable-header-cell-gap: 0.5rem;
+  --p-datatable-header-cell-padding: 1rem;
+  --p-datatable-header-cell-lg-padding: 1.25rem;
+  --p-datatable-header-cell-sm-padding: 0.5rem;
+  --p-datatable-header-cell-focus-ring-width: var(--focus-width);
+  --p-datatable-header-cell-focus-ring-style: var(--focus-style);
+  --p-datatable-header-cell-focus-ring-color: var(--focus-color);
+  --p-datatable-header-cell-focus-ring-offset: -1px;
+  /* --p-datatable-header-cell-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-datatable-header-background: var(--datatable-background);
+  --p-datatable-header-border-color: var(--border-default-grey);
+  --p-datatable-header-color: var(--datatable-header-cell-color);
+  --p-datatable-header-border-width: 0 0 1px 0;
+  --p-datatable-header-padding: 1rem;
+  --p-datatable-header-lg-padding: 1.25rem;
+  --p-datatable-header-sm-padding: 0.5rem;
+  /* --p-datatable-transition-duration: var(--p-transition-duration); */
+  --p-datatable-body-cell-selected-border-color: var(--datatable-active-background);
+  --p-datatable-row-striped-background: var(--datatable-background);
+  --p-datatable-border-color: var(--p-content-border-color);
+}
+

src/assets/style/primevue-style/fileupload.css

@@ -6,7 +6,7 @@
   --p-fileupload-file-gap: 1rem;
   --p-fileupload-file-border-color: var(--border-default-grey);
   --p-fileupload-file-info-gap: 0.5rem;
-  --p-fileupload-content-highlight-border-color: var(--p-primary-color);
+  --p-fileupload-content-highlight-border-color: var(--border-action-high-grey);
   --p-fileupload-content-padding: 0rem;
   --p-fileupload-content-gap: 1rem;
   --p-fileupload-header-background: transparent;

src/assets/style/primevue-style/list.css

@@ -0,0 +1,20 @@
+:root{
+  --p-list-option-group-padding: 0.25rem;
+  --p-list-option-group-font-weight: var(--text-body-MD-standard-text-Regular-weight);
+  --p-list-option-padding: 0.25rem;
+  --p-list-option-border-radius: 0px;
+  --p-list-option-group-background: var(--input-background);
+  --p-list-option-group-color: var(--input-color);
+  --p-list-option-focus-background: var(--background-transparent-active);
+  --p-list-option-selected-background: var(--background-active-blue-france);
+  --p-list-option-selected-focus-background: var(--background-active-blue-france);
+  --p-list-option-color: var(--input-color);
+  --p-list-option-focus-color: var(--input-color);
+  --p-list-option-selected-color: var(--text-inverted-blue-france);
+  --p-list-option-selected-focus-color: var(--text-inverted-blue-france);
+  --p-list-option-icon-color: var(--input-color);
+  --p-list-option-icon-focus-color: var(--input-color);
+  --p-list-padding: 0.25rem;
+  --p-list-gap: 0.125rem;
+  --p-list-header-padding: 0.5rem 1rem;
+}

src/assets/style/primevue-style/overlay.css

@@ -14,4 +14,7 @@
   --p-overlay-popover-shadow: var(--shadow);
   --p-overlay-select-border-radius: 0px;
   --p-overlay-select-shadow: var(--shadow);
+  --p-overlay-select-background: var(--input-background);
+  --p-overlay-select-border-color: var(--input-border-color);
+  --p-overlay-select-color: var(--input-color);
 }

src/assets/style/primevue-style/paginator.css

@@ -0,0 +1,24 @@
+:root{
+  --p-paginator-jump-to-page-input-max-width: 2.5rem;
+  --p-paginator-current-page-report-color: var(--text-action-high-grey);
+  --p-paginator-nav-button-background: transparent;
+  --p-paginator-nav-button-hover-background: var(--background-transparent-hover);
+  --p-paginator-nav-button-selected-background: var(--background-action-high-blue-france);
+  --p-paginator-nav-button-color: var(--text-action-high-grey);
+  --p-paginator-nav-button-hover-color: var(--text-action-high-grey);
+  --p-paginator-nav-button-selected-color: var(--text-inverted-blue-france);
+  --p-paginator-nav-button-width: 2rem;
+  --p-paginator-nav-button-height: 2rem;
+  --p-paginator-nav-button-border-radius: 0px;
+  --p-paginator-nav-button-focus-ring-width: var(--focus-width);
+  --p-paginator-nav-button-focus-ring-style: var(--focus-style);
+  --p-paginator-nav-button-focus-ring-color: var(--focus-color);
+  --p-paginator-nav-button-focus-ring-offset: var(--focus-offset);
+  /* --p-paginator-nav-button-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-paginator-padding: 0px;
+  --p-paginator-gap: 1rem;
+  --p-paginator-border-radius: 0px;
+  --p-paginator-background: transparent;
+  --p-paginator-color: var(--text-action-high-grey);
+  --p-paginator-transition-duration: var(--transition-duration);
+}

src/assets/style/primevue-style/toast.css

@@ -6,8 +6,8 @@
   --p-toast-content-padding: 0.25rem;
   --p-toast-content-gap: 0.5rem;
   --p-toast-text-gap: 0.5rem;
-  --p-toast-summary-font-weight: var( --text-body-MD-standard-text-weight);
+  --p-toast-summary-font-weight: var( --text-body-MD-standard-text-Medium-weight);
-  --p-toast-summary-font-size: var(--text-body-MD-standard-text-size);
+  --p-toast-summary-font-size: var(--text-body-MD-standard-text-Medium-size);
   --p-toast-detail-font-weight: var( --text-body-MD-standard-text-Regular-weight);
   --p-toast-detail-font-size: var(--text-body-MD-standard-text-Regular-size);
   /* info */

src/assets/style/primevue-style/various.css

@@ -3,4 +3,11 @@
   --p-text-muted-color: var(--text-action-high-grey);
   --p-transition-duration: var(--transition-duration);
   --p-anchor-gutter: 2px;
+  --p-content-background: var(--input-background);
+  --p-content-hover-background: var(--background-transparent-active);
+  --p-content-border-color: var(--border-action-high-grey);
+  --p-content-color: var(--text-action-high-grey);
+  --p-content-hover-color: var(--text-action-high-grey);
+  --p-content-border-radius: 0px;
+  --p-primary-color: var(--background-action-high-blue-france);
 }

src/components/select/VSelect.vue

@@ -83,6 +83,7 @@ const labelState = computed(() => {
 <template>
   <div class="main-container">
     <VLabel
+      v-if="props.label"
       :for="props.selectId"
       :label="props.label"
       :required="!props.disabled"

src/components/table/VDataTable.vue

@@ -0,0 +1,425 @@
+<script setup lang="ts">
+import DataTable from 'primevue/datatable';
+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
+  title?: string
+}
+
+const props = withDefaults(defineProps<IVDataTable>(), {
+  id: () => useId(),
+  title: '',
+  selection: undefined,
+  paginator: false,
+  rowsPerPageOptions: undefined,
+  rows: 0,
+  value: undefined,
+  dataKey: undefined,
+  showGridlines: false,
+  stripedRows: false,
+  first: 0,
+  totalRecords: 0,
+  pageLinkSize: 5,
+  paginatorPosition: 'bottom',
+  paginatorTemplate: undefined,
+  alwaysShowPaginator:true,
+  currentPageReportTemplate: '({currentPage} de {totalPages})',
+  lazy: false,
+  loading: false,
+  sortField: undefined,
+  sortOrder: undefined,
+  nullSortOrder: 1,
+  defaultSortOrder: 1,
+  sortMode: 'single',
+  removableSort: false,
+  filters: undefined,
+  filterDisplay: undefined,
+  globalFilterFields: undefined,
+  filterLocale: undefined,
+  selectionMode: undefined,
+  compareSelectionBy: 'deepEquals',
+  metaKeySelection: false,
+  contextMenu: false,
+  contextMenuSelection: undefined,
+  selectAll: undefined,
+  rowHover: false,
+  csvSeparator: ',',
+  exportFilename: 'download',
+  exportFunction: undefined,
+  resizableColumns: false,
+  columnResizeMode: 'fit',
+  reorderableColumns: false,
+  expandedRows: undefined,
+  expandedRowIcon: undefined,
+  collapsedRowIcon: undefined,
+  rowGroupMode: undefined,
+  groupRowsBy: undefined,
+  expandableRowGroups: false,
+  expandedRowGroups: undefined,
+  stateStorage: 'session',
+  stateKey: undefined,
+  editMode: undefined,
+  editingRows: undefined,
+  rowClass: undefined,
+  rowStyle: undefined,
+  scrollable: false,
+  scrollHeight: undefined,
+  virtualScrollerOptions: undefined,
+  frozenValue: undefined,
+  breakpoint: '960px',
+  showHeaders: true,
+  highlightOnSelect: false,
+  size: undefined,
+  tableClass: undefined,
+  tableProps: undefined,
+  tableStyle: undefined,
+  filterButtonProps: undefined,
+  editButtonProps: undefined,
+  multiSortMeta: undefined,
+})
+
+type VDataTableSlots = DataTableSlots & {
+  default?: (props: Record<string, unknown>) => unknown
+};
+
+const slots = defineSlots<VDataTableSlots>();
+
+
+const dataTableSlotKeys = [
+  'header',
+  'footer',
+  'empty',
+  'groupheader',
+  'groupfooter',
+  'loading',
+  'expansion',
+  'loadingicon',
+  'rowreorderindicatorupicon',
+  'rowreorderindicatordownicon',
+  'rowgrouptogglericon',
+  'paginatorcontainer',
+  'paginatorstart',
+  'paginatorend',
+  'paginatorfirstpagelinkicon',
+  'paginatorprevpagelinkicon',
+  'paginatornextpagelinkicon',
+  'paginatorlastpagelinkicon',
+  'paginatorrowsperpagedropdownicon',
+  'paginatorjumptopagedropdownicon'
+] as const;
+
+const availableSlots = computed(() =>
+  dataTableSlotKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
+);
+
+const dataTableRef = ref();
+
+defineExpose({
+  exportCSV: () => dataTableRef.value.exportCSV()
+});
+
+const emit = defineEmits([
+  'update:selection',
+  'update:rows',
+  'update:sortField',
+  'update:sortOrder',
+  'update:multiSortMeta',
+  'update:contextMenuSelection',
+  'update:expandedRows',
+  'update:expandedRowGroups',
+  'update:filters',
+  'update:editingRows',
+  'update:first',
+  'page',
+  'sort',
+  'row-select',
+  'row-unselect',
+  'filter',
+  'value-change',
+  'row-click',
+  'row-dbclick',
+  'row-contextmenu',
+  'row-select-all',
+  'row-unselect-all',
+  'select-all-change',
+  'column-resize-end',
+  'column-reorder',
+  'row-reorder',
+  'row-expand',
+  'row-collapse',
+  'rowgroup-expand',
+  'rowgroup-collapse',
+  'cell-edit-init',
+  'cell-edit-complete',
+  'cell-edit-cancel',
+  'row-edit-init',
+  'row-edit-save',
+  'row-edit-cancel',
+  'state-restore',
+  'state-save',
+]);
+
+const localSelection = ref(props.selection);
+watch(() => props.selection, (newVal) => {
+  if(localSelection.value !== newVal) {
+    localSelection.value = newVal;
+  }
+});
+watch(localSelection, (newVal) => {
+  if(props.selection !== newVal){
+    emit('update:selection', newVal);
+  }
+});
+
+const localRows = ref(props.rows);
+watch(() => props.rows, (newVal) => {
+  if(localRows.value !== newVal){
+    localRows.value = newVal;
+  }
+})
+watch(localRows, (newVal) => {
+  if(props.rows !== newVal){
+    emit('update:rows', newVal);
+  }
+});
+
+const localFirst = ref(props.first);
+watch(() => props.first, (newVal) => {
+  if(localFirst.value !== newVal){
+    localFirst.value = newVal;
+  }
+})
+watch(localFirst, (newVal) => {
+  if(props.first !== newVal){
+    emit('update:first', newVal);
+  }
+});
+
+const localSortField = ref(props.sortField);
+watch(() => props.sortField, (newVal) => {
+    if(localSortField.value !== newVal){
+      localSortField.value = newVal;
+    }
+})
+watch(localSortField, (newVal) => {
+    if(props.sortField !== newVal){
+        emit('update:sortField', newVal);
+    }
+});
+
+const localSortOrder = ref(props.sortOrder);
+watch(() => props.sortOrder, (newVal) => {
+    if(localSortOrder.value !== newVal){
+        localSortOrder.value = newVal;
+    }
+})
+watch(localSortOrder, (newVal) => {
+    if(props.sortOrder !== newVal){
+        emit('update:sortOrder', newVal);
+    }
+});
+
+const localMultiSortMeta = ref(props.multiSortMeta);
+watch(() => props.multiSortMeta, (newVal) => {
+    if(localMultiSortMeta.value !== newVal){
+        localMultiSortMeta.value = newVal;
+    }
+})
+watch(localMultiSortMeta, (newVal) => {
+    if(props.multiSortMeta !== newVal){
+        emit('update:multiSortMeta', newVal);
+    }
+});
+
+const localContextMenuSelection = ref(props.contextMenuSelection);
+watch(() => props.contextMenuSelection, (newVal) => {
+    if(localContextMenuSelection.value !== newVal){
+        localContextMenuSelection.value = newVal;
+    }
+})
+watch(localContextMenuSelection, (newVal) => {
+    if(props.contextMenuSelection){
+        emit('update:contextMenuSelection', newVal);
+    }
+});
+
+const localExpandedRows = ref(props.expandedRows);
+watch(() => props.expandedRows, (newVal) => {
+    if(localExpandedRows.value !== newVal){
+        localExpandedRows.value = newVal;
+    }
+})
+watch(localExpandedRows, (newVal) => {
+    if(props.expandedRows !== newVal){
+        emit('update:expandedRows', newVal);
+    }
+});
+
+const localExpandedRowGroups = ref(props.expandedRowGroups);
+watch(() => props.expandedRowGroups, (newVal) => {
+    if(localExpandedRowGroups.value !== newVal){
+        localExpandedRowGroups.value = newVal;
+    }
+})
+watch(localExpandedRowGroups, (newVal) => {
+    if(props.expandedRowGroups !== newVal){
+        emit('update:expandedRowGroups', newVal);
+    }
+});
+
+const localFilters = ref(props.filters);
+watch(() => props.filters, (newVal) => {
+    if(localFilters.value !== newVal){
+        localFilters.value = newVal;
+    }
+})
+watch(localFilters, (newVal) => {
+    if(props.filters !== newVal){
+        emit('update:filters', newVal);
+    }
+});
+
+const localEditingRows = ref(props.editingRows);
+watch(() => props.editingRows, (newVal) => {
+    if(localEditingRows.value = newVal){
+        localEditingRows.value = newVal;
+    }
+})
+watch(localEditingRows, (newVal) => {
+    if(props.editingRows !== newVal){
+        emit('update:editingRows', newVal);
+    }
+});
+
+</script>
+
+<template>
+  <DataTable
+    :id="`datatable-${props.id}`"
+    role="table"
+    ref="dataTableRef"
+    :value="props.value"
+    :paginator="props.paginator"
+    :rowsPerPageOptions="props.rowsPerPageOptions"
+    :data-key="props.dataKey"
+    :show-gridlines="props.showGridlines"
+    :striped-rows="props.stripedRows"
+    :total-records="props.totalRecords"
+    :page-link-size="props.pageLinkSize"
+    :paginator-position="props.paginatorPosition"
+    :paginator-template="props.paginatorTemplate"
+    :always-show-paginator="props.alwaysShowPaginator"
+    :current-page-report-template="props.currentPageReportTemplate"
+    :lazy="props.lazy"
+    :loading="props.loading"
+    :nullSortOrder="props.nullSortOrder"
+    :defaultSortOrder="props.defaultSortOrder"
+    :sortMode="props.sortMode"
+    :removableSort="props.removableSort"
+    :filterDisplay="props.filterDisplay"
+    :globalFilterFields="props.globalFilterFields"
+    :filterLocale="props.filterLocale"
+    :selectionMode="props.selectionMode"
+    :compareSelectionBy="props.compareSelectionBy"
+    :metaKeySelection="props.metaKeySelection"
+    :contextMenu="props.contextMenu"
+    :selectAll="props.selectAll"
+    :rowHover="props.rowHover"
+    :csvSeparator="props.csvSeparator"
+    :exportFilename="props.exportFilename"
+    :exportFunction="props.exportFunction"
+    :resizableColumns="props.resizableColumns"
+    :columnResizeMode="props.columnResizeMode"
+    :reorderableColumns="props.reorderableColumns"
+    :expandedRowIcon="props.expandedRowIcon"
+    :collapsedRowIcon="props.collapsedRowIcon"
+    :rowGroupMode="props.rowGroupMode"
+    :groupRowsBy="props.groupRowsBy"
+    :expandableRowGroups="props.expandableRowGroups"
+    :stateStorage="props.stateStorage"
+    :stateKey="props.stateKey"
+    :editMode="props.editMode"
+    :rowClass="props.rowClass"
+    :rowStyle="props.rowStyle"
+    :scrollable="props.scrollable"
+    :scrollHeight="props.scrollHeight"
+    :virtualScrollerOptions="props.virtualScrollerOptions"
+    :frozenValue="props.frozenValue"
+    :breakpoint="props.breakpoint"
+    :showHeaders="props.showHeaders"
+    :highlightOnSelect="props.highlightOnSelect"
+    :size="props.size"
+    :tableClass="props.tableClass"
+    :tableProps="props.tableProps"
+    :tableStyle="props.tableStyle"
+    :filterButtonProps="props.filterButtonProps"
+    :editButtonProps="props.editButtonProps"
+    style="width: 100%; height: fit-content;"
+    v-model:selection="localSelection"
+    v-model:rows="localRows"
+    v-model:first="localFirst"
+    v-model:sortField="localSortField"
+    v-model:sortOrder="localSortOrder"
+    v-model:filters="localFilters"
+    v-model:contextMenuSelection="localContextMenuSelection"
+    v-model:expandedRows="localExpandedRows"
+    v-model:expandedRowGroups="localExpandedRowGroups"
+    v-model:editingRows="localEditingRows"
+    v-model:multi-sort-meta="localMultiSortMeta"
+    @update:selection="emit('update:selection', $event)"
+    @update:context-menu-selection="emit('update:contextMenuSelection', $event)"
+    @update:editing-rows="emit('update:editingRows', $event)"
+    @update:expanded-row-groups="emit('update:expandedRowGroups', $event)"
+    @update:filters="emit('update:filters', $event)"
+    @update:first="emit('update:first', $event)"
+    @update:multi-sort-meta="emit('update:multiSortMeta', $event)"
+    @update:rows="emit('update:rows', $event)"
+    @update:sort-field="emit('update:sortField', $event)"
+    @update:sort-order="emit('update:sortOrder', $event)"
+    @page="emit('page', $event)"
+    @sort="emit('sort', $event)"
+    @rowSelect="emit('row-select', $event)"
+    @rowUnselect="emit('row-unselect', $event)"
+    @filter="emit('filter', $event)"
+    @valueChange="emit('value-change', $event)"
+    @rowClick="emit('row-click', $event)"
+    @rowCollapse="emit('row-collapse', $event)"
+    @rowContextmenu="emit('row-contextmenu', $event)"
+    @rowDblclick="emit('row-dbclick', $event)"
+    @rowEditCancel="emit('row-edit-cancel', $event)"
+    @rowEditInit="emit('row-edit-init', $event)"
+    @rowEditSave="emit('row-edit-save', $event)"
+    @rowExpand="emit('row-expand', $event)"
+    @rowReorder="emit('row-reorder', $event)"
+    @rowSelectAll="emit('row-select-all', $event)"
+    @rowUnselectAll="emit('row-unselect-all', $event)"
+    @rowgroupCollapse="emit('rowgroup-collapse', $event)"
+    @rowgroupExpand="emit('rowgroup-expand', $event)"
+    @columnReorder="emit('column-reorder', $event)"
+    @columnResizeEnd="emit('column-resize-end', $event)"
+    @cellEditCancel="emit('cell-edit-cancel', $event)"
+    @cellEditComplete="emit('cell-edit-complete', $event)"
+    @cellEditInit="emit('cell-edit-init', $event)"
+    @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"
+      :key="name"
+      v-slot:[name]="slotProps"
+    >
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+    <slot></slot>
+  </DataTable>
+</template>
+
+<style lang="css" scoped>
+.p-datatable{
+  box-sizing: border-box;
+}
+</style>