innoboxrr-vue-datatable 1.2.24 → 1.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-vue-datatable",
-  "version": "1.2.24",
+  "version": "1.2.26",
   "description": "Datatable para vue3",
   "main": "index.js",
   "scripts": {

package/src/DataTable.vue

@@ -86,6 +86,7 @@
 					:data-table="dataTable"
 					:extra-params="extraParams"
 					:show-table-header="showTableHeader"
+					:data-table-components="dataTableComponents"
 					@sortColumn="sortColumn"
 					@actionButtonClicked="actionButtonClicked"
 					@actionClicked="actionClicked" />
@@ -189,6 +190,7 @@
 					meta: [],
 					links: []
 				},
+				dataTableComponents: this.model.dataTableComponents(),
 				sort: this.model.dataTableSort(),
 				orderBy: 'id',
 				internalSort: false,

package/src/components/DataTableComponent.vue

@@ -29,11 +29,19 @@
 		        		v-for="head in dataTable.head" 
 		        		:key="head.id"
 		        		class="px-6 py-4">
+						<template v-if="head.component">
+							<component
+								:is="getComponent(head.component)"
+								v-bind="setData(head, body)"
+								@callback="head.callback && typeof head.callback === 'function' ? head.callback($event, body) : null" />
+						</template>
 		        		<span 
-		        			v-if="head.html" 
+		        			v-else-if="head.html" 
 		        			class="dark:text-white" 
 		        			v-html="setData(head, body)"></span>
-		        		<span v-else class="dark:text-white">{{ setData(head, body) }}</span>
+		        		<span 
+							v-else 
+							class="dark:text-white">{{ setData(head, body) }}</span>
 		        	</td>
 		            <td v-if="actions" class="uk-text-right">
 		            	<button 
@@ -89,6 +97,7 @@
 
 <script>
 	
+	import { shallowRef } from 'vue';
 	import NavDropdownComponent from './NavDropdownComponent.vue'
 	import IconRouteComponent from './IconRouteComponent.vue'
 	import IconLinkComponent from './IconLinkComponent.vue'
@@ -117,9 +126,26 @@
 			showTableHeader: {
 				type: Boolean,
 				default: true,
+			},
+			dataTableComponents: {
+				type: Object,
+				default: () => ({})
 			}
 		},
 		emits: ['sortColumn', 'actionButtonClicked', 'actionClicked'],
+		setup(props) {
+			// Registrar componentes dinámicos
+			const components = shallowRef(props.dataTableComponents);
+
+			// Resolver el componente dinámico desde el mapeo
+			const getComponent = (componentName) => {
+				return components.value[componentName] || null;
+			};
+
+			return {
+				getComponent,
+			};
+		},
 		methods: {
 			sortColumn(data) {
 				this.$emit('sortColumn', data);