datatables.net-vue3 2.1.3 → 3.0.0

package/dist/datatables.net-vue3.d.ts

@@ -28,10 +28,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: InstallableComponent;
-export default _default;
-
-declare const _default_2: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
+export declare const DataTable: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
 /**
 * Load data for the table's content from an Ajax source
 */
@@ -76,7 +73,10 @@ options?: Config | undefined;
     default: (_: {}) => any;
 }>;
 
-export declare type InstallableComponent = typeof _default_2 & {
+declare const _default: InstallableComponent;
+export default _default;
+
+export declare type InstallableComponent = typeof DataTable & {
     install: Exclude<Plugin_2['install'], undefined>;
 };
 

package/dist/datatables.net-vue3.js

@@ -1 +1 @@
-"use strict";const r=require("vue"),v=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let c;const g={name:"Datatables.netVue",inheritAttrs:!1,use(o){c=o}},h=r.defineComponent({...g,props:{ajax:null,columns:null,data:null,options:null},emits:v,setup(o,{expose:d}){const s=o,f=r.ref(null),a=r.ref(),b=r.ref([]);r.watch(()=>s.data,e=>{var l,n,u,m;let t=(l=a.value)==null?void 0:l.data().toArray();for(let i of e)t!=null&&t.includes(i)||(n=a.value)==null||n.row.add(i);if(typeof t<"u")for(let i of t)e.includes(i)||(u=a.value)==null||u.row((k,y)=>y===i).remove();(m=a.value)==null||m.rows().invalidate().draw(!1),p(e)},{deep:!0}),r.onMounted(()=>{const e=r.getCurrentInstance();let t=s.options||{};if(s.data&&(t.data=s.data,p(t.data)),s.columns&&(t.columns=s.columns),s.ajax&&(t.ajax=s.ajax),!c)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");a.value=new c(r.unref(f),t);for(let l of v)a.value&&e&&a.value.on(l,function(){var n=Array.from(arguments),u=n.shift();n.unshift({event:u,dt:a}),n.unshift(l),e.emit.apply(e,n)})}),r.onBeforeUnmount(()=>{var e;(e=a.value)==null||e.destroy(!0)});function p(e){b.value=e.value?e.value.slice():e.slice()}return d({dt:a}),(e,t)=>t[0]||(r.setBlockTracking(-1),t[0]=r.createElementVNode("div",{class:"datatable"},[r.createElementVNode("table",r.mergeProps({ref_key:"table",ref:f},e.$attrs,{style:{width:"100%"}}),[r.renderSlot(e.$slots,"default")],16)]),r.setBlockTracking(1),t[0])}}),w=(()=>{const o=h;return o.install=d=>{d.component("Datatables.netVue",o)},o})();module.exports=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),v=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let f;const k={name:"Datatables.netVue",inheritAttrs:!1,use(i){f=i}},b=l.defineComponent({...k,props:{ajax:null,columns:null,data:null,options:null},emits:v,setup(i,{expose:d}){const s=i,p=l.ref(null),c={},u=l.ref(),h=l.ref([]);l.watch(()=>s.data,t=>{let e=u.value;if(e){for(var n=Object.keys(c),a=0;a<n.length;a++)delete c[n[a]];e.clear(),e.rows.add(t).draw(!1)}},{deep:!0}),l.onMounted(()=>{const t=l.getCurrentInstance();let e=s.options||{};if(s.data&&(e.data=s.data,g(e.data)),s.columns&&(e.columns=s.columns,y(e.columns,t)),s.ajax&&(e.ajax=s.ajax),e.columnDefs||(e.columnDefs=[]),t){let n=Object.keys(t.slots);for(let a=0;a<n.length;a++){let r=n[a];if(r.match(/^column\-/)){let o=r.replace("column-","");e.columnDefs.push({target:o.match(/^\d+$/)?parseInt(o):o+":name",render:"#"+r})}}y(e.columnDefs,t)}if(!f)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");u.value=new f(l.unref(p),e);for(let n of v)u.value&&t&&u.value.on(n,function(){var a=Array.from(arguments),r=a.shift();a.unshift({event:r,dt:u}),a.unshift(n),t.emit.apply(t,a)})}),l.onBeforeUnmount(()=>{var t;(t=u.value)==null||t.destroy(!0)});function g(t){h.value=t.value?t.value.slice():t.slice()}function m(t){return function(e,n,a,r){let o=r.row+","+r.col;if(!c[o]){let w=l.h("div",t({cellData:e,colIndex:r.col,rowData:a,rowIndex:r.row,type:n}));c[o]=document.createElement("div"),l.render(w,c[o])}return c[o]}}function y(t,e){if(e)for(let a=0;a<t.length;a++){let r=t[a];if(typeof r.render=="string"&&r.render.charAt(0)==="#"){var n=r.render.replace("#","");e.slots[n]&&(r.render=m(e.slots[n]))}else if(typeof r.render=="object"&&typeof r.render.display=="string"&&r.render.display.charAt(0)==="#"){var n=r.render.display.replace("#","");e.slots[n]&&(r.render.display=m(e.slots[n]))}}}return d({dt:u}),(t,e)=>e[0]||(l.setBlockTracking(-1),e[0]=l.createElementVNode("div",{class:"datatable"},[l.createElementVNode("table",l.mergeProps({ref_key:"table",ref:p},t.$attrs,{style:{width:"100%"}}),[l.renderSlot(t.$slots,"default")],16)]),l.setBlockTracking(1),e[0])}}),D=(()=>{const i=b;return i.install=d=>{d.component("Datatables.netVue",i)},i})();exports.DataTable=b;exports.default=D;

package/dist/datatables.net-vue3.mjs

@@ -1,5 +1,5 @@
-import { defineComponent as g, ref as d, watch as k, onMounted as x, getCurrentInstance as D, unref as _, onBeforeUnmount as j, setBlockTracking as v, createElementVNode as b, mergeProps as A, renderSlot as S } from "vue";
-const y = [
+import { defineComponent as k, ref as d, watch as x, onMounted as j, getCurrentInstance as I, unref as A, onBeforeUnmount as E, setBlockTracking as v, createElementVNode as b, mergeProps as R, renderSlot as S, h as T, render as _ } from "vue";
+const h = [
   "childRow",
   "column-sizing",
   "column-visibility",
@@ -45,14 +45,14 @@ const y = [
   "user-select",
   "stateRestore-change"
 ];
-let c;
+let f;
 const C = {
   name: "Datatables.netVue",
   inheritAttrs: !1,
-  use(s) {
-    c = s;
+  use(o) {
+    f = o;
   }
-}, E = /* @__PURE__ */ g({
+}, L = /* @__PURE__ */ k({
   ...C,
   props: {
     ajax: null,
@@ -60,61 +60,103 @@ const C = {
     data: null,
     options: null
   },
-  emits: y,
-  setup(s, { expose: u }) {
-    const r = s, f = d(null), a = d(), h = d([]);
-    k(
-      () => r.data,
-      (e) => {
-        var l, o, i, m;
-        let t = (l = a.value) == null ? void 0 : l.data().toArray();
-        for (let n of e)
-          t != null && t.includes(n) || (o = a.value) == null || o.row.add(n);
-        if (typeof t < "u")
-          for (let n of t)
-            e.includes(n) || (i = a.value) == null || i.row((I, w) => w === n).remove();
-        (m = a.value) == null || m.rows().invalidate().draw(!1), p(e);
+  emits: h,
+  setup(o, { expose: u }) {
+    const s = o, p = d(null), c = {}, i = d(), g = d([]);
+    x(
+      () => s.data,
+      (t) => {
+        let e = i.value;
+        if (e) {
+          for (var n = Object.keys(c), a = 0; a < n.length; a++)
+            delete c[n[a]];
+          e.clear(), e.rows.add(t).draw(!1);
+        }
       },
       {
         deep: !0
       }
-    ), x(() => {
-      const e = D();
-      let t = r.options || {};
-      if (r.data && (t.data = r.data, p(t.data)), r.columns && (t.columns = r.columns), r.ajax && (t.ajax = r.ajax), !c)
+    ), j(() => {
+      const t = I();
+      let e = s.options || {};
+      if (s.data && (e.data = s.data, w(e.data)), s.columns && (e.columns = s.columns, y(e.columns, t)), s.ajax && (e.ajax = s.ajax), e.columnDefs || (e.columnDefs = []), t) {
+        let n = Object.keys(t.slots);
+        for (let a = 0; a < n.length; a++) {
+          let r = n[a];
+          if (r.match(/^column\-/)) {
+            let l = r.replace("column-", "");
+            e.columnDefs.push({
+              target: l.match(/^\d+$/) ? parseInt(l) : l + ":name",
+              render: "#" + r
+            });
+          }
+        }
+        y(e.columnDefs, t);
+      }
+      if (!f)
         throw new Error(
           "DataTables library not set. See https://datatables.net/tn/19 for details."
         );
-      a.value = new c(_(f), t);
-      for (let l of y)
-        a.value && e && a.value.on(l, function() {
-          var o = Array.from(arguments), i = o.shift();
-          o.unshift({ event: i, dt: a }), o.unshift(l), e.emit.apply(e, o);
+      i.value = new f(A(p), e);
+      for (let n of h)
+        i.value && t && i.value.on(n, function() {
+          var a = Array.from(arguments), r = a.shift();
+          a.unshift({ event: r, dt: i }), a.unshift(n), t.emit.apply(t, a);
         });
-    }), j(() => {
-      var e;
-      (e = a.value) == null || e.destroy(!0);
+    }), E(() => {
+      var t;
+      (t = i.value) == null || t.destroy(!0);
     });
-    function p(e) {
-      h.value = e.value ? e.value.slice() : e.slice();
+    function w(t) {
+      g.value = t.value ? t.value.slice() : t.slice();
+    }
+    function m(t) {
+      return function(e, n, a, r) {
+        let l = r.row + "," + r.col;
+        if (!c[l]) {
+          let D = T("div", t({
+            cellData: e,
+            colIndex: r.col,
+            rowData: a,
+            rowIndex: r.row,
+            type: n
+          }));
+          c[l] = document.createElement("div"), _(D, c[l]);
+        }
+        return c[l];
+      };
+    }
+    function y(t, e) {
+      if (e)
+        for (let a = 0; a < t.length; a++) {
+          let r = t[a];
+          if (typeof r.render == "string" && r.render.charAt(0) === "#") {
+            var n = r.render.replace("#", "");
+            e.slots[n] && (r.render = m(e.slots[n]));
+          } else if (typeof r.render == "object" && typeof r.render.display == "string" && r.render.display.charAt(0) === "#") {
+            var n = r.render.display.replace("#", "");
+            e.slots[n] && (r.render.display = m(e.slots[n]));
+          }
+        }
     }
     return u({
-      dt: a
-    }), (e, t) => t[0] || (v(-1), t[0] = b("div", { class: "datatable" }, [
-      b("table", A({
+      dt: i
+    }), (t, e) => e[0] || (v(-1), e[0] = b("div", { class: "datatable" }, [
+      b("table", R({
         ref_key: "table",
-        ref: f
-      }, e.$attrs, { style: { width: "100%" } }), [
-        S(e.$slots, "default")
+        ref: p
+      }, t.$attrs, { style: { width: "100%" } }), [
+        S(t.$slots, "default")
       ], 16)
-    ]), v(1), t[0]);
+    ]), v(1), e[0]);
   }
 }), P = /* @__PURE__ */ (() => {
-  const s = E;
-  return s.install = (u) => {
-    u.component("Datatables.netVue", s);
-  }, s;
+  const o = L;
+  return o.install = (u) => {
+    u.component("Datatables.netVue", o);
+  }, o;
 })();
 export {
+  L as DataTable,
   P as default
 };

package/dist/datatables.net-vue3.umd.js

@@ -1 +1 @@
-(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.datatables=e.datatables||{},e.datatables["net-vue3"]=l(e.Vue))})(this,function(e){"use strict";const l=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let f;const y={name:"Datatables.netVue",inheritAttrs:!1,use(n){f=n}},h=e.defineComponent({...y,props:{ajax:null,columns:null,data:null,options:null},emits:l,setup(n,{expose:c}){const s=n,p=e.ref(null),r=e.ref(),w=e.ref([]);e.watch(()=>s.data,t=>{var i,o,u,b;let a=(i=r.value)==null?void 0:i.data().toArray();for(let d of t)a!=null&&a.includes(d)||(o=r.value)==null||o.row.add(d);if(typeof a<"u")for(let d of a)t.includes(d)||(u=r.value)==null||u.row((k,v)=>v===d).remove();(b=r.value)==null||b.rows().invalidate().draw(!1),m(t)},{deep:!0}),e.onMounted(()=>{const t=e.getCurrentInstance();let a=s.options||{};if(s.data&&(a.data=s.data,m(a.data)),s.columns&&(a.columns=s.columns),s.ajax&&(a.ajax=s.ajax),!f)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");r.value=new f(e.unref(p),a);for(let i of l)r.value&&t&&r.value.on(i,function(){var o=Array.from(arguments),u=o.shift();o.unshift({event:u,dt:r}),o.unshift(i),t.emit.apply(t,o)})}),e.onBeforeUnmount(()=>{var t;(t=r.value)==null||t.destroy(!0)});function m(t){w.value=t.value?t.value.slice():t.slice()}return c({dt:r}),(t,a)=>a[0]||(e.setBlockTracking(-1),a[0]=e.createElementVNode("div",{class:"datatable"},[e.createElementVNode("table",e.mergeProps({ref_key:"table",ref:p},t.$attrs,{style:{width:"100%"}}),[e.renderSlot(t.$slots,"default")],16)]),e.setBlockTracking(1),a[0])}});return(()=>{const n=h;return n.install=c=>{c.component("Datatables.netVue",n)},n})()});
+(function(l,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(l=typeof globalThis<"u"?globalThis:l||self,r((l.datatables=l.datatables||{},l.datatables["net-vue3"]={}),l.Vue))})(this,function(l,r){"use strict";const m=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let f;const w={name:"Datatables.netVue",inheritAttrs:!1,use(d){f=d}},y=r.defineComponent({...w,props:{ajax:null,columns:null,data:null,options:null},emits:m,setup(d,{expose:p}){const o=d,b=r.ref(null),u={},c=r.ref(),v=r.ref([]);r.watch(()=>o.data,t=>{let e=c.value;if(e){for(var s=Object.keys(u),a=0;a<s.length;a++)delete u[s[a]];e.clear(),e.rows.add(t).draw(!1)}},{deep:!0}),r.onMounted(()=>{const t=r.getCurrentInstance();let e=o.options||{};if(o.data&&(e.data=o.data,D(e.data)),o.columns&&(e.columns=o.columns,g(e.columns,t)),o.ajax&&(e.ajax=o.ajax),e.columnDefs||(e.columnDefs=[]),t){let s=Object.keys(t.slots);for(let a=0;a<s.length;a++){let n=s[a];if(n.match(/^column\-/)){let i=n.replace("column-","");e.columnDefs.push({target:i.match(/^\d+$/)?parseInt(i):i+":name",render:"#"+n})}}g(e.columnDefs,t)}if(!f)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");c.value=new f(r.unref(b),e);for(let s of m)c.value&&t&&c.value.on(s,function(){var a=Array.from(arguments),n=a.shift();a.unshift({event:n,dt:c}),a.unshift(s),t.emit.apply(t,a)})}),r.onBeforeUnmount(()=>{var t;(t=c.value)==null||t.destroy(!0)});function D(t){v.value=t.value?t.value.slice():t.slice()}function h(t){return function(e,s,a,n){let i=n.row+","+n.col;if(!u[i]){let j=r.h("div",t({cellData:e,colIndex:n.col,rowData:a,rowIndex:n.row,type:s}));u[i]=document.createElement("div"),r.render(j,u[i])}return u[i]}}function g(t,e){if(e)for(let a=0;a<t.length;a++){let n=t[a];if(typeof n.render=="string"&&n.render.charAt(0)==="#"){var s=n.render.replace("#","");e.slots[s]&&(n.render=h(e.slots[s]))}else if(typeof n.render=="object"&&typeof n.render.display=="string"&&n.render.display.charAt(0)==="#"){var s=n.render.display.replace("#","");e.slots[s]&&(n.render.display=h(e.slots[s]))}}}return p({dt:c}),(t,e)=>e[0]||(r.setBlockTracking(-1),e[0]=r.createElementVNode("div",{class:"datatable"},[r.createElementVNode("table",r.mergeProps({ref_key:"table",ref:b},t.$attrs,{style:{width:"100%"}}),[r.renderSlot(t.$slots,"default")],16)]),r.setBlockTracking(1),e[0])}}),k=(()=>{const d=y;return d.install=p=>{p.component("Datatables.netVue",d)},d})();l.DataTable=y,l.default=k,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datatables.net-vue3",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "description": "Vue3 component for DataTables",
   "main": "dist/datatables.net-vue3.umd.js",
   "module": "dist/datatables.net-vue3.mjs",
@@ -29,8 +29,7 @@
     "vue-tsc": "^1.0.16"
   },
   "peerDependencies": {
-    "datatables.net": "^1.13.1",
-    "jquery": "^3.6.0",
+    "datatables.net": "^2",
     "vue": "^3.0.5"
   },
   "engines": {
@@ -43,8 +42,5 @@
   "author": {
     "name": "SpryMedia Ltd",
     "url": "http://datatables.net"
-  },
-  "dependencies": {
-    "datatables.net-responsive-dt": "^2.4.0"
   }
 }

package/src/DataTable.vue

@@ -0,0 +1,249 @@
+<script lang="ts">
+export let DataTablesLib: any;
+
+export default {
+	name: 'Datatables.netVue',
+	inheritAttrs: false,
+	use(lib: any) {
+		DataTablesLib = lib;
+	}
+};
+</script>
+
+<script lang="ts" setup>
+// imports
+import {
+	h,
+	ref,
+	render,
+	unref,
+	watch,
+	onMounted,
+	onBeforeUnmount,
+	getCurrentInstance
+} from 'vue';
+import type { Api, Config, ConfigColumns } from 'datatables.net';
+import dtEvents from './dtEvents';
+
+// props
+const props = defineProps<{
+	/**
+	 * Load data for the table's content from an Ajax source
+	 */
+	ajax?: Config['ajax'];
+	/**
+	 * Set column specific initialisation properties.
+	 */
+	columns?: ConfigColumns[];
+	/**
+	 * Data to use as the display data for the table.
+	 */
+	data?: any;
+	/**
+	 * DataTables options
+	 */
+	options?: Config;
+}>();
+
+// emits
+defineEmits(dtEvents);
+
+// setup
+const table = ref<HTMLTableElement | null>(null);
+const elements: { [key: string]: HTMLElement } = {};
+
+// data
+const dt = ref<Api<any>>();
+const oldData = ref<any[]>([]);
+
+// computed
+
+// watch
+watch(
+	() => props.data,
+	(newVal) => {
+		let api = dt.value;
+
+		if (!api) {
+			return;
+		}
+
+		var keys = Object.keys(elements);
+
+		for (var i = 0; i < keys.length; i++) {
+			delete elements[keys[i]];
+		}
+
+		api.clear();
+		api.rows.add(newVal).draw(false);
+	},
+	{
+		deep: true
+	}
+);
+
+// lifecycle
+onMounted(() => {
+	const inst = getCurrentInstance();
+	let options: any = props.options || {};
+
+	if (props.data) {
+		options.data = props.data;
+		saveOld(options.data);
+	}
+
+	if (props.columns) {
+		options.columns = props.columns;
+		applyRenderers(options.columns, inst);
+	}
+
+	if (props.ajax) {
+		options.ajax = props.ajax;
+	}
+
+	// Auto detect column slots (those using a `column-` prefix,
+	// if not using a prefix, they need to be manually assigned).
+	if (! options.columnDefs) {
+		options.columnDefs = [];
+	}
+
+	if (inst) {
+		let slots = Object.keys(inst.slots);
+
+		for (let i=0 ; i<slots.length ; i++) {
+			let name = slots[i];
+			
+			if (name.match(/^column\-/)) {
+				let part = name.replace('column-', '');
+
+				options.columnDefs.push({
+					target: part.match(/^\d+$/)
+						? parseInt(part)
+						: part + ':name',
+					render: '#' + name
+				});
+			}
+		}
+
+		applyRenderers(options.columnDefs, inst);
+	}
+
+	if (!DataTablesLib) {
+		throw new Error(
+			'DataTables library not set. See https://datatables.net/tn/19 for details.'
+		);
+	}
+
+	// Create the DataTable!
+	dt.value = new DataTablesLib(unref(table), options);
+
+	// Re-export all DataTables events by listening for them using DataTable's
+	// `on` method and then emit them to our Vue component
+	for (let eName of dtEvents) {
+		if (dt.value && inst) {
+			dt.value.on(eName, function () {
+				var args = Array.from(arguments);
+				var event = args.shift();
+
+				args.unshift({ event: event, dt: dt });
+				args.unshift(eName);
+
+				inst.emit.apply(inst, args as any);
+			});
+		}
+	}
+});
+
+onBeforeUnmount(() => {
+	dt.value?.destroy(true);
+});
+
+// Methods
+function saveOld(d: any) {
+	oldData.value = d.value ? d.value.slice() : d.slice();
+}
+
+/**
+ * Create a DataTables rendering function for a slot
+ *
+ * @param slot Slot to render
+ */
+function createRenderer(slot: any) {
+	return function (
+		data: any,
+		type: string,
+		row: any,
+		meta: any
+	) {
+		let key = meta.row + ',' + meta.col;
+
+		if (!elements[key]) {
+			let content = h('div', slot({
+				cellData: data,
+				colIndex: meta.col,
+				rowData: row,
+				rowIndex: meta.row,
+				type
+			}));
+
+			elements[key] = document.createElement('div');
+			render(content, elements[key]);
+		}
+
+		return elements[key];
+	}
+}
+
+/**
+ * Check and see if there are slots that should be applied to a column
+ *
+ * @param columns Array of columns (`columns` or `columnDefs`)
+ * @param inst Vue instance
+ */
+function applyRenderers(columns: any[], inst: any) {
+	if (! inst) {
+		return;
+	}
+
+	for (let i=0 ; i<columns.length ; i++) {
+		let col = columns[i];
+
+		// Top level rendering given as a slot name
+		if (typeof col.render === 'string' && col.render.charAt(0) === '#') {
+			var name = col.render.replace('#', '');
+
+			if (inst!.slots[name]) {
+				col.render = createRenderer(inst!.slots[name]);
+			}
+		}
+		else if (
+			// Display orhtogonal data point given as a slot name
+			typeof col.render === 'object' &&
+			typeof col.render.display === 'string' &&
+			col.render.display.charAt(0) === '#'
+		) {
+			var name = col.render.display.replace('#', '');
+
+			if (inst!.slots[name]) {
+				col.render.display = createRenderer(inst!.slots[name]);
+			}
+		}
+	}
+}
+
+// expose
+defineExpose({
+	/**
+	 * DataTable instance
+	 */
+	dt
+});
+</script>
+
+<template>
+	<div class="datatable" v-once>
+		<table ref="table" v-bind="$attrs" style="width: 100%">
+			<slot></slot>
+		</table>
+	</div>
+</template>

package/src/index.ts

@@ -1,17 +1,17 @@
 import { App, Plugin } from 'vue';
 
 // Import vue component
-import { default as component } from './datatables.net-vue.vue';
+import { default as DataTable } from './DataTable.vue';
 
 // Define typescript interfaces for installable component
-export type InstallableComponent = typeof component & { install: Exclude<Plugin['install'], undefined> };
+export type InstallableComponent = typeof DataTable & { install: Exclude<Plugin['install'], undefined> };
 
 // Default export is installable instance of component.
 // IIFE injects install function into component, allowing component
 // to be registered via Vue.use() as well as Vue.component(),
 export default /*#__PURE__*/((): InstallableComponent => {
   // Assign InstallableComponent type
-  const installable = component as unknown as InstallableComponent;
+  const installable = DataTable as unknown as InstallableComponent;
 
   // Attach install function executed by Vue.use()
   installable.install = (app: App) => {
@@ -20,6 +20,10 @@ export default /*#__PURE__*/((): InstallableComponent => {
   return installable;
 })();
 
+export {
+  DataTable
+};
+
 // It's possible to expose named exports when writing components that can
 // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
 // export const RollupDemoDirective = directive;

package/src/datatables.net-vue.vue

@@ -1,152 +0,0 @@
-<script lang="ts">
-  export let DataTablesLib: any
-
-  export default {
-    name: 'Datatables.netVue',
-    inheritAttrs: false,
-    use(lib: any) {
-      DataTablesLib = lib;
-    }
-  }
-</script>
-
-<script lang="ts" setup>
-// imports
-import { ref, unref, watch, onMounted, onBeforeUnmount, getCurrentInstance} from 'vue';
-import type { Api, Config, ConfigColumns } from 'datatables.net';
-import dtEvents from './dtEvents';
-
-// props
-const props = defineProps<{
-	/**
-	 * Load data for the table's content from an Ajax source
-	 */
-	ajax?: Config['ajax'];
-	/**
-	 * Set column specific initialisation properties.
-	 */
-	columns?: ConfigColumns[];
-	/**
-	 * Data to use as the display data for the table.
-	 */
-	data?: any;
-	/**
-	 * DataTables options
-	 */
-	options?: Config;
-}>();
-
-// emits
-defineEmits(dtEvents);
-
-// setup
-const table = ref<HTMLTableElement | null>(null);
-
-// data
-const dt = ref<Api<any>>();
-const oldData = ref<any[]>([]);
-
-// computed
-
-// watch
-watch(
-	() => props.data,
-	(newVal) => {
-		let known = dt.value?.data().toArray();
-
-		// Find any new rows
-		for (let n of newVal) {
-			if (!known?.includes(n)) {
-				dt.value?.row.add(n);
-			}
-		}
-
-		// Remove any old rows
-		if (typeof known !== 'undefined') {
-			for (let k of known) {
-				if (!newVal.includes(k)) {
-					dt.value?.row((_idx: any, d: any) => d === k).remove();
-				}
-			}
-		}
-
-		// Data in other rows might have changes, so we need to invalidate the rows
-		dt.value?.rows().invalidate().draw(false);
-
-		saveOld(newVal);
-	},
-	{
-		deep: true,
-	}
-);
-
-// lifecycle
-onMounted(() => {
-	const inst = getCurrentInstance();
-	let options: any = props.options || {};
-
-	if (props.data) {
-		options.data = props.data;
-		saveOld(options.data);
-	}
-
-	if (props.columns) {
-		options.columns = props.columns;
-	}
-
-	if (props.ajax) {
-		options.ajax = props.ajax;
-	}
-
-	if (!DataTablesLib) {
-		throw new Error(
-			'DataTables library not set. See https://datatables.net/tn/19 for details.'
-		);
-	}
-
-	// Create the DataTable!
-	dt.value = new DataTablesLib(unref(table), options);
-
-	// Re-export all DataTables events by listening for them using DataTable's
-	// `on` method and then emit them to our Vue component
-	for (let eName of dtEvents) {
-		if (dt.value && inst) {
-			dt.value.on(eName, function() {
-				var args = Array.from(arguments);
-				var event = args.shift();
-
-				args.unshift({ event: event, dt: dt });
-				args.unshift(eName);
-
-				inst.emit.apply(inst, args as any);
-			});
-		}
-	}
-});
-
-onBeforeUnmount(() => {
-	dt.value?.destroy(true);
-});
-
-// methods
-function saveOld(d: any) {
-	oldData.value = d.value ? d.value.slice() : d.slice();
-}
-
-// expose
-defineExpose({
-	/**
-	 * DataTable instance
-	 */
-	dt,
-});
-
-</script>
-
-<template>
-  <div class="datatable" v-once>
-    <table ref="table" v-bind="$attrs" style="width:100%">
-      <slot></slot>
-    </table>
-  </div>
-</template>