@serhiitupilow/nuxt-table 0.1.3 → 0.1.5

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,557 @@ function onColumnOrderChange(payload: {
 </template>
 ```
 
+## Public runtime exports
+
+```ts
+import {
+  useNuxtTable,
+  type NuxtTableClassNames,
+  type NuxtTableColumn,
+  type NuxtTableColumnOrderChange,
+  type NuxtTableManualFilterChange,
+  type NuxtTableManualSortChange,
+  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.                                    |
+| `manual-sort-change`   | `NuxtTableManualSortChange`   | Emitted when sorting is changed for a column with `sortFunction`.                  |
+| `manual-filter-change` | `NuxtTableManualFilterChange` | Emitted when filter value changes for a column with `filterFunction` / `filterFn`. |
+
+### Behavior notes
+
+- Filtering is applied before sorting.
+- Sorting cycles by click: `asc -> desc -> off`.
+- If a column has `filterFunction` / `filterFn`, built-in filtering is disabled for that column and table emits `manual-filter-change`.
+- If a column has `sortFunction`, built-in sorting is disabled for that column and table emits `manual-sort-change`.
+- 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;
+  sortFunction?: (
+    leftRow: TableRow,
+    rightRow: TableRow,
+    column: NuxtTableColumn,
+    tableRows: TableRow[],
+    direction: "asc" | "desc",
+  ) => number;
+  filterKey?: ValueResolver;
+  formatter?: (value: unknown, row: TableRow) => string;
+  filterFunction?: (
+    row: TableRow,
+    filterValue: unknown,
+    column: NuxtTableColumn,
+    tableRows: TableRow[],
+  ) => boolean;
+  filterFn?: (
+    row: TableRow,
+    filterValue: unknown,
+    column: NuxtTableColumn,
+    tableRows: TableRow[],
+  ) => 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.
+- `sortFunction`: enables manual sort mode for that column. Table emits `manual-sort-change` and does not sort rows automatically.
+- `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>`).
+- `filterFunction`: enables manual filter mode for that column. Table emits `manual-filter-change` and does not filter rows automatically.
+- `filterFn`: legacy alias for `filterFunction` (same manual behavior).
+- `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.
+
+### Detailed `manual-filter-change` and `manual-sort-change` flow
+
+When `filterFunction` / `sortFunction` is set, table switches that column to manual mode and emits `manual-filter-change` / `manual-sort-change`. You control final dataset in parent component.
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type {
+  NuxtTableColumn,
+  NuxtTableManualFilterChange,
+  NuxtTableManualSortChange,
+} from "@serhiitupilow/nuxt-table/runtime";
+
+type TicketRow = {
+  id: number;
+  title: string;
+  priority: "low" | "medium" | "high" | "critical";
+  status: "todo" | "in_progress" | "done";
+  createdAt: string;
+};
+
+const allRows = ref<TicketRow[]>([
+  {
+    id: 1,
+    title: "Fix auth flow",
+    priority: "high",
+    status: "in_progress",
+    createdAt: "2026-02-18",
+  },
+  {
+    id: 2,
+    title: "Write docs",
+    priority: "low",
+    status: "done",
+    createdAt: "2026-02-10",
+  },
+  {
+    id: 3,
+    title: "Release v1",
+    priority: "critical",
+    status: "todo",
+    createdAt: "2026-02-20",
+  },
+]);
+
+const columns: NuxtTableColumn[] = [
+  { key: "id", label: "ID", sortable: true },
+  { key: "title", label: "Title", sortable: true, filterable: true },
+  {
+    key: "status",
+    label: "Status",
+    filterable: true,
+    filterFunction: () => true,
+  },
+  {
+    key: "priority",
+    label: "Priority",
+    sortable: true,
+    sortFunction: () => 0,
+  },
+];
+
+const manualStatusFilter = ref<string>("");
+const manualSort = ref<{ key: string; direction: "asc" | "desc" | null }>({
+  key: "",
+  direction: null,
+});
+
+const rows = computed(() => {
+  const statusFiltered = allRows.value.filter((row) => {
+    if (!manualStatusFilter.value) {
+      return true;
+    }
+
+    return row.status === manualStatusFilter.value;
+  });
+
+  if (manualSort.value.key !== "priority" || !manualSort.value.direction) {
+    return statusFiltered;
+  }
+
+  const rank: Record<TicketRow["priority"], number> = {
+    low: 0,
+    medium: 1,
+    high: 2,
+    critical: 3,
+  };
+
+  const directionMultiplier = manualSort.value.direction === "asc" ? 1 : -1;
+
+  return [...statusFiltered].sort((left, right) => {
+    return (rank[left.priority] - rank[right.priority]) * directionMultiplier;
+  });
+});
+
+function onManualFilterChange(payload: NuxtTableManualFilterChange) {
+  if (payload.columnKey !== "status") {
+    return;
+  }
+
+  manualStatusFilter.value = String(payload.value ?? "").trim();
+}
+
+function onManualSortChange(payload: NuxtTableManualSortChange) {
+  manualSort.value = {
+    key: payload.columnKey,
+    direction: payload.direction,
+  };
+}
+</script>
+
+<template>
+  <NuxtTable
+    :columns="columns"
+    :rows="rows"
+    @manual-filter-change="onManualFilterChange"
+    @manual-sort-change="onManualSortChange"
+  />
+</template>
+```
+
+Notes:
+
+- In manual mode, the table does not transform rows for that column; you pass already transformed `rows` from outside.
+- Use payload `columnKey`, `value`, `direction`, `rows`, and `filters` from events to build server/client-side query logic.
+- `filterFn` remains supported as a legacy alias, but `filterFunction` is preferred.
+
+### Server-side `manual-filter-change` / `manual-sort-change` example
+
+Use manual events to request data from backend and pass ready rows back to table.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import type {
+  NuxtTableColumn,
+  NuxtTableManualFilterChange,
+  NuxtTableManualSortChange,
+} from "@serhiitupilow/nuxt-table/runtime";
+
+type UserRow = {
+  id: number;
+  name: string;
+  status: "active" | "paused";
+  createdAt: string;
+};
+
+const rows = ref<UserRow[]>([]);
+const loading = ref(false);
+
+const query = ref<{
+  page: number;
+  pageSize: number;
+  status: string;
+  sortKey: string;
+  sortDirection: "asc" | "desc" | "";
+}>({
+  page: 1,
+  pageSize: 20,
+  status: "",
+  sortKey: "",
+  sortDirection: "",
+});
+
+const columns: NuxtTableColumn[] = [
+  { key: "id", label: "ID", sortable: true },
+  { key: "name", label: "Name", sortable: true, filterable: true },
+  {
+    key: "status",
+    label: "Status",
+    filterable: true,
+    filterFunction: () => true,
+  },
+  {
+    key: "createdAt",
+    label: "Created",
+    sortable: true,
+    sortFunction: () => 0,
+  },
+];
+
+async function fetchRows() {
+  loading.value = true;
+
+  try {
+    const data = await $fetch<UserRow[]>("/api/users", {
+      query: {
+        page: query.value.page,
+        pageSize: query.value.pageSize,
+        status: query.value.status,
+        sortKey: query.value.sortKey,
+        sortDirection: query.value.sortDirection,
+      },
+    });
+
+    rows.value = data;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function onManualFilterChange(payload: NuxtTableManualFilterChange) {
+  if (payload.columnKey === "status") {
+    query.value.status = String(payload.value ?? "").trim();
+    query.value.page = 1;
+  }
+
+  fetchRows();
+}
+
+function onManualSortChange(payload: NuxtTableManualSortChange) {
+  query.value.sortKey = payload.columnKey;
+  query.value.sortDirection = payload.direction ?? "";
+  query.value.page = 1;
+
+  fetchRows();
+}
+
+await fetchRows();
+</script>
+
+<template>
+  <NuxtTable
+    :columns="columns"
+    :rows="rows"
+    @manual-filter-change="onManualFilterChange"
+    @manual-sort-change="onManualSortChange"
+  />
+
+  <p v-if="loading">Loading...</p>
+</template>
+```
+
+What happens here:
+
+- `filterFunction` and `sortFunction` switch corresponding columns to manual mode.
+- Table emits `manual-filter-change` / `manual-sort-change` instead of transforming `rows` internally.
+- Parent updates query params, calls API, and passes backend result as new `rows`.
+
+### 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.5",
   "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, NuxtTableManualFilterChange, NuxtTableManualSortChange, 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;
@@ -12,8 +13,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     columnOrderChange: (payload: NuxtTableColumnOrderChange) => any;
+    manualSortChange: (payload: NuxtTableManualSortChange) => any;
+    manualFilterChange: (payload: NuxtTableManualFilterChange) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onColumnOrderChange?: ((payload: NuxtTableColumnOrderChange) => any) | undefined;
+    onManualSortChange?: ((payload: NuxtTableManualSortChange) => any) | undefined;
+    onManualFilterChange?: ((payload: NuxtTableManualFilterChange) => any) | undefined;
 }>, {
     storageKey: string;
     rowKey: string | ((row: TableRow, index: number) => string | number);

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" },
@@ -12,7 +13,7 @@ const props = defineProps({
   enableColumnResize: { type: Boolean, required: false, default: true },
   classNames: { type: Object, required: false }
 });
-const emit = defineEmits(["columnOrderChange"]);
+const emit = defineEmits(["columnOrderChange", "manualSortChange", "manualFilterChange"]);
 const defaultClassNames = {
   root: "nuxt-table",
   toolbar: "nuxt-table__toolbar",
@@ -49,16 +50,11 @@ const {
   visibleColumns,
   sortedRows,
   filters,
-  isColumnManagerOpen,
-  enabledColumnKeys,
   dragSourceColumnKey,
   dragOverColumnKey,
   getSortDirection,
   toggleSort,
   setFilter,
-  clearAllFilters,
-  toggleColumn,
-  resetColumns,
   onHeaderDragStart,
   onHeaderDragOver,
   onHeaderDragLeave,
@@ -77,65 +73,31 @@ const {
   enableColumnDnd: toRef(props, "enableColumnDnd"),
   onColumnOrderChange: (payload) => {
     emit("columnOrderChange", payload);
+  },
+  onManualSortChange: (payload) => {
+    emit("manualSortChange", payload);
+  },
+  onManualFilterChange: (payload) => {
+    emit("manualFilterChange", 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 +127,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 +139,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, NuxtTableManualFilterChange, NuxtTableManualSortChange, 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;
@@ -12,8 +13,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     columnOrderChange: (payload: NuxtTableColumnOrderChange) => any;
+    manualSortChange: (payload: NuxtTableManualSortChange) => any;
+    manualFilterChange: (payload: NuxtTableManualFilterChange) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onColumnOrderChange?: ((payload: NuxtTableColumnOrderChange) => any) | undefined;
+    onManualSortChange?: ((payload: NuxtTableManualSortChange) => any) | undefined;
+    onManualFilterChange?: ((payload: NuxtTableManualFilterChange) => any) | undefined;
 }>, {
     storageKey: string;
     rowKey: string | ((row: TableRow, index: number) => string | number);

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) => {
@@ -29,10 +41,14 @@ export function useNuxtTable(options) {
         if (!isFilterActive(filterValue)) {
           return true;
         }
-        if (column.filterFn) {
-          return column.filterFn(row, filterValue, column);
+        const customFilterFunction = column.filterFunction ?? column.filterFn;
+        if (customFilterFunction) {
+          return true;
         }
-        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);
@@ -47,8 +63,13 @@ export function useNuxtTable(options) {
     if (!activeColumn) {
       return filteredRows.value;
     }
-    const directionMultiplier = sortState.value.direction === "asc" ? 1 : -1;
+    const sortDirection = sortState.value.direction;
+    const directionMultiplier = sortDirection === "asc" ? 1 : -1;
     const accessor = activeColumn.sortKey ?? activeColumn.key;
+    const customSortFunction = activeColumn.sortFunction;
+    if (customSortFunction) {
+      return filteredRows.value;
+    }
     return [...filteredRows.value].sort((leftRow, rightRow) => {
       const leftValue = resolveColumnValue(leftRow, accessor);
       const rightValue = resolveColumnValue(rightRow, accessor);
@@ -73,9 +94,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 +118,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 +128,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 +159,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"));
@@ -174,38 +218,71 @@ export function useNuxtTable(options) {
     }
     if (!sortState.value || sortState.value.key !== column.key) {
       sortState.value = { key: column.key, direction: "asc" };
+      if (column.sortFunction) {
+        options.onManualSortChange?.({
+          columnKey: column.key,
+          direction: "asc",
+          column,
+          rows: [...options.rows.value],
+          filters: { ...filters.value }
+        });
+      }
       return;
     }
     if (sortState.value.direction === "asc") {
       sortState.value = { key: column.key, direction: "desc" };
+      if (column.sortFunction) {
+        options.onManualSortChange?.({
+          columnKey: column.key,
+          direction: "desc",
+          column,
+          rows: [...options.rows.value],
+          filters: { ...filters.value }
+        });
+      }
       return;
     }
     sortState.value = null;
+    if (column.sortFunction) {
+      options.onManualSortChange?.({
+        columnKey: column.key,
+        direction: null,
+        column,
+        rows: [...options.rows.value],
+        filters: { ...filters.value }
+      });
+    }
   }
   function setFilter(columnKey, value) {
     filters.value[columnKey] = value;
-  }
-  function clearAllFilters() {
-    const nextFilters = {};
-    for (const key of availableColumnKeys.value) {
-      nextFilters[key] = "";
+    const column = columnsByKey.value.get(columnKey);
+    if (!column) {
+      return;
     }
-    filters.value = nextFilters;
+    const customFilterFunction = column.filterFunction ?? column.filterFn;
+    if (!customFilterFunction) {
+      return;
+    }
+    options.onManualFilterChange?.({
+      columnKey,
+      value,
+      column,
+      rows: [...options.rows.value],
+      filters: { ...filters.value }
+    });
   }
   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 +376,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 +473,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 +512,13 @@ export function useNuxtTable(options) {
     visibleColumns,
     sortedRows,
     filters,
-    isColumnManagerOpen,
     enabledColumnKeys,
     dragSourceColumnKey,
     dragOverColumnKey,
     getSortDirection,
     toggleSort,
     setFilter,
-    clearAllFilters,
     toggleColumn,
-    resetColumns,
     onHeaderDragStart,
     onHeaderDragOver,
     onHeaderDragLeave,

package/dist/runtime/index.d.ts

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

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,10 +6,15 @@ export interface NuxtTableColumn {
     label: string;
     sortable?: boolean;
     filterable?: boolean;
+    sortAscComponent?: Component;
+    sortDescComponent?: Component;
+    sortDefaultComponent?: Component;
     sortKey?: ValueResolver;
+    sortFunction?: (leftRow: TableRow, rightRow: TableRow, column: NuxtTableColumn, tableRows: TableRow[], direction: "asc" | "desc") => number;
     filterKey?: ValueResolver;
     formatter?: (value: unknown, row: TableRow) => string;
-    filterFn?: (row: TableRow, filterValue: unknown, column: NuxtTableColumn) => boolean;
+    filterFunction?: (row: TableRow, filterValue: unknown, column: NuxtTableColumn, tableRows: TableRow[]) => boolean;
+    filterFn?: (row: TableRow, filterValue: unknown, column: NuxtTableColumn, tableRows: TableRow[]) => boolean;
     cellComponent?: Component;
     filterComponent?: Component;
     headerClassName?: string;
@@ -21,6 +26,20 @@ export interface NuxtTableColumnOrderChange {
     fromIndex: number;
     toIndex: number;
 }
+export interface NuxtTableManualSortChange {
+    columnKey: string;
+    direction: "asc" | "desc" | null;
+    column: NuxtTableColumn;
+    rows: TableRow[];
+    filters: Record<string, unknown>;
+}
+export interface NuxtTableManualFilterChange {
+    columnKey: string;
+    value: unknown;
+    column: NuxtTableColumn;
+    rows: TableRow[];
+    filters: Record<string, unknown>;
+}
 export interface NuxtTableClassNames {
     root: string;
     toolbar: string;
@@ -53,4 +72,6 @@ export interface UseNuxtTableOptions {
     rowKey: Ref<string | ((row: TableRow, index: number) => string | number)>;
     enableColumnDnd: Ref<boolean>;
     onColumnOrderChange?: (payload: NuxtTableColumnOrderChange) => void;
+    onManualSortChange?: (payload: NuxtTableManualSortChange) => void;
+    onManualFilterChange?: (payload: NuxtTableManualFilterChange) => void;
 }

package/package.json

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