@serhiitupilow/nuxt-table 0.1.3

package/README.md

@@ -0,0 +1,103 @@
+# @serhiitupilow/nuxt-table
+
+Nuxt module that provides a single `NuxtTable` component with:
+
+- sorting
+- filtering
+- column visibility manager
+- column resize
+- optional drag-and-drop column reordering
+- class-based styling (no Tailwind classes in component templates)
+
+## Install
+
+Use any package manager:
+
+```bash
+npm i @serhiitupilow/nuxt-table
+# or
+yarn add @serhiitupilow/nuxt-table
+# or
+bun add @serhiitupilow/nuxt-table
+# or
+pnpm add @serhiitupilow/nuxt-table
+```
+
+## Nuxt config
+
+```ts
+export default defineNuxtConfig({
+  modules: ["@serhiitupilow/nuxt-table"],
+});
+```
+
+Optional module config:
+
+```ts
+export default defineNuxtConfig({
+  modules: ["@serhiitupilow/nuxt-table"],
+  nuxtTable: {
+    injectDefaultStyles: true,
+  },
+});
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import type { NuxtTableColumn } from "@serhiitupilow/nuxt-table/dist/runtime/types/table";
+
+const columns: NuxtTableColumn[] = [
+  { key: "id", label: "ID", sortable: true, filterable: true },
+  { key: "name", label: "Name", sortable: true, filterable: true },
+  { key: "status", label: "Status", sortable: true, filterable: true },
+];
+
+const rows = [
+  { id: 1, name: "Alice", status: "active" },
+  { id: 2, name: "Bob", status: "paused" },
+];
+
+function onColumnOrderChange(payload: {
+  order: string[];
+  movedKey: string;
+  fromIndex: number;
+  toIndex: number;
+}) {
+  console.log("new order", payload.order);
+}
+</script>
+
+<template>
+  <NuxtTable
+    :columns="columns"
+    :rows="rows"
+    storage-key="users-table"
+    :enable-column-dnd="true"
+    @column-order-change="onColumnOrderChange"
+  />
+</template>
+```
+
+## Styling
+
+`NuxtTable` uses semantic class names (like `nuxt-table__header-cell`) and receives a `classNames` prop for overrides.
+
+You can style globally in your project CSS:
+
+```css
+.nuxt-table__header-cell {
+  background: #f8fafc;
+}
+```
+
+Or override class names from props:
+
+```vue
+<NuxtTable
+  :columns="columns"
+  :rows="rows"
+  :class-names="{ table: 'my-table', headerCell: 'my-header-cell' }"
+/>
+```

package/dist/module.d.mts

@@ -0,0 +1,9 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    injectDefaultStyles: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@serhiitupilow/nuxt-table",
+  "configKey": "nuxtTable",
+  "version": "0.1.3",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,31 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@serhiitupilow/nuxt-table",
+    configKey: "nuxtTable"
+  },
+  defaults: {
+    injectDefaultStyles: true
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: "",
+      pathPrefix: false,
+      global: true,
+      extensions: ["vue"],
+      transpile: true
+    });
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    if (options.injectDefaultStyles) {
+      const stylesPath = resolver.resolve("./runtime/assets/styles.css");
+      if (!nuxt.options.css.includes(stylesPath)) {
+        nuxt.options.css.push(stylesPath);
+      }
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/styles.css

@@ -0,0 +1 @@
+.nuxt-table{display:grid;gap:1rem}.nuxt-table__toolbar{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.nuxt-table__toolbar-title{font-size:1.125rem;font-weight:600;margin:0}.nuxt-table__toolbar-actions{align-items:center;display:flex;gap:.5rem;position:relative}.nuxt-table__toolbar-button{background:#fff;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;font-size:.875rem;line-height:1;padding:.5rem .75rem}.nuxt-table__column-manager{background:#fff;border:1px solid #d1d5db;border-radius:.5rem;box-shadow:0 10px 20px rgba(15,23,42,.14);min-width:14rem;padding:.75rem;position:absolute;right:0;top:2.75rem;z-index:30}.nuxt-table__column-manager-title{font-size:.875rem;font-weight:600;margin:0 0 .5rem}.nuxt-table__column-manager-item{align-items:center;cursor:pointer;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:.375rem}.nuxt-table__column-manager-item:last-child{margin-bottom:0}.nuxt-table__wrapper{border:1px solid #d1d5db;border-radius:.5rem;overflow-x:auto}.nuxt-table__table{border-collapse:collapse;min-width:100%;table-layout:fixed;width:100%}.nuxt-table__head{background:#f8fafc}.nuxt-table__header-cell{border-bottom:1px solid #e5e7eb;border-right:1px solid #e5e7eb;padding:.75rem;position:relative;text-align:left;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease;vertical-align:top}.nuxt-table__header-cell:last-child{border-right:0}.nuxt-table__header-cell--drag-source{box-shadow:inset 0 0 0 1px #9ca3af;opacity:.82}.nuxt-table__header-cell--drag-over{background:#f1f5f9;box-shadow:inset 0 0 0 2px #cbd5e1}.nuxt-table__header-top{align-items:center;display:flex;gap:.5rem;justify-content:space-between;margin-bottom:.5rem}.nuxt-table__header-label{font-weight:600}.nuxt-table__sort-button{background:#fff;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;font-size:.75rem;line-height:1;padding:.25rem .5rem}.nuxt-table__filter-input{border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;padding:.375rem .5rem;width:100%}.nuxt-table__resize-handle{cursor:col-resize;height:100%;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:.5rem}.nuxt-table__body-row{border-bottom:1px solid #e5e7eb}.nuxt-table__body-row:last-child{border-bottom:0}.nuxt-table__body-cell{border-right:1px solid #e5e7eb;padding:.75rem;vertical-align:top}.nuxt-table__body-cell:last-child{border-right:0}.nuxt-table__empty-cell{color:#6b7280;padding:1rem;text-align:center}

package/dist/runtime/components/NuxtTable.d.vue.ts

@@ -0,0 +1,26 @@
+import type { NuxtTableClassNames, NuxtTableColumn, NuxtTableColumnOrderChange, TableRow } from '../types/table.js';
+type __VLS_Props = {
+    columns: NuxtTableColumn[];
+    rows: TableRow[];
+    storageKey?: string;
+    rowKey?: string | ((row: TableRow, index: number) => string | number);
+    title?: string;
+    showToolbar?: boolean;
+    enableColumnDnd?: boolean;
+    enableColumnResize?: boolean;
+    classNames?: Partial<NuxtTableClassNames>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    columnOrderChange: (payload: NuxtTableColumnOrderChange) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onColumnOrderChange?: ((payload: NuxtTableColumnOrderChange) => any) | undefined;
+}>, {
+    storageKey: string;
+    rowKey: string | ((row: TableRow, index: number) => string | number);
+    title: string;
+    showToolbar: boolean;
+    enableColumnDnd: boolean;
+    enableColumnResize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NuxtTable.vue

@@ -0,0 +1,190 @@
+<script setup>
+import { computed, toRef } from "vue";
+import { useNuxtTable } from "../composables/useNuxtTable";
+const props = defineProps({
+  columns: { type: Array, required: true },
+  rows: { type: Array, required: true },
+  storageKey: { type: String, required: false, default: "nuxt-table" },
+  rowKey: { type: [String, Function], required: false, default: "id" },
+  title: { type: String, required: false, default: "Table" },
+  showToolbar: { type: Boolean, required: false, default: true },
+  enableColumnDnd: { type: Boolean, required: false, default: false },
+  enableColumnResize: { type: Boolean, required: false, default: true },
+  classNames: { type: Object, required: false }
+});
+const emit = defineEmits(["columnOrderChange"]);
+const defaultClassNames = {
+  root: "nuxt-table",
+  toolbar: "nuxt-table__toolbar",
+  toolbarTitle: "nuxt-table__toolbar-title",
+  toolbarActions: "nuxt-table__toolbar-actions",
+  toolbarButton: "nuxt-table__toolbar-button",
+  columnManager: "nuxt-table__column-manager",
+  columnManagerTitle: "nuxt-table__column-manager-title",
+  columnManagerItem: "nuxt-table__column-manager-item",
+  tableWrapper: "nuxt-table__wrapper",
+  table: "nuxt-table__table",
+  tableHead: "nuxt-table__head",
+  tableBody: "nuxt-table__body",
+  bodyRow: "nuxt-table__body-row",
+  emptyCell: "nuxt-table__empty-cell",
+  headerCell: "nuxt-table__header-cell",
+  headerCellDragSource: "nuxt-table__header-cell--drag-source",
+  headerCellDragOver: "nuxt-table__header-cell--drag-over",
+  headerTop: "nuxt-table__header-top",
+  headerLabel: "nuxt-table__header-label",
+  sortButton: "nuxt-table__sort-button",
+  filterInput: "nuxt-table__filter-input",
+  resizeHandle: "nuxt-table__resize-handle",
+  bodyCell: "nuxt-table__body-cell"
+};
+const mergedClassNames = computed(() => {
+  return {
+    ...defaultClassNames,
+    ...props.classNames ?? {}
+  };
+});
+const {
+  orderedColumns,
+  visibleColumns,
+  sortedRows,
+  filters,
+  isColumnManagerOpen,
+  enabledColumnKeys,
+  dragSourceColumnKey,
+  dragOverColumnKey,
+  getSortDirection,
+  toggleSort,
+  setFilter,
+  clearAllFilters,
+  toggleColumn,
+  resetColumns,
+  onHeaderDragStart,
+  onHeaderDragOver,
+  onHeaderDragLeave,
+  onHeaderDrop,
+  onHeaderDragEnd,
+  getColumnStyle,
+  startColumnResize,
+  setHeaderElement,
+  resolveDisplayValue,
+  resolveRowKey
+} = useNuxtTable({
+  columns: toRef(props, "columns"),
+  rows: toRef(props, "rows"),
+  storageKey: toRef(props, "storageKey"),
+  rowKey: toRef(props, "rowKey"),
+  enableColumnDnd: toRef(props, "enableColumnDnd"),
+  onColumnOrderChange: (payload) => {
+    emit("columnOrderChange", payload);
+  }
+});
+</script>
+
+<template>
+  <div :class="mergedClassNames.root">
+    <div v-if="props.showToolbar" :class="mergedClassNames.toolbar">
+      <h2 :class="mergedClassNames.toolbarTitle">{{ props.title }}</h2>
+
+      <div :class="mergedClassNames.toolbarActions">
+        <button
+          type="button"
+          :class="mergedClassNames.toolbarButton"
+          @click="isColumnManagerOpen = !isColumnManagerOpen"
+        >
+          Columns
+        </button>
+        <button
+          type="button"
+          :class="mergedClassNames.toolbarButton"
+          @click="clearAllFilters"
+        >
+          Clear Filters
+        </button>
+        <button
+          type="button"
+          :class="mergedClassNames.toolbarButton"
+          @click="resetColumns"
+        >
+          Reset Columns
+        </button>
+
+        <div
+          v-if="isColumnManagerOpen"
+          :class="mergedClassNames.columnManager"
+        >
+          <p :class="mergedClassNames.columnManagerTitle">Enable Columns</p>
+          <label
+            v-for="column in orderedColumns"
+            :key="`manager-${column.key}`"
+            :class="mergedClassNames.columnManagerItem"
+          >
+            <input
+              type="checkbox"
+              :checked="enabledColumnKeys.includes(column.key)"
+              @change="toggleColumn(column.key)"
+            >
+            <span>{{ column.label }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div :class="mergedClassNames.tableWrapper">
+      <table :class="mergedClassNames.table">
+        <thead :class="mergedClassNames.tableHead">
+          <tr>
+            <NuxtTableHeaderCell
+              v-for="column in visibleColumns"
+              :key="column.key"
+              :column="column"
+              :filter-value="filters[column.key]"
+              :column-style="getColumnStyle(column.key)"
+              :sort-direction="getSortDirection(column.key)"
+              :is-drag-source="dragSourceColumnKey === column.key"
+              :is-drag-over="dragOverColumnKey === column.key"
+              :is-dnd-enabled="props.enableColumnDnd"
+              :is-resize-enabled="props.enableColumnResize"
+              :class-names="mergedClassNames"
+              :set-header-element="setHeaderElement"
+              @drag-start="onHeaderDragStart"
+              @drag-over="onHeaderDragOver"
+              @drag-leave="onHeaderDragLeave"
+              @drop="onHeaderDrop"
+              @drag-end="onHeaderDragEnd"
+              @toggle-sort="toggleSort"
+              @set-filter="setFilter"
+              @resize-start="startColumnResize"
+            />
+          </tr>
+        </thead>
+        <tbody :class="mergedClassNames.tableBody">
+          <tr
+            v-for="(row, rowIndex) in sortedRows"
+            :key="resolveRowKey(row, rowIndex)"
+            :class="mergedClassNames.bodyRow"
+          >
+            <NuxtTableBodyCell
+              v-for="column in visibleColumns"
+              :key="`${resolveRowKey(row, rowIndex)}-${column.key}`"
+              :row="row"
+              :row-key="resolveRowKey(row, rowIndex)"
+              :column="column"
+              :value="resolveDisplayValue(row, column)"
+              :column-style="getColumnStyle(column.key)"
+              :class-names="mergedClassNames"
+            />
+          </tr>
+          <tr v-if="sortedRows.length === 0">
+            <td
+              :colspan="Math.max(visibleColumns.length, 1)"
+              :class="mergedClassNames.emptyCell"
+            >
+              No rows match the current filters.
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/NuxtTable.vue.d.ts

@@ -0,0 +1,26 @@
+import type { NuxtTableClassNames, NuxtTableColumn, NuxtTableColumnOrderChange, TableRow } from '../types/table.js';
+type __VLS_Props = {
+    columns: NuxtTableColumn[];
+    rows: TableRow[];
+    storageKey?: string;
+    rowKey?: string | ((row: TableRow, index: number) => string | number);
+    title?: string;
+    showToolbar?: boolean;
+    enableColumnDnd?: boolean;
+    enableColumnResize?: boolean;
+    classNames?: Partial<NuxtTableClassNames>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    columnOrderChange: (payload: NuxtTableColumnOrderChange) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onColumnOrderChange?: ((payload: NuxtTableColumnOrderChange) => any) | undefined;
+}>, {
+    storageKey: string;
+    rowKey: string | ((row: TableRow, index: number) => string | number);
+    title: string;
+    showToolbar: boolean;
+    enableColumnDnd: boolean;
+    enableColumnResize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NuxtTableBodyCell.d.vue.ts

@@ -0,0 +1,12 @@
+import type { NuxtTableClassNames, NuxtTableColumn, TableRow } from '../types/table.js';
+type __VLS_Props = {
+    row: TableRow;
+    column: NuxtTableColumn;
+    rowKey: string | number;
+    value: unknown;
+    columnStyle: Record<string, string | undefined>;
+    classNames: NuxtTableClassNames;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NuxtTableBodyCell.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  row: { type: Object, required: true },
+  column: { type: Object, required: true },
+  rowKey: { type: [String, Number], required: true },
+  value: { type: null, required: true },
+  columnStyle: { type: Object, required: true },
+  classNames: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <td
+    :key="`${props.rowKey}-${props.column.key}`"
+    :style="props.columnStyle"
+    :class="[props.classNames.bodyCell, props.column.cellClassName]"
+  >
+    <component
+      :is="props.column.cellComponent"
+      v-if="props.column.cellComponent"
+      :row="props.row"
+      :column="props.column"
+      :value="props.value"
+    />
+    <span v-else>{{ props.value }}</span>
+  </td>
+</template>

package/dist/runtime/components/NuxtTableBodyCell.vue.d.ts

@@ -0,0 +1,12 @@
+import type { NuxtTableClassNames, NuxtTableColumn, TableRow } from '../types/table.js';
+type __VLS_Props = {
+    row: TableRow;
+    column: NuxtTableColumn;
+    rowKey: string | number;
+    value: unknown;
+    columnStyle: Record<string, string | undefined>;
+    classNames: NuxtTableClassNames;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NuxtTableHeaderCell.d.vue.ts

@@ -0,0 +1,35 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { NuxtTableClassNames, NuxtTableColumn } from '../types/table.js';
+type __VLS_Props = {
+    column: NuxtTableColumn;
+    filterValue: unknown;
+    columnStyle: Record<string, string | undefined>;
+    sortDirection: 'asc' | 'desc' | null;
+    isDragSource: boolean;
+    isDragOver: boolean;
+    isDndEnabled: boolean;
+    isResizeEnabled: boolean;
+    classNames: NuxtTableClassNames;
+    setHeaderElement: (columnKey: string, element: Element | ComponentPublicInstance | null) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (columnKey: string) => any;
+    toggleSort: (column: NuxtTableColumn) => any;
+    setFilter: (columnKey: string, value: unknown) => any;
+    dragStart: (columnKey: string) => any;
+    dragOver: (columnKey: string) => any;
+    dragLeave: (columnKey: string) => any;
+    dragEnd: () => any;
+    resizeStart: (event: MouseEvent, columnKey: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((columnKey: string) => any) | undefined;
+    onToggleSort?: ((column: NuxtTableColumn) => any) | undefined;
+    onSetFilter?: ((columnKey: string, value: unknown) => any) | undefined;
+    onDragStart?: ((columnKey: string) => any) | undefined;
+    onDragOver?: ((columnKey: string) => any) | undefined;
+    onDragLeave?: ((columnKey: string) => any) | undefined;
+    onDragEnd?: (() => any) | undefined;
+    onResizeStart?: ((event: MouseEvent, columnKey: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NuxtTableHeaderCell.vue

@@ -0,0 +1,71 @@
+<script setup>
+const props = defineProps({
+  column: { type: Object, required: true },
+  filterValue: { type: null, required: true },
+  columnStyle: { type: Object, required: true },
+  sortDirection: { type: [String, null], required: true },
+  isDragSource: { type: Boolean, required: true },
+  isDragOver: { type: Boolean, required: true },
+  isDndEnabled: { type: Boolean, required: true },
+  isResizeEnabled: { type: Boolean, required: true },
+  classNames: { type: Object, required: true },
+  setHeaderElement: { type: Function, required: true }
+});
+const emit = defineEmits(["dragStart", "dragOver", "dragLeave", "drop", "dragEnd", "toggleSort", "setFilter", "resizeStart"]);
+</script>
+
+<template>
+  <th
+    :ref="(element) => props.setHeaderElement(props.column.key, element)"
+    :style="props.columnStyle"
+    :class="[
+  props.classNames.headerCell,
+  props.column.headerClassName,
+  props.isDragSource ? props.classNames.headerCellDragSource : '',
+  props.isDragOver && !props.isDragSource ? props.classNames.headerCellDragOver : ''
+]"
+    :draggable="props.isDndEnabled"
+    @dragstart="props.isDndEnabled ? emit('dragStart', props.column.key) : void 0"
+    @dragover.prevent="props.isDndEnabled ? emit('dragOver', props.column.key) : void 0"
+    @dragenter.prevent="props.isDndEnabled ? emit('dragOver', props.column.key) : void 0"
+    @dragleave="props.isDndEnabled ? emit('dragLeave', props.column.key) : void 0"
+    @drop="props.isDndEnabled ? emit('drop', props.column.key) : void 0"
+    @dragend="props.isDndEnabled ? emit('dragEnd') : void 0"
+  >
+    <div :class="props.classNames.headerTop">
+      <span :class="props.classNames.headerLabel">{{ props.column.label }}</span>
+      <button
+        v-if="props.column.sortable"
+        type="button"
+        :class="props.classNames.sortButton"
+        @click="emit('toggleSort', props.column)"
+      >
+        <span v-if="props.sortDirection === 'asc'">Asc</span>
+        <span v-else-if="props.sortDirection === 'desc'">Desc</span>
+        <span v-else>Sort</span>
+      </button>
+    </div>
+
+    <component
+      :is="props.column.filterComponent"
+      v-if="props.column.filterComponent"
+      :model-value="props.filterValue"
+      :column="props.column"
+      @update:model-value="emit('setFilter', props.column.key, $event)"
+    />
+    <input
+      v-else-if="props.column.filterable"
+      :value="String(props.filterValue ?? '')"
+      type="text"
+      :class="props.classNames.filterInput"
+      :placeholder="`Filter ${props.column.label}`"
+      @input="emit('setFilter', props.column.key, $event.target.value)"
+    >
+
+    <div
+      v-if="props.isResizeEnabled"
+      :class="props.classNames.resizeHandle"
+      @mousedown.stop.prevent="emit('resizeStart', $event, props.column.key)"
+    />
+  </th>
+</template>

package/dist/runtime/components/NuxtTableHeaderCell.vue.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { NuxtTableClassNames, NuxtTableColumn } from '../types/table.js';
+type __VLS_Props = {
+    column: NuxtTableColumn;
+    filterValue: unknown;
+    columnStyle: Record<string, string | undefined>;
+    sortDirection: 'asc' | 'desc' | null;
+    isDragSource: boolean;
+    isDragOver: boolean;
+    isDndEnabled: boolean;
+    isResizeEnabled: boolean;
+    classNames: NuxtTableClassNames;
+    setHeaderElement: (columnKey: string, element: Element | ComponentPublicInstance | null) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (columnKey: string) => any;
+    toggleSort: (column: NuxtTableColumn) => any;
+    setFilter: (columnKey: string, value: unknown) => any;
+    dragStart: (columnKey: string) => any;
+    dragOver: (columnKey: string) => any;
+    dragLeave: (columnKey: string) => any;
+    dragEnd: () => any;
+    resizeStart: (event: MouseEvent, columnKey: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((columnKey: string) => any) | undefined;
+    onToggleSort?: ((column: NuxtTableColumn) => any) | undefined;
+    onSetFilter?: ((columnKey: string, value: unknown) => any) | undefined;
+    onDragStart?: ((columnKey: string) => any) | undefined;
+    onDragOver?: ((columnKey: string) => any) | undefined;
+    onDragLeave?: ((columnKey: string) => any) | undefined;
+    onDragEnd?: (() => any) | undefined;
+    onResizeStart?: ((event: MouseEvent, columnKey: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useNuxtTable.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { NuxtTableColumn, TableRow, UseNuxtTableOptions } from '../types/table.js';
+export declare function useNuxtTable(options: UseNuxtTableOptions): {
+    orderedColumns: import("vue").ComputedRef<NuxtTableColumn[]>;
+    visibleColumns: import("vue").ComputedRef<NuxtTableColumn[]>;
+    sortedRows: import("vue").ComputedRef<TableRow[]>;
+    filters: import("vue").Ref<Record<string, unknown>, Record<string, unknown>>;
+    isColumnManagerOpen: import("vue").Ref<boolean, boolean>;
+    enabledColumnKeys: import("vue").Ref<string[], string[]>;
+    dragSourceColumnKey: import("vue").Ref<string | null, string | null>;
+    dragOverColumnKey: import("vue").Ref<string | null, string | null>;
+    getSortDirection: (columnKey: string) => "asc" | "desc" | null;
+    toggleSort: (column: NuxtTableColumn) => void;
+    setFilter: (columnKey: string, value: unknown) => void;
+    clearAllFilters: () => void;
+    toggleColumn: (columnKey: string) => void;
+    resetColumns: () => void;
+    onHeaderDragStart: (columnKey: string) => void;
+    onHeaderDragOver: (columnKey: string) => void;
+    onHeaderDragLeave: (columnKey: string) => void;
+    onHeaderDrop: (targetColumnKey: string) => Promise<void>;
+    onHeaderDragEnd: () => void;
+    getColumnStyle: (columnKey: string) => {
+        width?: undefined;
+        minWidth?: undefined;
+    } | {
+        width: string;
+        minWidth: string;
+    };
+    startColumnResize: (event: MouseEvent, columnKey: string) => void;
+    setHeaderElement: (columnKey: string, element: Element | ComponentPublicInstance | null) => void;
+    resolveDisplayValue: (row: TableRow, column: NuxtTableColumn) => any;
+    resolveRowKey: (row: TableRow, index: number) => any;
+};

package/dist/runtime/composables/useNuxtTable.js

@@ -0,0 +1,454 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+const MIN_COLUMN_WIDTH = 140;
+export function useNuxtTable(options) {
+  const columnOrder = ref([]);
+  const enabledColumnKeys = ref([]);
+  const sortState = ref(null);
+  const filters = ref({});
+  const isColumnManagerOpen = ref(false);
+  const dragSourceColumnKey = ref(null);
+  const dragOverColumnKey = ref(null);
+  const hasLoadedPersistence = ref(false);
+  const headerElements = ref({});
+  const columnWidths = ref({});
+  const activeResize = ref(null);
+  const availableColumnKeys = computed(() => options.columns.value.map((column) => column.key));
+  const columnsByKey = computed(() => {
+    return new Map(options.columns.value.map((column) => [column.key, column]));
+  });
+  const orderedColumns = computed(() => {
+    return columnOrder.value.map((columnKey) => columnsByKey.value.get(columnKey)).filter((column) => Boolean(column));
+  });
+  const visibleColumns = computed(() => {
+    return orderedColumns.value.filter((column) => enabledColumnKeys.value.includes(column.key));
+  });
+  const filteredRows = computed(() => {
+    return options.rows.value.filter((row) => {
+      return orderedColumns.value.every((column) => {
+        const filterValue = filters.value[column.key];
+        if (!isFilterActive(filterValue)) {
+          return true;
+        }
+        if (column.filterFn) {
+          return column.filterFn(row, filterValue, column);
+        }
+        const candidate = resolveColumnValue(row, column.filterKey ?? column.key);
+        const candidateText = String(candidate ?? "").toLowerCase();
+        const filterText = String(filterValue ?? "").toLowerCase();
+        return candidateText.includes(filterText);
+      });
+    });
+  });
+  const sortedRows = computed(() => {
+    if (!sortState.value) {
+      return filteredRows.value;
+    }
+    const activeColumn = columnsByKey.value.get(sortState.value.key);
+    if (!activeColumn) {
+      return filteredRows.value;
+    }
+    const directionMultiplier = sortState.value.direction === "asc" ? 1 : -1;
+    const accessor = activeColumn.sortKey ?? activeColumn.key;
+    return [...filteredRows.value].sort((leftRow, rightRow) => {
+      const leftValue = resolveColumnValue(leftRow, accessor);
+      const rightValue = resolveColumnValue(rightRow, accessor);
+      return compareValues(leftValue, rightValue) * directionMultiplier;
+    });
+  });
+  onMounted(() => {
+    initializeColumnState();
+    loadPersistedState();
+    hasLoadedPersistence.value = true;
+  });
+  watch(
+    () => options.columns.value,
+    () => {
+      initializeColumnState();
+    },
+    { deep: true }
+  );
+  watch(
+    [columnOrder, enabledColumnKeys, columnWidths],
+    () => {
+      if (!hasLoadedPersistence.value || !import.meta.client) {
+        return;
+      }
+      localStorage.setItem(buildStorageKey("order"), JSON.stringify(columnOrder.value));
+      localStorage.setItem(buildStorageKey("enabledColumns"), JSON.stringify(enabledColumnKeys.value));
+      localStorage.setItem(buildStorageKey("widths"), JSON.stringify(columnWidths.value));
+    },
+    { deep: true }
+  );
+  onBeforeUnmount(() => {
+    stopResizing();
+  });
+  function initializeColumnState() {
+    const currentKeys = availableColumnKeys.value;
+    if (!columnOrder.value.length) {
+      columnOrder.value = [...currentKeys];
+    } else {
+      const currentKeySet = new Set(currentKeys);
+      const keptKeys = columnOrder.value.filter((key) => currentKeySet.has(key));
+      const newKeys = currentKeys.filter((key) => !keptKeys.includes(key));
+      columnOrder.value = [...keptKeys, ...newKeys];
+    }
+    if (!enabledColumnKeys.value.length) {
+      enabledColumnKeys.value = [...currentKeys];
+    } else {
+      const currentKeySet = new Set(currentKeys);
+      const keptEnabledKeys = enabledColumnKeys.value.filter((key) => currentKeySet.has(key));
+      const missingEnabledKeys = currentKeys.filter((key) => !keptEnabledKeys.includes(key));
+      enabledColumnKeys.value = [...keptEnabledKeys, ...missingEnabledKeys];
+    }
+    const nextFilters = {};
+    for (const key of currentKeys) {
+      nextFilters[key] = filters.value[key] ?? "";
+    }
+    filters.value = nextFilters;
+    const nextWidths = {};
+    for (const key of currentKeys) {
+      const width = columnWidths.value[key];
+      if (typeof width === "number" && Number.isFinite(width)) {
+        nextWidths[key] = width;
+      }
+    }
+    columnWidths.value = nextWidths;
+  }
+  function loadPersistedState() {
+    if (!import.meta.client) {
+      return;
+    }
+    try {
+      const persistedOrder = localStorage.getItem(buildStorageKey("order"));
+      if (persistedOrder) {
+        const parsedOrder = JSON.parse(persistedOrder);
+        if (Array.isArray(parsedOrder)) {
+          const validPersistedOrder = parsedOrder.filter((key) => {
+            return typeof key === "string" && availableColumnKeys.value.includes(key);
+          });
+          const missingKeys = availableColumnKeys.value.filter((key) => !validPersistedOrder.includes(key));
+          columnOrder.value = [...validPersistedOrder, ...missingKeys];
+        }
+      }
+      const persistedEnabledColumns = localStorage.getItem(buildStorageKey("enabledColumns"));
+      if (persistedEnabledColumns) {
+        const parsedEnabledColumns = JSON.parse(persistedEnabledColumns);
+        if (Array.isArray(parsedEnabledColumns)) {
+          enabledColumnKeys.value = parsedEnabledColumns.filter((key) => {
+            return typeof key === "string" && availableColumnKeys.value.includes(key);
+          });
+        }
+      }
+      const persistedWidths = localStorage.getItem(buildStorageKey("widths"));
+      if (persistedWidths) {
+        const parsedWidths = JSON.parse(persistedWidths);
+        if (parsedWidths && typeof parsedWidths === "object") {
+          const nextWidths = {};
+          for (const key of availableColumnKeys.value) {
+            const width = parsedWidths[key];
+            if (typeof width === "number" && Number.isFinite(width) && width >= MIN_COLUMN_WIDTH) {
+              nextWidths[key] = width;
+            }
+          }
+          columnWidths.value = nextWidths;
+        }
+      }
+    } catch {
+      columnOrder.value = [...availableColumnKeys.value];
+      enabledColumnKeys.value = [...availableColumnKeys.value];
+      columnWidths.value = {};
+    }
+  }
+  function buildStorageKey(segment) {
+    return `${options.storageKey.value}:${segment}`;
+  }
+  function getSortDirection(columnKey) {
+    if (sortState.value?.key !== columnKey) {
+      return null;
+    }
+    return sortState.value.direction;
+  }
+  function toggleSort(column) {
+    if (!column.sortable) {
+      return;
+    }
+    if (!sortState.value || sortState.value.key !== column.key) {
+      sortState.value = { key: column.key, direction: "asc" };
+      return;
+    }
+    if (sortState.value.direction === "asc") {
+      sortState.value = { key: column.key, direction: "desc" };
+      return;
+    }
+    sortState.value = null;
+  }
+  function setFilter(columnKey, value) {
+    filters.value[columnKey] = value;
+  }
+  function clearAllFilters() {
+    const nextFilters = {};
+    for (const key of availableColumnKeys.value) {
+      nextFilters[key] = "";
+    }
+    filters.value = nextFilters;
+  }
+  function toggleColumn(columnKey) {
+    if (enabledColumnKeys.value.includes(columnKey)) {
+      if (enabledColumnKeys.value.length === 1) {
+        return;
+      }
+      enabledColumnKeys.value = enabledColumnKeys.value.filter((key) => key !== columnKey);
+      return;
+    }
+    enabledColumnKeys.value = [...enabledColumnKeys.value, columnKey];
+  }
+  function resetColumns() {
+    columnOrder.value = [...availableColumnKeys.value];
+    enabledColumnKeys.value = [...availableColumnKeys.value];
+  }
+  function onHeaderDragStart(columnKey) {
+    if (!options.enableColumnDnd.value || activeResize.value) {
+      return;
+    }
+    dragSourceColumnKey.value = columnKey;
+  }
+  function onHeaderDragOver(columnKey) {
+    if (!options.enableColumnDnd.value) {
+      return;
+    }
+    if (!dragSourceColumnKey.value || dragSourceColumnKey.value === columnKey) {
+      return;
+    }
+    dragOverColumnKey.value = columnKey;
+  }
+  function onHeaderDragLeave(columnKey) {
+    if (dragOverColumnKey.value === columnKey) {
+      dragOverColumnKey.value = null;
+    }
+  }
+  async function onHeaderDrop(targetColumnKey) {
+    if (!options.enableColumnDnd.value) {
+      dragSourceColumnKey.value = null;
+      dragOverColumnKey.value = null;
+      return;
+    }
+    if (!dragSourceColumnKey.value || dragSourceColumnKey.value === targetColumnKey) {
+      dragSourceColumnKey.value = null;
+      dragOverColumnKey.value = null;
+      return;
+    }
+    const beforeRects = getHeaderRects();
+    const sourceIndex = columnOrder.value.indexOf(dragSourceColumnKey.value);
+    const targetIndex = columnOrder.value.indexOf(targetColumnKey);
+    if (sourceIndex < 0 || targetIndex < 0) {
+      dragSourceColumnKey.value = null;
+      dragOverColumnKey.value = null;
+      return;
+    }
+    const nextOrder = [...columnOrder.value];
+    const [moved] = nextOrder.splice(sourceIndex, 1);
+    if (!moved) {
+      dragSourceColumnKey.value = null;
+      dragOverColumnKey.value = null;
+      return;
+    }
+    nextOrder.splice(targetIndex, 0, moved);
+    columnOrder.value = nextOrder;
+    await nextTick();
+    animateHeaderReorder(beforeRects);
+    const payload = {
+      order: [...nextOrder],
+      movedKey: moved,
+      fromIndex: sourceIndex,
+      toIndex: targetIndex
+    };
+    options.onColumnOrderChange?.(payload);
+    dragSourceColumnKey.value = null;
+    dragOverColumnKey.value = null;
+  }
+  function onHeaderDragEnd() {
+    dragSourceColumnKey.value = null;
+    dragOverColumnKey.value = null;
+  }
+  function getColumnStyle(columnKey) {
+    const width = columnWidths.value[columnKey];
+    if (!width) {
+      return {};
+    }
+    const safeWidth = Math.max(MIN_COLUMN_WIDTH, width);
+    return {
+      width: `${safeWidth}px`,
+      minWidth: `${safeWidth}px`
+    };
+  }
+  function startColumnResize(event, columnKey) {
+    if (!import.meta.client) {
+      return;
+    }
+    const currentWidth = columnWidths.value[columnKey] ?? headerElements.value[columnKey]?.getBoundingClientRect().width ?? MIN_COLUMN_WIDTH;
+    activeResize.value = {
+      columnKey,
+      startX: event.clientX,
+      startWidth: Math.max(MIN_COLUMN_WIDTH, currentWidth)
+    };
+    window.addEventListener("mousemove", onColumnResizeMove);
+    window.addEventListener("mouseup", onColumnResizeEnd);
+  }
+  function onColumnResizeMove(event) {
+    if (!activeResize.value) {
+      return;
+    }
+    const delta = event.clientX - activeResize.value.startX;
+    const nextWidth = Math.max(MIN_COLUMN_WIDTH, Math.round(activeResize.value.startWidth + delta));
+    columnWidths.value = {
+      ...columnWidths.value,
+      [activeResize.value.columnKey]: nextWidth
+    };
+  }
+  function onColumnResizeEnd() {
+    stopResizing();
+  }
+  function stopResizing() {
+    if (!import.meta.client) {
+      return;
+    }
+    activeResize.value = null;
+    window.removeEventListener("mousemove", onColumnResizeMove);
+    window.removeEventListener("mouseup", onColumnResizeEnd);
+  }
+  function setHeaderElement(columnKey, element) {
+    headerElements.value[columnKey] = element instanceof HTMLTableCellElement ? element : null;
+  }
+  function getHeaderRects() {
+    const rectMap = /* @__PURE__ */ new Map();
+    for (const column of visibleColumns.value) {
+      const element = headerElements.value[column.key];
+      if (element) {
+        rectMap.set(column.key, element.getBoundingClientRect());
+      }
+    }
+    return rectMap;
+  }
+  function animateHeaderReorder(beforeRects) {
+    if (!import.meta.client || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    for (const [columnKey, beforeRect] of beforeRects.entries()) {
+      const element = headerElements.value[columnKey];
+      if (!element) {
+        continue;
+      }
+      const afterRect = element.getBoundingClientRect();
+      const deltaX = beforeRect.left - afterRect.left;
+      if (Math.abs(deltaX) < 1) {
+        continue;
+      }
+      element.animate(
+        [
+          { transform: `translateX(${deltaX}px)` },
+          { transform: "translateX(0)" }
+        ],
+        {
+          duration: 220,
+          easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+        }
+      );
+    }
+  }
+  function resolveDisplayValue(row, column) {
+    const value = resolveColumnValue(row, column.key);
+    if (column.formatter) {
+      return column.formatter(value, row);
+    }
+    return value;
+  }
+  function resolveRowKey(row, index) {
+    if (typeof options.rowKey.value === "function") {
+      return options.rowKey.value(row, index);
+    }
+    return row[options.rowKey.value] ?? index;
+  }
+  function resolveColumnValue(row, resolver) {
+    if (typeof resolver === "function") {
+      return resolver(row);
+    }
+    const pathParts = resolver.split(".");
+    let currentValue = row;
+    for (const pathPart of pathParts) {
+      if (currentValue == null) {
+        return void 0;
+      }
+      currentValue = currentValue[pathPart];
+    }
+    return currentValue;
+  }
+  function isFilterActive(value) {
+    if (value == null) {
+      return false;
+    }
+    if (typeof value === "string") {
+      return value.trim().length > 0;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    if (typeof value === "object") {
+      return Object.values(value).some((nestedValue) => isFilterActive(nestedValue));
+    }
+    return true;
+  }
+  function compareValues(leftValue, rightValue) {
+    if (leftValue == null && rightValue == null) {
+      return 0;
+    }
+    if (leftValue == null) {
+      return -1;
+    }
+    if (rightValue == null) {
+      return 1;
+    }
+    if (typeof leftValue === "number" && typeof rightValue === "number") {
+      return leftValue - rightValue;
+    }
+    const leftDate = leftValue instanceof Date ? leftValue.getTime() : null;
+    const rightDate = rightValue instanceof Date ? rightValue.getTime() : null;
+    if (leftDate !== null && rightDate !== null) {
+      return leftDate - rightDate;
+    }
+    const leftText = String(leftValue).toLowerCase();
+    const rightText = String(rightValue).toLowerCase();
+    if (leftText < rightText) {
+      return -1;
+    }
+    if (leftText > rightText) {
+      return 1;
+    }
+    return 0;
+  }
+  return {
+    orderedColumns,
+    visibleColumns,
+    sortedRows,
+    filters,
+    isColumnManagerOpen,
+    enabledColumnKeys,
+    dragSourceColumnKey,
+    dragOverColumnKey,
+    getSortDirection,
+    toggleSort,
+    setFilter,
+    clearAllFilters,
+    toggleColumn,
+    resetColumns,
+    onHeaderDragStart,
+    onHeaderDragOver,
+    onHeaderDragLeave,
+    onHeaderDrop,
+    onHeaderDragEnd,
+    getColumnStyle,
+    startColumnResize,
+    setHeaderElement,
+    resolveDisplayValue,
+    resolveRowKey
+  };
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,2 @@
+export { useNuxtTable } from './composables/useNuxtTable.js';
+export type { NuxtTableClassNames, NuxtTableColumn, NuxtTableColumnOrderChange, TableRow, UseNuxtTableOptions, ValueResolver, } from './types/table.js';

package/dist/runtime/index.js

@@ -0,0 +1 @@
+export { useNuxtTable } from "./composables/useNuxtTable.js";

package/dist/runtime/types/table.d.ts

@@ -0,0 +1,56 @@
+import type { Component, Ref } from 'vue';
+export type TableRow = Record<string, any>;
+export type ValueResolver = string | ((row: TableRow) => unknown);
+export interface NuxtTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    sortKey?: ValueResolver;
+    filterKey?: ValueResolver;
+    formatter?: (value: unknown, row: TableRow) => string;
+    filterFn?: (row: TableRow, filterValue: unknown, column: NuxtTableColumn) => boolean;
+    cellComponent?: Component;
+    filterComponent?: Component;
+    headerClassName?: string;
+    cellClassName?: string;
+}
+export interface NuxtTableColumnOrderChange {
+    order: string[];
+    movedKey: string;
+    fromIndex: number;
+    toIndex: number;
+}
+export interface NuxtTableClassNames {
+    root: string;
+    toolbar: string;
+    toolbarTitle: string;
+    toolbarActions: string;
+    toolbarButton: string;
+    columnManager: string;
+    columnManagerTitle: string;
+    columnManagerItem: string;
+    tableWrapper: string;
+    table: string;
+    tableHead: string;
+    tableBody: string;
+    bodyRow: string;
+    emptyCell: string;
+    headerCell: string;
+    headerCellDragSource: string;
+    headerCellDragOver: string;
+    headerTop: string;
+    headerLabel: string;
+    sortButton: string;
+    filterInput: string;
+    resizeHandle: string;
+    bodyCell: string;
+}
+export interface UseNuxtTableOptions {
+    columns: Ref<NuxtTableColumn[]>;
+    rows: Ref<TableRow[]>;
+    storageKey: Ref<string>;
+    rowKey: Ref<string | ((row: TableRow, index: number) => string | number)>;
+    enableColumnDnd: Ref<boolean>;
+    onColumnOrderChange?: (payload: NuxtTableColumnOrderChange) => void;
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@serhiitupilow/nuxt-table",
+  "version": "0.1.3",
+  "description": "Nuxt module with a functional table component (sorting, filtering, column visibility, resize, optional DnD)",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt-module-build dev",
+    "prepack": "nuxt-module-build build"
+  },
+  "peerDependencies": {
+    "nuxt": ">=3.11.0",
+    "vue": ">=3.4.0"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^4.3.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "nuxt": "^4.3.1",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.28",
+    "vue-tsc": "^3.2.5"
+  }
+}