✨ feature: Data table component added
This commit is contained in:
Paul Valerie GOMA
parent
a4bbfeb9ad
commit
3d6b27c13c
414
src/components/table/VDataTable.vue
Normal file
414
src/components/table/VDataTable.vue
Normal file
|
|
@ -0,0 +1,414 @@
|
||||||
|
<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,
|
||||||
|
})
|
||||||
|
|
||||||
|
const slots = defineSlots<DataTableSlots>();
|
||||||
|
|
||||||
|
const dataTableSlotKeys = [
|
||||||
|
'header',
|
||||||
|
'footer',
|
||||||
|
'empty',
|
||||||
|
'groupheader',
|
||||||
|
'groupfooter',
|
||||||
|
'loading',
|
||||||
|
'expansion',
|
||||||
|
'loadingicon',
|
||||||
|
'reorderindicatorupicon', // deprecated
|
||||||
|
'rowreorderindicatorupicon',
|
||||||
|
'reorderindicatordownicon', // deprecated
|
||||||
|
'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)"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-for="([name]) in availableSlots"
|
||||||
|
:key="name"
|
||||||
|
v-slot:[name]="slotProps"
|
||||||
|
>
|
||||||
|
<slot :name="name" v-bind="slotProps" />
|
||||||
|
</template>
|
||||||
|
</DataTable>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user