+import DataTable from 'primevue/datatable';
+import type { DataTableProps, DataTableSlots } from 'primevue/datatable';
+import { useId, ref, watch, computed } from 'vue';
+
+export interface IVDataTable extends Partial>{
+ id?: string
+ title?: string
+}
+
+const props = withDefaults(defineProps(), {
+ 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) => unknown
+};
+
+const slots = defineSlots();
+
+
+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);
+ }
+});
+
+
+
+
+
+
+
+
+
+
+
+
+