@serhiitupilow/nuxt-table 0.1.3 → 0.1.4

package/README.md

@@ -1,37 +1,41 @@
 # @serhiitupilow/nuxt-table
 
-Nuxt module that provides a single `NuxtTable` component with:
+A Nuxt module that registers a global `NuxtTable` component for data tables with:
 
-- sorting
-- filtering
-- column visibility manager
-- column resize
+- client-side sorting
+- client-side filtering
 - optional drag-and-drop column reordering
-- class-based styling (no Tailwind classes in component templates)
+- optional column resize
+- persisted column order/visibility/widths in `localStorage`
+- configurable cell/header/filter rendering
 
-## Install
+## Requirements
 
-Use any package manager:
+- `nuxt >= 3.11.0`
+- `vue >= 3.4.0`
+
+## Installation
 
 ```bash
 npm i @serhiitupilow/nuxt-table
 # or
+pnpm add @serhiitupilow/nuxt-table
+# or
 yarn add @serhiitupilow/nuxt-table
 # or
 bun add @serhiitupilow/nuxt-table
-# or
-pnpm add @serhiitupilow/nuxt-table
 ```
 
-## Nuxt config
+## Nuxt setup
 
 ```ts
+// nuxt.config.ts
 export default defineNuxtConfig({
   modules: ["@serhiitupilow/nuxt-table"],
 });
 ```
 
-Optional module config:
+### Module options
 
 ```ts
 export default defineNuxtConfig({
@@ -42,21 +46,38 @@ export default defineNuxtConfig({
 });
 ```
 
-## Usage
+| Option                | Type      | Default | Description                                                                                      |
+| --------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `injectDefaultStyles` | `boolean` | `true`  | Injects bundled CSS from the module runtime. Set to `false` if you fully style classes yourself. |
+
+## Quick start
 
 ```vue
 <script setup lang="ts">
-import type { NuxtTableColumn } from "@serhiitupilow/nuxt-table/dist/runtime/types/table";
+import type { NuxtTableColumn } from "@serhiitupilow/nuxt-table/runtime";
+
+type UserRow = {
+  id: number;
+  name: string;
+  status: "active" | "paused";
+  createdAt: string;
+};
 
 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 },
+  {
+    key: "createdAt",
+    label: "Created",
+    sortable: true,
+    formatter: (value) => new Date(String(value)).toLocaleDateString(),
+  },
 ];
 
-const rows = [
-  { id: 1, name: "Alice", status: "active" },
-  { id: 2, name: "Bob", status: "paused" },
+const rows: UserRow[] = [
+  { id: 1, name: "Alice", status: "active", createdAt: "2026-02-01" },
+  { id: 2, name: "Bob", status: "paused", createdAt: "2026-02-14" },
 ];
 
 function onColumnOrderChange(payload: {
@@ -80,24 +101,296 @@ function onColumnOrderChange(payload: {
 </template>
 ```
 
+## Public runtime exports
+
+```ts
+import {
+  useNuxtTable,
+  type NuxtTableClassNames,
+  type NuxtTableColumn,
+  type NuxtTableColumnOrderChange,
+  type TableRow,
+  type UseNuxtTableOptions,
+  type ValueResolver,
+} from "@serhiitupilow/nuxt-table/runtime";
+```
+
+## `NuxtTable` component API
+
+### Props
+
+| Prop                 | Type                                         | Default        | Description                                                             |
+| -------------------- | -------------------------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `columns`            | `NuxtTableColumn[]`                          | required       | Column definitions.                                                     |
+| `rows`               | `TableRow[]`                                 | required       | Data rows.                                                              |
+| `enabledColumns`     | `string[]`                                   | `undefined`    | Explicitly controls visible columns (in the current ordered sequence).  |
+| `storageKey`         | `string`                                     | `"nuxt-table"` | Prefix for persisted table UI state in `localStorage`.                  |
+| `rowKey`             | `string \| (row, index) => string \| number` | `"id"`         | Unique key resolver for row rendering.                                  |
+| `title`              | `string`                                     | `"Table"`      | Legacy prop kept for compatibility (not currently rendered in UI).      |
+| `showToolbar`        | `boolean`                                    | `true`         | Legacy prop kept for compatibility (toolbar is not currently rendered). |
+| `enableColumnDnd`    | `boolean`                                    | `false`        | Enables drag-and-drop header reordering.                                |
+| `enableColumnResize` | `boolean`                                    | `true`         | Enables resize handle on header cells.                                  |
+| `classNames`         | `Partial<NuxtTableClassNames>`               | `{}`           | Class overrides for semantic class hooks.                               |
+
+### Events
+
+| Event                 | Payload                      | Description                                     |
+| --------------------- | ---------------------------- | ----------------------------------------------- |
+| `column-order-change` | `NuxtTableColumnOrderChange` | Emitted after successful drag-and-drop reorder. |
+
+### Behavior notes
+
+- Filtering is applied before sorting.
+- Sorting cycles by click: `asc -> desc -> off`.
+- Column width has a minimum of `140px`.
+- Empty state text: `No rows match the current filters.`
+- Rendering is table-only (no built-in toolbar/summary controls).
+- DnD headers use cursor states: `grab` and `grabbing`.
+
+## Column definition (`NuxtTableColumn`)
+
+```ts
+type ValueResolver = string | ((row: TableRow) => unknown);
+
+interface NuxtTableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  sortAscComponent?: Component;
+  sortDescComponent?: Component;
+  sortDefaultComponent?: Component;
+  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;
+}
+```
+
+### Field details
+
+- `key`: primary accessor path for display value. Supports dot notation through resolvers (for example: `user.profile.name`) when used by `sortKey`/`filterKey`.
+- `sortKey`: alternate accessor/function used for sorting.
+- `sortAscComponent` / `sortDescComponent` / `sortDefaultComponent`: optional sort button content per state. If not provided, defaults are `Asc`, `Desc`, and `Sort`.
+- `filterKey`: alternate accessor/function used for default text filtering.
+- `formatter`: transforms display value for default body rendering (`<span>{{ value }}</span>`).
+- `filterFn`: custom row-level filter logic. If set, it overrides default string `includes` filtering for that column.
+- `cellComponent`: custom body renderer receives `row`, `column`, and `value`.
+- `filterComponent`: custom header filter renderer receives `modelValue` and `column`, and should emit `update:model-value`.
+
+## Persistence model
+
+State is persisted per `storageKey` in `localStorage` with keys:
+
+- `${storageKey}:order`
+- `${storageKey}:enabledColumns`
+- `${storageKey}:widths`
+
+Persisted values are validated against current `columns`; unknown keys are ignored.
+
 ## Styling
 
-`NuxtTable` uses semantic class names (like `nuxt-table__header-cell`) and receives a `classNames` prop for overrides.
+The component uses semantic class hooks. You can:
+
+1. use injected default styles, and/or
+2. override classes via `classNames`, and/or
+3. provide your own global CSS.
 
-You can style globally in your project CSS:
+### Default class keys (`NuxtTableClassNames`)
 
-```css
-.nuxt-table__header-cell {
-  background: #f8fafc;
+```ts
+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;
 }
 ```
 
-Or override class names from props:
+> Some toolbar-related class keys remain in the public type for compatibility, even though the current component template renders only the table.
+
+### `classNames` example
 
 ```vue
 <NuxtTable
   :columns="columns"
   :rows="rows"
-  :class-names="{ table: 'my-table', headerCell: 'my-header-cell' }"
+  :class-names="{
+    table: 'my-table',
+    headerCell: 'my-header-cell',
+    bodyCell: 'my-body-cell',
+    filterInput: 'my-filter-input',
+  }"
 />
 ```
+
+## Advanced examples
+
+### Enable / disable visible columns
+
+Use `enabledColumns` to control what is rendered.
+
+```vue
+<script setup lang="ts">
+const enabledColumns = ref<string[]>(["id", "name", "status"]);
+
+function toggleStatusColumn() {
+  if (enabledColumns.value.includes("status")) {
+    enabledColumns.value = enabledColumns.value.filter(
+      (key) => key !== "status",
+    );
+    return;
+  }
+
+  enabledColumns.value = [...enabledColumns.value, "status"];
+}
+</script>
+
+<template>
+  <button type="button" @click="toggleStatusColumn">
+    Toggle status column
+  </button>
+
+  <NuxtTable
+    :columns="columns"
+    :rows="rows"
+    :enabled-columns="enabledColumns"
+  />
+</template>
+```
+
+### Custom sort state components (ASC / DESC / default)
+
+```vue
+<!-- SortAsc.vue -->
+<template><span>↑ ASC</span></template>
+
+<!-- SortDesc.vue -->
+<template><span>↓ DESC</span></template>
+
+<!-- SortIdle.vue -->
+<template><span>↕ SORT</span></template>
+```
+
+```ts
+import SortAsc from "~/components/SortAsc.vue";
+import SortDesc from "~/components/SortDesc.vue";
+import SortIdle from "~/components/SortIdle.vue";
+
+const columns: NuxtTableColumn[] = [
+  {
+    key: "name",
+    label: "Name",
+    sortable: true,
+    sortAscComponent: SortAsc,
+    sortDescComponent: SortDesc,
+    sortDefaultComponent: SortIdle,
+  },
+];
+```
+
+If these components are not provided, the table automatically uses the default labels.
+
+### Custom filter component
+
+```vue
+<!-- StatusFilter.vue -->
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: unknown;
+  column: { key: string; label: string };
+}>();
+
+const emit = defineEmits<{
+  "update:model-value": [value: string];
+}>();
+</script>
+
+<template>
+  <select
+    :value="String(props.modelValue ?? '')"
+    @change="
+      emit('update:model-value', ($event.target as HTMLSelectElement).value)
+    "
+  >
+    <option value="">All</option>
+    <option value="active">Active</option>
+    <option value="paused">Paused</option>
+  </select>
+</template>
+```
+
+```ts
+const columns: NuxtTableColumn[] = [
+  {
+    key: "status",
+    label: "Status",
+    filterable: true,
+    filterComponent: StatusFilter,
+  },
+];
+```
+
+### Custom cell component
+
+```vue
+<!-- NameCell.vue -->
+<script setup lang="ts">
+const props = defineProps<{
+  row: Record<string, unknown>;
+  value: unknown;
+}>();
+</script>
+
+<template>
+  <strong>{{ props.value }}</strong>
+</template>
+```
+
+```ts
+const columns: NuxtTableColumn[] = [
+  {
+    key: "name",
+    label: "Name",
+    cellComponent: NameCell,
+  },
+];
+```
+
+## Troubleshooting
+
+- DnD does nothing: ensure `enableColumnDnd` is `true`.
+- Filters do nothing: ensure column has `filterable: true` or a `filterComponent` that emits `update:model-value`.
+- Unexpected row keys: set a stable `rowKey` function for datasets without `id`.
+- Style conflicts: disable `injectDefaultStyles` and provide full custom CSS.
+
+## License
+
+MIT

package/dist/module.json

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

package/dist/runtime/assets/styles.css

@@ -1 +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}
+.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{position:relative}.nuxt-table__column-manager>summary{list-style:none}.nuxt-table__column-manager>summary::-webkit-details-marker{display:none}.nuxt-table__column-manager[open]{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:0;z-index:30}.nuxt-table__column-manager[open]>summary{margin-bottom:.5rem}.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-cell--dnd{cursor:grab}.nuxt-table__header-cell--dragging{cursor:grabbing}.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

@@ -1,7 +1,8 @@
-import type { NuxtTableClassNames, NuxtTableColumn, NuxtTableColumnOrderChange, TableRow } from '../types/table.js';
+import type { NuxtTableClassNames, NuxtTableColumn, NuxtTableColumnOrderChange, TableRow } from "../types/table.js";
 type __VLS_Props = {
     columns: NuxtTableColumn[];
     rows: TableRow[];
+    enabledColumns?: string[];
     storageKey?: string;
     rowKey?: string | ((row: TableRow, index: number) => string | number);
     title?: string;

package/dist/runtime/components/NuxtTable.vue

@@ -4,6 +4,7 @@ import { useNuxtTable } from "../composables/useNuxtTable";
 const props = defineProps({
   columns: { type: Array, required: true },
   rows: { type: Array, required: true },
+  enabledColumns: { type: Array, required: false },
   storageKey: { type: String, required: false, default: "nuxt-table" },
   rowKey: { type: [String, Function], required: false, default: "id" },
   title: { type: String, required: false, default: "Table" },
@@ -49,16 +50,11 @@ const {
   visibleColumns,
   sortedRows,
   filters,
-  isColumnManagerOpen,
-  enabledColumnKeys,
   dragSourceColumnKey,
   dragOverColumnKey,
   getSortDirection,
   toggleSort,
   setFilter,
-  clearAllFilters,
-  toggleColumn,
-  resetColumns,
   onHeaderDragStart,
   onHeaderDragOver,
   onHeaderDragLeave,
@@ -79,63 +75,23 @@ const {
     emit("columnOrderChange", payload);
   }
 });
+const displayedColumns = computed(() => {
+  if (!props.enabledColumns) {
+    return visibleColumns.value;
+  }
+  const enabledKeySet = new Set(props.enabledColumns);
+  return orderedColumns.value.filter((column) => enabledKeySet.has(column.key));
+});
 </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"
+              v-for="column in displayedColumns"
               :key="column.key"
               :column="column"
               :filter-value="filters[column.key]"
@@ -165,7 +121,7 @@ const {
             :class="mergedClassNames.bodyRow"
           >
             <NuxtTableBodyCell
-              v-for="column in visibleColumns"
+              v-for="column in displayedColumns"
               :key="`${resolveRowKey(row, rowIndex)}-${column.key}`"
               :row="row"
               :row-key="resolveRowKey(row, rowIndex)"
@@ -177,7 +133,7 @@ const {
           </tr>
           <tr v-if="sortedRows.length === 0">
             <td
-              :colspan="Math.max(visibleColumns.length, 1)"
+              :colspan="Math.max(displayedColumns.length, 1)"
               :class="mergedClassNames.emptyCell"
             >
               No rows match the current filters.

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

@@ -1,7 +1,8 @@
-import type { NuxtTableClassNames, NuxtTableColumn, NuxtTableColumnOrderChange, TableRow } from '../types/table.js';
+import type { NuxtTableClassNames, NuxtTableColumn, NuxtTableColumnOrderChange, TableRow } from "../types/table.js";
 type __VLS_Props = {
     columns: NuxtTableColumn[];
     rows: TableRow[];
+    enabledColumns?: string[];
     storageKey?: string;
     rowKey?: string | ((row: TableRow, index: number) => string | number);
     title?: string;

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

@@ -1,10 +1,10 @@
-import type { ComponentPublicInstance } from 'vue';
-import type { NuxtTableClassNames, NuxtTableColumn } from '../types/table.js';
+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;
+    sortDirection: "asc" | "desc" | null;
     isDragSource: boolean;
     isDragOver: boolean;
     isDndEnabled: boolean;

package/dist/runtime/components/NuxtTableHeaderCell.vue

@@ -21,26 +21,58 @@ const emit = defineEmits(["dragStart", "dragOver", "dragLeave", "drop", "dragEnd
     :class="[
   props.classNames.headerCell,
   props.column.headerClassName,
+  props.isDndEnabled ? 'nuxt-table__header-cell--dnd' : '',
+  props.isDragSource ? 'nuxt-table__header-cell--dragging' : '',
   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"
+    @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>
+      <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>
+        <component
+          :is="props.column.sortAscComponent"
+          v-if="props.sortDirection === 'asc' && props.column.sortAscComponent"
+          :column="props.column"
+          :sort-direction="props.sortDirection"
+        />
+        <component
+          :is="props.column.sortDescComponent"
+          v-else-if="
+  props.sortDirection === 'desc' && props.column.sortDescComponent
+"
+          :column="props.column"
+          :sort-direction="props.sortDirection"
+        />
+        <component
+          :is="props.column.sortDefaultComponent"
+          v-else-if="!props.sortDirection && props.column.sortDefaultComponent"
+          :column="props.column"
+          :sort-direction="props.sortDirection"
+        />
+        <span v-else-if="props.sortDirection === 'asc'">Asc</span>
         <span v-else-if="props.sortDirection === 'desc'">Desc</span>
         <span v-else>Sort</span>
       </button>
@@ -59,8 +91,14 @@ const emit = defineEmits(["dragStart", "dragOver", "dragLeave", "drop", "dragEnd
       type="text"
       :class="props.classNames.filterInput"
       :placeholder="`Filter ${props.column.label}`"
-      @input="emit('setFilter', props.column.key, $event.target.value)"
-    >
+      @input="
+  emit(
+    'setFilter',
+    props.column.key,
+    $event.target.value
+  )
+"
+    />
 
     <div
       v-if="props.isResizeEnabled"

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

@@ -1,10 +1,10 @@
-import type { ComponentPublicInstance } from 'vue';
-import type { NuxtTableClassNames, NuxtTableColumn } from '../types/table.js';
+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;
+    sortDirection: "asc" | "desc" | null;
     isDragSource: boolean;
     isDragOver: boolean;
     isDndEnabled: boolean;

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

@@ -1,20 +1,17 @@
-import type { ComponentPublicInstance } from 'vue';
-import type { NuxtTableColumn, TableRow, UseNuxtTableOptions } from '../types/table.js';
+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;

package/dist/runtime/composables/useNuxtTable.js

@@ -1,18 +1,28 @@
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+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 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 availableColumnKeys = computed(
+    () => options.columns.value.map((column) => column.key)
+  );
   const columnsByKey = computed(() => {
     return new Map(options.columns.value.map((column) => [column.key, column]));
   });
@@ -20,7 +30,9 @@ export function useNuxtTable(options) {
     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));
+    return orderedColumns.value.filter(
+      (column) => enabledColumnKeys.value.includes(column.key)
+    );
   });
   const filteredRows = computed(() => {
     return options.rows.value.filter((row) => {
@@ -32,7 +44,10 @@ export function useNuxtTable(options) {
         if (column.filterFn) {
           return column.filterFn(row, filterValue, column);
         }
-        const candidate = resolveColumnValue(row, column.filterKey ?? column.key);
+        const candidate = resolveColumnValue(
+          row,
+          column.filterKey ?? column.key
+        );
         const candidateText = String(candidate ?? "").toLowerCase();
         const filterText = String(filterValue ?? "").toLowerCase();
         return candidateText.includes(filterText);
@@ -73,9 +88,18 @@ export function useNuxtTable(options) {
       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));
+      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 }
   );
@@ -88,7 +112,9 @@ export function useNuxtTable(options) {
       columnOrder.value = [...currentKeys];
     } else {
       const currentKeySet = new Set(currentKeys);
-      const keptKeys = columnOrder.value.filter((key) => currentKeySet.has(key));
+      const keptKeys = columnOrder.value.filter(
+        (key) => currentKeySet.has(key)
+      );
       const newKeys = currentKeys.filter((key) => !keptKeys.includes(key));
       columnOrder.value = [...keptKeys, ...newKeys];
     }
@@ -96,8 +122,12 @@ export function useNuxtTable(options) {
       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));
+      const keptEnabledKeys = enabledColumnKeys.value.filter(
+        (key) => currentKeySet.has(key)
+      );
+      const missingEnabledKeys = currentKeys.filter(
+        (key) => !keptEnabledKeys.includes(key)
+      );
       enabledColumnKeys.value = [...keptEnabledKeys, ...missingEnabledKeys];
     }
     const nextFilters = {};
@@ -123,20 +153,28 @@ export function useNuxtTable(options) {
       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));
+          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"));
+      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);
-          });
+          enabledColumnKeys.value = parsedEnabledColumns.filter(
+            (key) => {
+              return typeof key === "string" && availableColumnKeys.value.includes(key);
+            }
+          );
         }
       }
       const persistedWidths = localStorage.getItem(buildStorageKey("widths"));
@@ -185,27 +223,18 @@ export function useNuxtTable(options) {
   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);
+      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;
@@ -299,7 +328,10 @@ export function useNuxtTable(options) {
       return;
     }
     const delta = event.clientX - activeResize.value.startX;
-    const nextWidth = Math.max(MIN_COLUMN_WIDTH, Math.round(activeResize.value.startWidth + delta));
+    const nextWidth = Math.max(
+      MIN_COLUMN_WIDTH,
+      Math.round(activeResize.value.startWidth + delta)
+    );
     columnWidths.value = {
       ...columnWidths.value,
       [activeResize.value.columnKey]: nextWidth
@@ -393,7 +425,9 @@ export function useNuxtTable(options) {
       return value.length > 0;
     }
     if (typeof value === "object") {
-      return Object.values(value).some((nestedValue) => isFilterActive(nestedValue));
+      return Object.values(value).some(
+        (nestedValue) => isFilterActive(nestedValue)
+      );
     }
     return true;
   }
@@ -430,16 +464,13 @@ export function useNuxtTable(options) {
     visibleColumns,
     sortedRows,
     filters,
-    isColumnManagerOpen,
     enabledColumnKeys,
     dragSourceColumnKey,
     dragOverColumnKey,
     getSortDirection,
     toggleSort,
     setFilter,
-    clearAllFilters,
     toggleColumn,
-    resetColumns,
     onHeaderDragStart,
     onHeaderDragOver,
     onHeaderDragLeave,

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

@@ -1,4 +1,4 @@
-import type { Component, Ref } from 'vue';
+import type { Component, Ref } from "vue";
 export type TableRow = Record<string, any>;
 export type ValueResolver = string | ((row: TableRow) => unknown);
 export interface NuxtTableColumn {
@@ -6,6 +6,9 @@ export interface NuxtTableColumn {
     label: string;
     sortable?: boolean;
     filterable?: boolean;
+    sortAscComponent?: Component;
+    sortDescComponent?: Component;
+    sortDefaultComponent?: Component;
     sortKey?: ValueResolver;
     filterKey?: ValueResolver;
     formatter?: (value: unknown, row: TableRow) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhiitupilow/nuxt-table",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Nuxt module with a functional table component (sorting, filtering, column visibility, resize, optional DnD)",
   "type": "module",
   "license": "MIT",