✨ feature: Column component added

src/components/table/VColumn.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import Column from 'primevue/column';
+import type { ColumnProps, ColumnSlots } from 'primevue/column';
+import { computed } from 'vue';
+
+export type IVColumn = Partial<Omit<ColumnProps , 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>;
+
+const props = withDefaults(defineProps<IVColumn>(), {
+  columnKey: undefined,
+  field: undefined,
+  sortField: undefined,
+  filterField: undefined,
+  dataType: undefined,
+  sortable: false,
+  header: undefined,
+  footer: undefined,
+  showFilterMenu: true,
+  showFilterOperator: true,
+  showClearButton: false,
+  showApplyButton: true,
+  showFilterMatchModes: true,
+  showAddButton: true,
+  filterMatchModeOptions: undefined,
+  maxConstraints: 2,
+  excludeGlobalFilter: false,
+  selectionMode: undefined,
+  expander: false,
+  colspan: undefined,
+  rowspan: undefined,
+  rowReorder: false,
+  rowReorderIcon: undefined,
+  reorderableColumn: false,
+  rowEditor: false,
+  frozen: false,
+  alignFrozen: 'left',
+  exportable: false,
+  exportHeader: undefined,
+  exportFooter: undefined,
+  filterMatchMode: undefined,
+  hidden: false,
+})
+
+const slots = defineSlots<ColumnSlots>();
+
+const columnSlotKeys = [
+  'body',
+  'node',
+  'header',
+  'footer',
+  'editor',
+  'filter',
+  'filterheader',
+  'filterfooter',
+  'filterclear',
+  'filterapply',
+  'loading',
+  'rowtoggleicon',
+  'rowcheckboxicon',
+  'roweditoriniticon',
+  'roweditorsaveicon',
+  'roweditorcancelicon',
+  'filtericon',
+  'filterclearicon',
+  'filterremoveicon',
+  'filteraddicon',
+  'sorticon',
+  'headercheckboxicon',
+  'rowreordericon',
+  'nodetoggleicon'
+] as const;
+
+const availableSlots = computed(() =>
+  columnSlotKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
+);
+
+</script>
+
+<template>
+  <Column
+    :column-key="props.columnKey"
+    :field="props.field"
+    :sort-field="props.sortField"
+    :filter-field="props.filterField"
+    :data-type="props.dataType"
+    :sortable="props.sortable"
+    :header="props.header"
+    :footer="props.footer"
+    :show-filter-menu="props.showFilterMenu"
+    :show-filter-operator="props.showFilterOperator"
+    :show-clear-button="props.showClearButton"
+    :show-apply-button="props.showApplyButton"
+    :show-filter-match-modes="props.showFilterMatchModes"
+    :show-add-button="props.showAddButton"
+    :filter-match-mode-options="props.filterMatchModeOptions"
+    :max-constraints="props.maxConstraints"
+    :exclude-global-filter="props.excludeGlobalFilter"
+    :selection-mode="props.selectionMode"
+    :expander="props.expander"
+    :colspan="props.colspan"
+    :rowspan="props.rowspan"
+    :row-reorder="props.rowReorder"
+    :row-reorder-icon="props.rowReorderIcon"
+    :reorderable-column="props.reorderableColumn"
+    :row-editor="props.rowEditor"
+    :frozen="props.frozen"
+    :align-frozen="props.alignFrozen"
+    :exportable="props.exportable"
+    :export-header="props.exportHeader"
+    :export-footer="props.exportFooter"
+    :filter-match-mode="props.filterMatchMode"
+    :hidden="props.hidden"
+  >
+    <template
+    v-for="([name]) in availableSlots"
+    :key="name"
+    v-slot:[name]="slotProps"
+  >
+    <slot :name="name" v-bind="slotProps" />
+  </template>
+  </Column>
+</template>