mcv-data-table 0.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mabbasi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# mcv-data-table
+
+A Vue 3 + Vuetify 3 data table component based on `v-data-table` with column visibility, column resizing, and drag-and-drop column reordering.
+
+## Demo
+
+https://mojtabaabbasi2023.github.io/MCVDataTable/
+
+## Requirements
+
+- Vue `^3.5.0`
+- Vuetify `3.11.3`
+
+## Installation
+
+```bash
+npm install mcv-data-table
+```
+
+## Usage
+
+Register the plugin:
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import MCVDataTablePlugin from 'mcv-data-table'
+import 'mcv-data-table/style.css'
+
+const app = createApp(App)
+
+app.use(MCVDataTablePlugin)
+app.mount('#app')
+```
+
+Use the component:
+
+```vue
+<template>
+  <MCVDataTable :headers="headers" :items="items" />
+</template>
+```
+
+Or import the component directly:
+
+```ts
+import { MCVDataTable } from 'mcv-data-table'
+import 'mcv-data-table/style.css'
+```
+
+## Header Props
+
+Headers use the same props as Vuetify `v-data-table` headers. This package adds the following optional header props:
+
+```ts
+type MCVDataTableHeader = {
+  group?: string
+  hide?: boolean
+  resizable?: boolean
+}
+```
+
+### `resizable`
+
+Set `resizable` to `false` to disable resizing for a specific column.
+
+```ts
+{ title: 'Amount', key: 'amount', resizable: false }
+```
+
+### `group`
+
+Use `group` to group columns in the column visibility menu. Columns with the same group value are displayed together.
+
+```ts
+{ title: 'Status', key: 'status', group: 'workflow' }
+{ title: 'Owner', key: 'owner', group: 'workflow' }
+```
+
+### `hide`
+
+Set `hide` to `true` to hide a column by default when the table is first rendered.
+
+```ts
+{ title: 'Amount', key: 'amount', hide: true }
+```
+
+## Notes
+
+This package expects Vuetify to be installed and configured in the consuming Vue application.
+
+## License
+
+MIT

package/dist/components/MCVdataTable.vue.d.ts

@@ -0,0 +1,50 @@
+import { DataTableHeader } from 'vuetify';
+type DataTableItem = Record<string, any>;
+interface GenericTableColumn extends DataTableHeader {
+    key: string;
+    group?: string | number;
+    disabled?: boolean;
+    hide?: boolean;
+    resizable?: boolean;
+}
+type RowPropsContext = {
+    item: DataTableItem;
+    index: number;
+};
+interface Props {
+    items: DataTableItem[];
+    headers: GenericTableColumn[];
+    pageSize?: number;
+    resizeDirection?: 'rtl' | 'ltr';
+    loading?: boolean;
+    itemValue?: string;
+    activeItemValue?: string | number;
+    fixedHeaders?: GenericTableColumn[];
+    fixedEndHeaders?: GenericTableColumn[];
+    tableClass?: string;
+    showExpand?: boolean;
+    singleExpand?: boolean;
+    rowProps?: (context: RowPropsContext) => Record<string, any>;
+}
+declare function __VLS_template(): any;
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    headers: GenericTableColumn[];
+    items: DataTableItem[];
+    pageSize: number;
+    resizeDirection: "rtl" | "ltr";
+    loading: boolean;
+    itemValue: string;
+    fixedHeaders: GenericTableColumn[];
+    fixedEndHeaders: GenericTableColumn[];
+    tableClass: string;
+    showExpand: boolean;
+    singleExpand: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, any, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/useDataTableResize.d.ts

@@ -0,0 +1,14 @@
+import { DataTableHeader } from 'vuetify';
+interface UseDataTableResizeOptions {
+    tableRef: Ref;
+    headers: Ref<DataTableHeader[]>;
+    minWidth?: number;
+    defaultWidth?: number;
+    direction?: 'rtl' | 'ltr';
+}
+export declare function useDataTableResize({ tableRef, headers, minWidth, defaultWidth, direction }: UseDataTableResizeOptions): {
+    startResize: (event: MouseEvent, index: number) => void;
+    getTable: () => any;
+    tableWidth: import('vue').ComputedRef<number>;
+};
+export {};

package/dist/composables/useTableColumns.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+import { DataTableHeader } from 'vuetify';
+type TableColumnWithVisibility = DataTableHeader & {
+    key: string;
+    hide?: boolean;
+};
+export declare function useTableColumns<T extends TableColumnWithVisibility = TableColumnWithVisibility>(fixedHeaders: T[], toggleHeaders: Ref<T[]>, fixedEndHeaders: T[], tableRef?: Ref, defaultWidth?: number): {
+    visibleColumns: Ref<string[], string[]>;
+    filteredHeaders: import('vue').ComputedRef<T[]>;
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+import { default as MCVDataTable } from './components/MCVdataTable.vue';
+export { MCVDataTable };
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/dist/mcv-data-table.js

@@ -0,0 +1,353 @@
+import { ref as _, computed as R, watch as U, nextTick as P, onMounted as Z, defineComponent as ee, useSlots as te, resolveComponent as k, openBlock as E, createBlock as B, unref as u, normalizeClass as I, createSlots as ne, withCtx as x, createElementVNode as W, renderSlot as A, renderList as N, createElementBlock as H, createVNode as $, Fragment as ae, createCommentVNode as q, isRef as re, mergeProps as oe, createTextVNode as le, withModifiers as se, toDisplayString as X, normalizeProps as ie, guardReactiveProps as de } from "vue";
+function ue(a, t, y, c, v = 200) {
+  const i = _(
+    t.value.filter((o) => !o.hide).map((o) => o.key)
+  ), d = R(() => {
+    const o = t.value.filter(
+      (m) => i.value.includes(m.key)
+    );
+    return [...a, ...o, ...y];
+  });
+  function b() {
+    var m, p;
+    const o = (p = (m = c == null ? void 0 : c.value) == null ? void 0 : m.$el) == null ? void 0 : p.querySelector("table");
+    return Array.from(
+      (o == null ? void 0 : o.querySelectorAll("thead th")) ?? []
+    );
+  }
+  function z() {
+    const o = b();
+    o.length && d.value.forEach((m, p) => {
+      var e;
+      if (m.width != null)
+        return;
+      (((e = o[p]) == null ? void 0 : e.getBoundingClientRect().width) ?? v) < v && (m.width = v);
+    });
+  }
+  return U(
+    () => [...i.value],
+    async () => {
+      await P(), z();
+    },
+    { flush: "post" }
+  ), {
+    visibleColumns: i,
+    filteredHeaders: d
+  };
+}
+function ce({
+  tableRef: a,
+  headers: t,
+  minWidth: y = 80,
+  defaultWidth: c = 120,
+  direction: v = "rtl"
+}) {
+  const i = _(!1), d = R(() => t.value.reduce((e, s) => {
+    const w = typeof s.width == "number" ? s.width : Number.parseFloat(s.width ?? "0");
+    return e + (Number.isFinite(w) ? w : 0);
+  }, 0));
+  function b() {
+    var e, s;
+    return (s = (e = a.value) == null ? void 0 : e.$el) == null ? void 0 : s.querySelector("table");
+  }
+  function z() {
+    const e = b();
+    return Array.from(
+      (e == null ? void 0 : e.querySelectorAll("thead th")) ?? []
+    );
+  }
+  function o() {
+    const e = z();
+    t.value.forEach((s, w) => {
+      var S;
+      if (s.width != null)
+        return;
+      const D = (S = e[w]) == null ? void 0 : S.getBoundingClientRect().width;
+      s.width = Math.max(
+        y,
+        Math.round(D || c)
+      );
+    });
+  }
+  function m() {
+    o(), i.value = !0, p();
+  }
+  function p() {
+    const e = b();
+    !e || !i.value || (e.style.width = d.value + "px");
+  }
+  function f(e, s) {
+    e.preventDefault(), m();
+    const w = e.pageX, D = t.value[s].width, S = typeof D == "number" ? D : Number.parseFloat(D ?? `${c}`);
+    function M(r) {
+      const T = v === "rtl" ? w - r.pageX : r.pageX - w;
+      t.value[s].width = Math.max(
+        y,
+        S + T
+      ), p();
+    }
+    function n() {
+      document.removeEventListener(
+        "mousemove",
+        M
+      ), document.removeEventListener(
+        "mouseup",
+        n
+      );
+    }
+    document.addEventListener(
+      "mousemove",
+      M
+    ), document.addEventListener(
+      "mouseup",
+      n
+    );
+  }
+  return Z(() => {
+    P(() => {
+      p();
+    });
+  }), U(
+    () => t.value.map((e) => e.key),
+    () => {
+      P(() => {
+        i.value && o(), p();
+      });
+    }
+  ), {
+    startResize: f,
+    getTable: b,
+    tableWidth: d
+  };
+}
+function fe(a, t, y) {
+  if (!t || t === y)
+    return;
+  const c = a.findIndex(
+    (d) => d.key === t
+  ), v = a.findIndex(
+    (d) => d.key === y
+  );
+  if (c === -1 || v === -1)
+    return;
+  const [i] = a.splice(c, 1);
+  a.splice(v, 0, i);
+}
+const ve = {
+  key: 0,
+  class: "d-flex align-center justify-space-between w-100"
+}, me = ["onDragstart", "onDragover", "onDragenter", "onDragleave", "onDrop"], pe = ["onMousedown"], ge = { class: "mc-vdata-table__row-number" }, he = ["colspan"], ye = /* @__PURE__ */ ee({
+  __name: "MCVdataTable",
+  props: {
+    items: { default: () => [] },
+    headers: { default: () => [] },
+    pageSize: { default: 20 },
+    resizeDirection: { default: "rtl" },
+    loading: { type: Boolean, default: !1 },
+    itemValue: { default: "id" },
+    activeItemValue: {},
+    fixedHeaders: { default: () => [{ key: "data-table-expand", width: 69, resizable: !1 }] },
+    fixedEndHeaders: { default: () => [] },
+    tableClass: { default: "elevation-1 report-table" },
+    showExpand: { type: Boolean, default: !1 },
+    singleExpand: { type: Boolean, default: !0 },
+    rowProps: {}
+  },
+  setup(a) {
+    const t = a, y = _([...t.headers]), c = _([...t.headers]), v = _([]), i = _(null), { visibleColumns: d, filteredHeaders: b } = ue(
+      t.fixedHeaders,
+      c,
+      t.fixedEndHeaders,
+      i
+    ), z = te(), o = R(
+      () => Object.keys(z).filter(
+        (n) => n.startsWith("item.")
+      )
+    ), m = (n) => {
+      var r;
+      return t.rowProps ? t.rowProps(n) : {
+        class: t.activeItemValue !== void 0 && ((r = n.item) == null ? void 0 : r[t.itemValue]) === t.activeItemValue ? "active" : ""
+      };
+    }, { startResize: p } = ce({
+      tableRef: i,
+      headers: b,
+      minWidth: 80,
+      defaultWidth: 120,
+      direction: t.resizeDirection
+    }), f = _(), e = _(null);
+    function s(n, r, T) {
+      if (f.value = r, !n.dataTransfer) return;
+      n.dataTransfer.effectAllowed = "move", n.dataTransfer.setData("text/plain", r);
+      const C = document.createElement("div");
+      C.className = "mc-vdata-table__drag-preview", C.textContent = String(T || r), document.body.appendChild(C), n.dataTransfer.setDragImage(C, 14, 16), window.setTimeout(() => C.remove(), 0);
+    }
+    function w(n) {
+      f.value && f.value !== n && (e.value = n);
+    }
+    function D(n) {
+      e.value === n && (e.value = null);
+    }
+    function S() {
+      f.value = null, e.value = null;
+    }
+    function M(n) {
+      const r = f.value;
+      if (r)
+        try {
+          fe(
+            c.value,
+            r,
+            n
+          );
+        } finally {
+          f.value = null, e.value = null;
+        }
+    }
+    return (n, r) => {
+      const T = k("v-icon"), C = k("v-btn"), j = k("v-divider"), O = k("v-checkbox"), G = k("v-list-item"), J = k("v-list"), K = k("v-menu"), Q = k("v-data-table");
+      return E(), B(Q, {
+        headers: u(b),
+        items: a.items,
+        "hide-default-footer": "",
+        "items-per-page": a.pageSize,
+        class: I(`mc-vdata-table ${a.tableClass}`),
+        "show-expand": a.showExpand,
+        "single-expand": a.singleExpand,
+        expanded: u(v),
+        "item-value": a.itemValue,
+        "onUpdate:expanded": r[1] || (r[1] = (g) => v.value = g),
+        "fixed-header": "",
+        loading: a.loading,
+        "row-props": m,
+        ref_key: "tableRef",
+        ref: i,
+        "disable-sort": ""
+      }, ne({
+        "expanded-row": x(({ columns: g, item: V }) => [
+          W("tr", null, [
+            W("td", {
+              colspan: g.length,
+              class: "py-2 bg-surface-light"
+            }, [
+              A(n.$slots, "expanded-row", {
+                columns: g,
+                item: V
+              })
+            ], 8, he)
+          ])
+        ]),
+        _: 2
+      }, [
+        N(u(b), (g, V) => ({
+          name: `header.${g.key}`,
+          fn: x(({ column: h }) => {
+            var F;
+            return [
+              h.key === "data-table-expand" ? (E(), H("div", ve, [
+                $(K, {
+                  "offset-y": "",
+                  "close-on-content-click": !1,
+                  "scroll-strategy": "none"
+                }, {
+                  activator: x(({ props: l }) => [
+                    $(C, oe(l, {
+                      icon: "",
+                      variant: "text"
+                    }), {
+                      default: x(() => [
+                        $(T, null, {
+                          default: x(() => [...r[2] || (r[2] = [
+                            le("mdi-eye-settings", -1)
+                          ])]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 16)
+                  ]),
+                  default: x(() => [
+                    $(J, {
+                      class: "vlist-small",
+                      height: 300
+                    }, {
+                      default: x(() => [
+                        (E(!0), H(ae, null, N(u(y), (l, L) => (E(), B(G, {
+                          key: l.key
+                        }, {
+                          default: x(() => [
+                            L > 0 && u(y)[L - 1].group !== l.group ? (E(), B(j, {
+                              key: 0,
+                              class: "my-2"
+                            })) : q("", !0),
+                            $(O, {
+                              modelValue: u(d),
+                              "onUpdate:modelValue": r[0] || (r[0] = (Y) => re(d) ? d.value = Y : null),
+                              label: l.title,
+                              value: l.key,
+                              "hide-details": "",
+                              density: "compact",
+                              disabled: l.disabled
+                            }, null, 8, ["modelValue", "label", "value", "disabled"])
+                          ]),
+                          _: 2
+                        }, 1024))), 128))
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ]),
+                  _: 2
+                }, 1024)
+              ])) : (E(), H("div", {
+                key: 1,
+                class: I([
+                  "header-content",
+                  `header-content--indicator-${t.resizeDirection}`,
+                  {
+                    "header-content--dragging": u(f) === h.key,
+                    "header-content--drop-target": u(f) && u(f) !== h.key,
+                    "header-content--drag-over": u(e) === h.key
+                  }
+                ]),
+                draggable: "true",
+                onDragstart: (l) => s(l, String(h.key), h.title),
+                onDragover: se((l) => w(String(h.key)), ["prevent"]),
+                onDragenter: (l) => w(String(h.key)),
+                onDragleave: (l) => D(String(h.key)),
+                onDrop: (l) => M(String(h.key)),
+                onDragend: S
+              }, [
+                W("span", null, X(h.title), 1),
+                ((F = u(b)[V]) == null ? void 0 : F.resizable) !== !1 ? (E(), H("span", {
+                  key: 0,
+                  class: I(["resize-handle", `resize-handle--${t.resizeDirection}`]),
+                  onMousedown: (l) => u(p)(l, V)
+                }, null, 42, pe)) : q("", !0)
+              ], 42, me))
+            ];
+          })
+        })),
+        N(u(o), (g) => ({
+          name: g,
+          fn: x((V) => [
+            A(n.$slots, g, ie(de(V)))
+          ])
+        })),
+        a.showExpand ? void 0 : {
+          name: "item.data-table-expand",
+          fn: x(({ index: g }) => [
+            W("span", ge, X(g + 1), 1)
+          ]),
+          key: "0"
+        }
+      ]), 1032, ["headers", "items", "items-per-page", "class", "show-expand", "single-expand", "expanded", "item-value", "loading"]);
+    };
+  }
+}), we = {
+  install(a) {
+    a.component("MCVDataTable", ye);
+  }
+};
+export {
+  ye as MCVDataTable,
+  we as default
+};

package/dist/mcv-data-table.umd.cjs

@@ -0,0 +1 @@
+(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.MCVDataTable={},C.Vue))})(this,function(C,e){"use strict";function v(o,n,y,f,p=200){const d=e.ref(n.value.filter(l=>!l.hide).map(l=>l.key)),c=e.computed(()=>{const l=n.value.filter(u=>d.value.includes(u.key));return[...o,...l,...y]});function b(){var u,h;const l=(h=(u=f==null?void 0:f.value)==null?void 0:u.$el)==null?void 0:h.querySelector("table");return Array.from((l==null?void 0:l.querySelectorAll("thead th"))??[])}function V(){const l=b();l.length&&c.value.forEach((u,h)=>{var t;if(u.width!=null)return;(((t=l[h])==null?void 0:t.getBoundingClientRect().width)??p)<p&&(u.width=p)})}return e.watch(()=>[...d.value],async()=>{await e.nextTick(),V()},{flush:"post"}),{visibleColumns:d,filteredHeaders:c}}function M({tableRef:o,headers:n,minWidth:y=80,defaultWidth:f=120,direction:p="rtl"}){const d=e.ref(!1),c=e.computed(()=>n.value.reduce((t,s)=>{const x=typeof s.width=="number"?s.width:Number.parseFloat(s.width??"0");return t+(Number.isFinite(x)?x:0)},0));function b(){var t,s;return(s=(t=o.value)==null?void 0:t.$el)==null?void 0:s.querySelector("table")}function V(){const t=b();return Array.from((t==null?void 0:t.querySelectorAll("thead th"))??[])}function l(){const t=V();n.value.forEach((s,x)=>{var D;if(s.width!=null)return;const k=(D=t[x])==null?void 0:D.getBoundingClientRect().width;s.width=Math.max(y,Math.round(k||f))})}function u(){l(),d.value=!0,h()}function h(){const t=b();!t||!d.value||(t.style.width=c.value+"px")}function m(t,s){t.preventDefault(),u();const x=t.pageX,k=n.value[s].width,D=typeof k=="number"?k:Number.parseFloat(k??`${f}`);function T(r){const S=p==="rtl"?x-r.pageX:r.pageX-x;n.value[s].width=Math.max(y,D+S),h()}function a(){document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",a)}document.addEventListener("mousemove",T),document.addEventListener("mouseup",a)}return e.onMounted(()=>{e.nextTick(()=>{h()})}),e.watch(()=>n.value.map(t=>t.key),()=>{e.nextTick(()=>{d.value&&l(),h()})}),{startResize:m,getTable:b,tableWidth:c}}function $(o,n,y){if(!n||n===y)return;const f=o.findIndex(c=>c.key===n),p=o.findIndex(c=>c.key===y);if(f===-1||p===-1)return;const[d]=o.splice(f,1);o.splice(p,0,d)}const W={key:0,class:"d-flex align-center justify-space-between w-100"},H=["onDragstart","onDragover","onDragenter","onDragleave","onDrop"],P=["onMousedown"],I={class:"mc-vdata-table__row-number"},L=["colspan"],B=e.defineComponent({__name:"MCVdataTable",props:{items:{default:()=>[]},headers:{default:()=>[]},pageSize:{default:20},resizeDirection:{default:"rtl"},loading:{type:Boolean,default:!1},itemValue:{default:"id"},activeItemValue:{},fixedHeaders:{default:()=>[{key:"data-table-expand",width:69,resizable:!1}]},fixedEndHeaders:{default:()=>[]},tableClass:{default:"elevation-1 report-table"},showExpand:{type:Boolean,default:!1},singleExpand:{type:Boolean,default:!0},rowProps:{}},setup(o){const n=o,y=e.ref([...n.headers]),f=e.ref([...n.headers]),p=e.ref([]),d=e.ref(null),{visibleColumns:c,filteredHeaders:b}=v(n.fixedHeaders,f,n.fixedEndHeaders,d),V=e.useSlots(),l=e.computed(()=>Object.keys(V).filter(a=>a.startsWith("item."))),u=a=>{var r;return n.rowProps?n.rowProps(a):{class:n.activeItemValue!==void 0&&((r=a.item)==null?void 0:r[n.itemValue])===n.activeItemValue?"active":""}},{startResize:h}=M({tableRef:d,headers:b,minWidth:80,defaultWidth:120,direction:n.resizeDirection}),m=e.ref(),t=e.ref(null);function s(a,r,S){if(m.value=r,!a.dataTransfer)return;a.dataTransfer.effectAllowed="move",a.dataTransfer.setData("text/plain",r);const _=document.createElement("div");_.className="mc-vdata-table__drag-preview",_.textContent=String(S||r),document.body.appendChild(_),a.dataTransfer.setDragImage(_,14,16),window.setTimeout(()=>_.remove(),0)}function x(a){m.value&&m.value!==a&&(t.value=a)}function k(a){t.value===a&&(t.value=null)}function D(){m.value=null,t.value=null}function T(a){const r=m.value;if(r)try{$(f.value,r,a)}finally{m.value=null,t.value=null}}return(a,r)=>{const S=e.resolveComponent("v-icon"),_=e.resolveComponent("v-btn"),F=e.resolveComponent("v-divider"),q=e.resolveComponent("v-checkbox"),A=e.resolveComponent("v-list-item"),j=e.resolveComponent("v-list"),X=e.resolveComponent("v-menu"),O=e.resolveComponent("v-data-table");return e.openBlock(),e.createBlock(O,{headers:e.unref(b),items:o.items,"hide-default-footer":"","items-per-page":o.pageSize,class:e.normalizeClass(`mc-vdata-table ${o.tableClass}`),"show-expand":o.showExpand,"single-expand":o.singleExpand,expanded:e.unref(p),"item-value":o.itemValue,"onUpdate:expanded":r[1]||(r[1]=g=>p.value=g),"fixed-header":"",loading:o.loading,"row-props":u,ref_key:"tableRef",ref:d,"disable-sort":""},e.createSlots({"expanded-row":e.withCtx(({columns:g,item:E})=>[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:g.length,class:"py-2 bg-surface-light"},[e.renderSlot(a.$slots,"expanded-row",{columns:g,item:E})],8,L)])]),_:2},[e.renderList(e.unref(b),(g,E)=>({name:`header.${g.key}`,fn:e.withCtx(({column:w})=>{var z;return[w.key==="data-table-expand"?(e.openBlock(),e.createElementBlock("div",W,[e.createVNode(X,{"offset-y":"","close-on-content-click":!1,"scroll-strategy":"none"},{activator:e.withCtx(({props:i})=>[e.createVNode(_,e.mergeProps(i,{icon:"",variant:"text"}),{default:e.withCtx(()=>[e.createVNode(S,null,{default:e.withCtx(()=>[...r[2]||(r[2]=[e.createTextVNode("mdi-eye-settings",-1)])]),_:1})]),_:1},16)]),default:e.withCtx(()=>[e.createVNode(j,{class:"vlist-small",height:300},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(y),(i,N)=>(e.openBlock(),e.createBlock(A,{key:i.key},{default:e.withCtx(()=>[N>0&&e.unref(y)[N-1].group!==i.group?(e.openBlock(),e.createBlock(F,{key:0,class:"my-2"})):e.createCommentVNode("",!0),e.createVNode(q,{modelValue:e.unref(c),"onUpdate:modelValue":r[0]||(r[0]=U=>e.isRef(c)?c.value=U:null),label:i.title,value:i.key,"hide-details":"",density:"compact",disabled:i.disabled},null,8,["modelValue","label","value","disabled"])]),_:2},1024))),128))]),_:2},1024)]),_:2},1024)])):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["header-content",`header-content--indicator-${n.resizeDirection}`,{"header-content--dragging":e.unref(m)===w.key,"header-content--drop-target":e.unref(m)&&e.unref(m)!==w.key,"header-content--drag-over":e.unref(t)===w.key}]),draggable:"true",onDragstart:i=>s(i,String(w.key),w.title),onDragover:e.withModifiers(i=>x(String(w.key)),["prevent"]),onDragenter:i=>x(String(w.key)),onDragleave:i=>k(String(w.key)),onDrop:i=>T(String(w.key)),onDragend:D},[e.createElementVNode("span",null,e.toDisplayString(w.title),1),((z=e.unref(b)[E])==null?void 0:z.resizable)!==!1?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["resize-handle",`resize-handle--${n.resizeDirection}`]),onMousedown:i=>e.unref(h)(i,E)},null,42,P)):e.createCommentVNode("",!0)],42,H))]})})),e.renderList(e.unref(l),g=>({name:g,fn:e.withCtx(E=>[e.renderSlot(a.$slots,g,e.normalizeProps(e.guardReactiveProps(E)))])})),o.showExpand?void 0:{name:"item.data-table-expand",fn:e.withCtx(({index:g})=>[e.createElementVNode("span",I,e.toDisplayString(g+1),1)]),key:"0"}]),1032,["headers","items","items-per-page","class","show-expand","single-expand","expanded","item-value","loading"])}}}),R={install(o){o.component("MCVDataTable",B)}};C.MCVDataTable=B,C.default=R,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.mc-vdata-table.v-data-table .v-table__wrapper table{table-layout:fixed}.mc-vdata-table.v-data-table .v-table__wrapper table tr.active{background-color:rgba(var(--v-theme-primary),.2)}.mc-vdata-table.v-data-table .v-table__wrapper table td,.mc-vdata-table.v-data-table .v-table__wrapper table th{border-right:thin solid rgba(var(--v-border-color),var(--v-border-opacity))}.mc-vdata-table.v-data-table .v-table__wrapper table thead th{font-weight:700!important;text-align:center!important}.mc-vdata-table.v-data-table .v-table__wrapper table thead th:not(.v-data-table-column--fixed){position:relative!important}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .v-data-table-header__content{justify-content:center}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .header-content{cursor:pointer}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .header-content:before{background:rgb(var(--v-theme-primary));bottom:5px;content:"";height:22px;opacity:0;position:absolute;top:50%;transform:translateY(-50%) scaleY(.72);transition:opacity .18s ease,transform .18s ease;width:2px}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .header-content--drop-target:hover{background:rgba(var(--v-theme-on-surface),.025)}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .header-content--drag-over{background:rgba(var(--v-theme-on-surface),.025);border-color:rgba(var(--v-border-color),.18);box-shadow:none}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .header-content--drag-over:before{opacity:1;transform:translateY(-50%) scaleY(1)}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .header-content--indicator-ltr:before{left:-1px}.mc-vdata-table.v-data-table .v-table__wrapper table thead th .header-content--indicator-rtl:before{right:-1px}.mc-vdata-table .vlist-small .v-list-item{padding:0 5px!important;min-block-size:30px!important}.mc-vdata-table .vlist-small .v-list-item .v-list-item-title{font-size:1em}.mc-vdata-table .resize-handle{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;-webkit-user-select:none;user-select:none}.mc-vdata-table .resize-handle--rtl{left:0}.mc-vdata-table .resize-handle--ltr{right:0}.mc-vdata-table .resize-handle:hover{border-left:2px solid blue}.mc-vdata-table .resize-handle--ltr:hover{border-left:0;border-right:2px solid blue}.mc-vdata-table__drag-preview{align-items:center;background:rgb(var(--v-theme-surface));border:1px solid rgba(var(--v-theme-primary),.45);border-radius:4px;box-shadow:0 6px 18px #0000002e;color:rgba(var(--v-theme-on-surface),.9);display:inline-flex;font-size:12px;font-weight:600;line-height:1;max-width:180px;overflow:hidden;padding:8px 12px;pointer-events:none;position:fixed;text-overflow:ellipsis;top:-1000px;white-space:nowrap;z-index:9999}

package/dist/utils/moveColumn.d.ts

@@ -0,0 +1,3 @@
+export declare function moveColumn<T extends {
+    key: string;
+}>(columns: T[], sourceKey: string, targetKey: string): void;

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "mcv-data-table",
+  "version": "0.1.3",
+  "description": "A Vuetify 3 data table component with column visibility, resizing, and drag-and-drop column reordering.",
+  "type": "module",
+  "main": "./dist/mcv-data-table.umd.cjs",
+  "module": "./dist/mcv-data-table.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mcv-data-table.js",
+      "require": "./dist/mcv-data-table.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build",
+    "build:watch": "vite build --watch",
+    "dev:types": "vue-tsc --noEmit --watch",
+    "pack:local": "npm run build && npm pack",
+    "release:patch": "npm version patch && npm run build && npm pack",
+    "release:minor": "npm version minor && npm run build && npm pack",
+    "release:major": "npm version major && npm run build && npm pack",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vuetify": "3.11.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@types/node": "^22.0.0",
+    "sass": "^1.77.0",
+    "typescript": "^5.5.0",
+    "unplugin-auto-import": "^0.18.6",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.0.0",
+    "vuetify": "3.11.3"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vuetify",
+    "v-data-table",
+    "data-table",
+    "typescript"
+  ],
+  "license": "MIT"
+}