@nu-grid/nuxt 0.1.1

package/dist/runtime/composables/_internal/useNuGridKeyboardNavigation.js

@@ -0,0 +1,407 @@
+import { computed } from "vue";
+export function useNuGridKeyboardNavigation(props, tableApi) {
+  const multiRowEnabled = computed(() => {
+    if (props.multiRow === false) return false;
+    return props.multiRow?.enabled ?? false;
+  });
+  const multiRowCount = computed(() => {
+    if (props.multiRow === false) return 1;
+    return props.multiRow?.rowCount ?? 1;
+  });
+  const alignColumns = computed(() => {
+    if (props.multiRow === false) return false;
+    return props.multiRow?.alignColumns ?? false;
+  });
+  const visibleColumns = computed(() => tableApi.getVisibleLeafColumns());
+  const columnToVisualRow = computed(() => {
+    if (!multiRowEnabled.value || multiRowCount.value <= 1) return [];
+    const cols = visibleColumns.value;
+    const mapping = [];
+    const maxRow = Math.max(1, multiRowCount.value) - 1;
+    for (let i = 0; i < cols.length; i++) {
+      const rowNum = cols[i].columnDef.row ?? 0;
+      mapping[i] = Math.max(0, Math.min(rowNum, maxRow));
+    }
+    return mapping;
+  });
+  const columnsByVisualRow = computed(() => {
+    if (!multiRowEnabled.value || multiRowCount.value <= 1) {
+      return [visibleColumns.value.map((_, idx) => idx)];
+    }
+    const rows = Array.from({ length: multiRowCount.value }, () => []);
+    columnToVisualRow.value.forEach((row, idx) => {
+      rows[row]?.push(idx);
+    });
+    return rows;
+  });
+  const nonPinnedColumnsByVisualRow = computed(() => {
+    if (!multiRowEnabled.value || multiRowCount.value <= 1) {
+      const all = visibleColumns.value.map((_, idx) => idx);
+      return [all];
+    }
+    const cols = visibleColumns.value;
+    return columnsByVisualRow.value.map(
+      (rowCols) => rowCols.filter((idx) => {
+        const pin = cols[idx]?.getIsPinned();
+        return !pin;
+      })
+    );
+  });
+  const pinnedColumnsByVisualRow = computed(() => {
+    if (!multiRowEnabled.value || multiRowCount.value <= 1) {
+      return [{ left: [], right: [] }];
+    }
+    const cols = visibleColumns.value;
+    return columnsByVisualRow.value.map((rowCols) => ({
+      left: rowCols.filter((idx) => cols[idx]?.getIsPinned() === "left"),
+      right: rowCols.filter((idx) => cols[idx]?.getIsPinned() === "right")
+    }));
+  });
+  function getVisualRowForColumn(columnIndex) {
+    if (!multiRowEnabled.value || multiRowCount.value <= 1) return 0;
+    return columnToVisualRow.value[columnIndex] ?? 0;
+  }
+  function getColumnsInVisualRow(visualRow) {
+    if (!multiRowEnabled.value || multiRowCount.value <= 1) {
+      return visibleColumns.value.map((_, idx) => idx);
+    }
+    return columnsByVisualRow.value[visualRow] ?? [];
+  }
+  function getNonPinnedColumnsInVisualRow(visualRow) {
+    if (!multiRowEnabled.value || multiRowCount.value <= 1) {
+      return visibleColumns.value.map((_, idx) => idx);
+    }
+    return nonPinnedColumnsByVisualRow.value[visualRow] ?? [];
+  }
+  function findColumnInVisualRow(currentColumnIndex, targetVisualRow, _row) {
+    const targetColumns = getColumnsInVisualRow(targetVisualRow);
+    if (targetColumns.length === 0) return currentColumnIndex;
+    const currentVisualRow = getVisualRowForColumn(currentColumnIndex);
+    const currentRowColumns = getColumnsInVisualRow(currentVisualRow);
+    if (alignColumns.value) {
+      const currentNonPinned = getNonPinnedColumnsInVisualRow(currentVisualRow);
+      const targetNonPinned = getNonPinnedColumnsInVisualRow(targetVisualRow);
+      const currentCol = visibleColumns.value[currentColumnIndex];
+      const isPinned = currentCol?.getIsPinned();
+      const currentPins = pinnedColumnsByVisualRow.value[currentVisualRow];
+      const targetPins = pinnedColumnsByVisualRow.value[targetVisualRow];
+      if (isPinned === "left") {
+        const leftPinnedInCurrent = currentPins?.left ?? [];
+        const leftPinnedInTarget = targetPins?.left ?? [];
+        const posInPinned = leftPinnedInCurrent.indexOf(currentColumnIndex);
+        if (posInPinned !== -1 && posInPinned < leftPinnedInTarget.length) {
+          return leftPinnedInTarget[posInPinned];
+        }
+        return targetNonPinned[0] ?? targetColumns[0] ?? currentColumnIndex;
+      }
+      if (isPinned === "right") {
+        const rightPinnedInCurrent = currentPins?.right ?? [];
+        const rightPinnedInTarget = targetPins?.right ?? [];
+        const posInPinned = rightPinnedInCurrent.indexOf(currentColumnIndex);
+        if (posInPinned !== -1 && posInPinned < rightPinnedInTarget.length) {
+          return rightPinnedInTarget[posInPinned];
+        }
+        return targetNonPinned[targetNonPinned.length - 1] ?? targetColumns[0] ?? currentColumnIndex;
+      }
+      const posInNonPinned = currentNonPinned.indexOf(currentColumnIndex);
+      if (posInNonPinned !== -1 && posInNonPinned < targetNonPinned.length) {
+        return targetNonPinned[posInNonPinned];
+      }
+      return targetNonPinned[targetNonPinned.length - 1] ?? targetColumns[0] ?? currentColumnIndex;
+    }
+    const currentPosInRow = currentRowColumns.indexOf(currentColumnIndex);
+    if (currentPosInRow !== -1 && currentPosInRow < targetColumns.length) {
+      return targetColumns[currentPosInRow];
+    }
+    return targetColumns[targetColumns.length - 1] ?? currentColumnIndex;
+  }
+  function findFirstInVisualRow(visualRow, row, isValidTarget) {
+    const columnsInRow = getColumnsInVisualRow(visualRow);
+    for (const colIdx of columnsInRow) {
+      if (!isValidTarget || isValidTarget(colIdx, row)) {
+        return colIdx;
+      }
+    }
+    return columnsInRow[0] ?? null;
+  }
+  function findLastInVisualRow(visualRow, row, isValidTarget) {
+    const columnsInRow = getColumnsInVisualRow(visualRow);
+    for (let i = columnsInRow.length - 1; i >= 0; i--) {
+      const colIdx = columnsInRow[i];
+      if (!isValidTarget || isValidTarget(colIdx, row)) {
+        return colIdx;
+      }
+    }
+    return columnsInRow[columnsInRow.length - 1] ?? null;
+  }
+  function findNextInVisualRow(startIndex, visualRow, row, isValidTarget) {
+    const columnsInRow = getColumnsInVisualRow(visualRow);
+    const currentPosInRow = columnsInRow.indexOf(startIndex);
+    if (currentPosInRow === -1) return null;
+    for (let i = currentPosInRow + 1; i < columnsInRow.length; i++) {
+      const colIdx = columnsInRow[i];
+      if (!isValidTarget || isValidTarget(colIdx, row)) {
+        return colIdx;
+      }
+    }
+    return null;
+  }
+  function findPreviousInVisualRow(startIndex, visualRow, row, isValidTarget) {
+    const columnsInRow = getColumnsInVisualRow(visualRow);
+    const currentPosInRow = columnsInRow.indexOf(startIndex);
+    if (currentPosInRow === -1) return null;
+    for (let i = currentPosInRow - 1; i >= 0; i--) {
+      const colIdx = columnsInRow[i];
+      if (!isValidTarget || isValidTarget(colIdx, row)) {
+        return colIdx;
+      }
+    }
+    return null;
+  }
+  function findFirstColumn(row, isValidTarget) {
+    const cols = visibleColumns.value;
+    for (let i = 0; i < cols.length; i++) {
+      if (!isValidTarget || isValidTarget(i, row)) {
+        return i;
+      }
+    }
+    return 0;
+  }
+  function findLastColumn(row, isValidTarget) {
+    const cols = visibleColumns.value;
+    for (let i = cols.length - 1; i >= 0; i--) {
+      if (!isValidTarget || isValidTarget(i, row)) {
+        return i;
+      }
+    }
+    return cols.length - 1;
+  }
+  function findNextColumn(currentIndex, row, isValidTarget) {
+    const cols = visibleColumns.value;
+    for (let i = currentIndex + 1; i < cols.length; i++) {
+      if (!isValidTarget || isValidTarget(i, row)) {
+        return i;
+      }
+    }
+    return currentIndex;
+  }
+  function findPreviousColumn(currentIndex, row, isValidTarget) {
+    for (let i = currentIndex - 1; i >= 0; i--) {
+      if (!isValidTarget || isValidTarget(i, row)) {
+        return i;
+      }
+    }
+    return currentIndex;
+  }
+  function navigateVertical(direction, currentRowIndex, currentColumnIndex, rows, isValidTarget) {
+    const currentRow = rows[currentRowIndex];
+    if (!currentRow) return null;
+    if (multiRowEnabled.value && multiRowCount.value > 1) {
+      const currentVisualRow = getVisualRowForColumn(currentColumnIndex);
+      const lastVisualRow = multiRowCount.value - 1;
+      if (direction === "up") {
+        if (currentVisualRow > 0) {
+          const targetColIdx = findColumnInVisualRow(
+            currentColumnIndex,
+            currentVisualRow - 1,
+            currentRow
+          );
+          if (!isValidTarget || isValidTarget(targetColIdx, currentRow)) {
+            return { rowIndex: currentRowIndex, columnIndex: targetColIdx };
+          }
+        }
+        if (currentRowIndex > 0) {
+          const targetRow = rows[currentRowIndex - 1];
+          if (targetRow) {
+            const targetColIdx = findColumnInVisualRow(currentColumnIndex, lastVisualRow, targetRow);
+            if (!isValidTarget || isValidTarget(targetColIdx, targetRow)) {
+              return { rowIndex: currentRowIndex - 1, columnIndex: targetColIdx };
+            }
+            const fallback = findLastInVisualRow(lastVisualRow, targetRow, isValidTarget);
+            if (fallback !== null) {
+              return { rowIndex: currentRowIndex - 1, columnIndex: fallback };
+            }
+          }
+        }
+      } else {
+        if (currentVisualRow < lastVisualRow) {
+          const targetColIdx = findColumnInVisualRow(
+            currentColumnIndex,
+            currentVisualRow + 1,
+            currentRow
+          );
+          if (!isValidTarget || isValidTarget(targetColIdx, currentRow)) {
+            return { rowIndex: currentRowIndex, columnIndex: targetColIdx };
+          }
+        }
+        if (currentRowIndex < rows.length - 1) {
+          const targetRow = rows[currentRowIndex + 1];
+          if (targetRow) {
+            const targetColIdx = findColumnInVisualRow(currentColumnIndex, 0, targetRow);
+            if (!isValidTarget || isValidTarget(targetColIdx, targetRow)) {
+              return { rowIndex: currentRowIndex + 1, columnIndex: targetColIdx };
+            }
+            const fallback = findFirstInVisualRow(0, targetRow, isValidTarget);
+            if (fallback !== null) {
+              return { rowIndex: currentRowIndex + 1, columnIndex: fallback };
+            }
+          }
+        }
+      }
+    } else {
+      const targetRowIndex = direction === "up" ? currentRowIndex - 1 : currentRowIndex + 1;
+      if (targetRowIndex >= 0 && targetRowIndex < rows.length) {
+        const targetRow = rows[targetRowIndex];
+        if (targetRow) {
+          if (!isValidTarget || isValidTarget(currentColumnIndex, targetRow)) {
+            return { rowIndex: targetRowIndex, columnIndex: currentColumnIndex };
+          }
+          const fallbackCol = direction === "up" ? findPreviousColumn(currentColumnIndex, targetRow, isValidTarget) : findNextColumn(currentColumnIndex, targetRow, isValidTarget);
+          if (fallbackCol !== currentColumnIndex || isValidTarget && isValidTarget(fallbackCol, targetRow)) {
+            return { rowIndex: targetRowIndex, columnIndex: fallbackCol };
+          }
+        }
+      }
+    }
+    return null;
+  }
+  function navigateHorizontal(direction, currentRowIndex, currentColumnIndex, rows, isValidTarget) {
+    const currentRow = rows[currentRowIndex];
+    if (!currentRow) return null;
+    if (multiRowEnabled.value && multiRowCount.value > 1) {
+      const currentVisualRow = getVisualRowForColumn(currentColumnIndex);
+      const lastVisualRow = multiRowCount.value - 1;
+      if (direction === "left") {
+        const prevCol = findPreviousInVisualRow(
+          currentColumnIndex,
+          currentVisualRow,
+          currentRow,
+          isValidTarget
+        );
+        if (prevCol !== null) {
+          return { rowIndex: currentRowIndex, columnIndex: prevCol };
+        }
+        if (currentVisualRow > 0) {
+          const lastInPrevRow = findLastInVisualRow(currentVisualRow - 1, currentRow, isValidTarget);
+          if (lastInPrevRow !== null) {
+            return { rowIndex: currentRowIndex, columnIndex: lastInPrevRow };
+          }
+        }
+        if (currentRowIndex > 0) {
+          const prevDataRow = rows[currentRowIndex - 1];
+          if (prevDataRow) {
+            const lastInLastRow = findLastInVisualRow(lastVisualRow, prevDataRow, isValidTarget);
+            if (lastInLastRow !== null) {
+              return { rowIndex: currentRowIndex - 1, columnIndex: lastInLastRow };
+            }
+          }
+        }
+      } else {
+        const nextCol = findNextInVisualRow(
+          currentColumnIndex,
+          currentVisualRow,
+          currentRow,
+          isValidTarget
+        );
+        if (nextCol !== null) {
+          return { rowIndex: currentRowIndex, columnIndex: nextCol };
+        }
+        if (currentVisualRow < lastVisualRow) {
+          const firstInNextRow = findFirstInVisualRow(
+            currentVisualRow + 1,
+            currentRow,
+            isValidTarget
+          );
+          if (firstInNextRow !== null) {
+            return { rowIndex: currentRowIndex, columnIndex: firstInNextRow };
+          }
+        }
+        if (currentRowIndex < rows.length - 1) {
+          const nextDataRow = rows[currentRowIndex + 1];
+          if (nextDataRow) {
+            const firstInFirstRow = findFirstInVisualRow(0, nextDataRow, isValidTarget);
+            if (firstInFirstRow !== null) {
+              return { rowIndex: currentRowIndex + 1, columnIndex: firstInFirstRow };
+            }
+          }
+        }
+      }
+    } else {
+      if (direction === "left") {
+        const prevCol = findPreviousColumn(currentColumnIndex, currentRow, isValidTarget);
+        if (prevCol !== currentColumnIndex) {
+          return { rowIndex: currentRowIndex, columnIndex: prevCol };
+        }
+      } else {
+        const nextCol = findNextColumn(currentColumnIndex, currentRow, isValidTarget);
+        if (nextCol !== currentColumnIndex) {
+          return { rowIndex: currentRowIndex, columnIndex: nextCol };
+        }
+      }
+    }
+    return null;
+  }
+  function navigateTab(direction, currentRowIndex, currentColumnIndex, rows, isValidTarget) {
+    const currentRow = rows[currentRowIndex];
+    if (!currentRow) return null;
+    if (direction === "next") {
+      const nextCol = findNextColumn(currentColumnIndex, currentRow, isValidTarget);
+      if (nextCol !== currentColumnIndex) {
+        return { rowIndex: currentRowIndex, columnIndex: nextCol };
+      }
+      if (currentRowIndex < rows.length - 1) {
+        const nextRow = rows[currentRowIndex + 1];
+        if (nextRow) {
+          const firstCol = findFirstColumn(nextRow, isValidTarget);
+          return { rowIndex: currentRowIndex + 1, columnIndex: firstCol };
+        }
+      }
+    } else {
+      const prevCol = findPreviousColumn(currentColumnIndex, currentRow, isValidTarget);
+      if (prevCol !== currentColumnIndex) {
+        return { rowIndex: currentRowIndex, columnIndex: prevCol };
+      }
+      if (currentRowIndex > 0) {
+        const prevRow = rows[currentRowIndex - 1];
+        if (prevRow) {
+          const lastCol = findLastColumn(prevRow, isValidTarget);
+          return { rowIndex: currentRowIndex - 1, columnIndex: lastCol };
+        }
+      }
+    }
+    return null;
+  }
+  function navigateToEdge(edge, currentRowIndex, rows, isValidTarget) {
+    const currentRow = rows[currentRowIndex];
+    if (!currentRow) return null;
+    const columnIndex = edge === "first" ? findFirstColumn(currentRow, isValidTarget) : findLastColumn(currentRow, isValidTarget);
+    return { rowIndex: currentRowIndex, columnIndex };
+  }
+  return {
+    // Configuration (reactive)
+    multiRowEnabled,
+    multiRowCount,
+    alignColumns,
+    visibleColumns,
+    // Core multi-row helpers
+    getVisualRowForColumn,
+    getColumnsInVisualRow,
+    getNonPinnedColumnsInVisualRow,
+    findColumnInVisualRow,
+    // Visual row finders
+    findFirstInVisualRow,
+    findLastInVisualRow,
+    findNextInVisualRow,
+    findPreviousInVisualRow,
+    // Column finders
+    findFirstColumn,
+    findLastColumn,
+    findNextColumn,
+    findPreviousColumn,
+    // High-level navigation
+    navigateVertical,
+    navigateHorizontal,
+    navigateTab,
+    navigateToEdge
+  };
+}

package/dist/runtime/composables/_internal/useNuGridPaging.d.ts

@@ -0,0 +1,76 @@
+import type { TableData } from '@nuxt/ui';
+import type { Table } from '@tanstack/vue-table';
+import type { ComputedRef, Ref } from 'vue';
+import type { NuGridPagingOptions, NuGridProps } from '../../types/index.js';
+/**
+ * Paging context provided to child components
+ */
+export interface NuGridPagingContext {
+    /** Whether paging is enabled */
+    enabled: ComputedRef<boolean>;
+    /** Current page size (rows per page) */
+    pageSize: ComputedRef<number>;
+    /** Current page index (0-based) */
+    pageIndex: ComputedRef<number>;
+    /** Total number of rows (after filtering) */
+    totalRows: ComputedRef<number>;
+    /** Total number of pages */
+    totalPages: ComputedRef<number>;
+    /** Page size selector options */
+    pageSizeOptions: ComputedRef<number[]>;
+    /** Whether to show the built-in paging panel */
+    showPanel: ComputedRef<boolean>;
+    /** Whether auto page size is enabled */
+    autoPageSize: ComputedRef<boolean>;
+    /** Navigate to a specific page (0-based index) */
+    setPageIndex: (index: number) => void;
+    /** Set the page size */
+    setPageSize: (size: number) => void;
+    /** Navigate to the first page */
+    firstPage: () => void;
+    /** Navigate to the last page */
+    lastPage: () => void;
+    /** Navigate to the next page */
+    nextPage: () => void;
+    /** Navigate to the previous page */
+    previousPage: () => void;
+    /** Check if can go to next page */
+    canNextPage: ComputedRef<boolean>;
+    /** Check if can go to previous page */
+    canPreviousPage: ComputedRef<boolean>;
+}
+interface UseNuGridPagingOptions<T extends TableData> {
+    /** NuGrid props */
+    props: NuGridProps<T>;
+    /** TanStack table instance */
+    tableApi: Table<T>;
+    /** Root container element for auto page size calculation */
+    rootRef: Ref<HTMLElement | null>;
+    /** Row height for auto page size calculation */
+    estimatedRowHeight?: number;
+    /** Header height for auto page size calculation */
+    headerHeight?: number;
+    /** Paging panel height for auto page size calculation */
+    pagingPanelHeight?: number;
+}
+/**
+ * Resolve paging options from props
+ * Handles boolean shorthand and merges with defaults
+ */
+export declare function resolvePagingOptions(prop: boolean | NuGridPagingOptions | undefined): NuGridPagingOptions;
+/**
+ * Get the pagination row model for TanStack table
+ * Returns undefined if paging is not enabled
+ */
+export declare function getPagingRowModelIfEnabled(prop: boolean | NuGridPagingOptions | undefined): ((table: Table<unknown>) => () => import("@tanstack/table-core").RowModel<unknown>) | undefined;
+/**
+ * Composable for NuGrid paging
+ *
+ * Provides:
+ * - Paging configuration from props
+ * - Auto page size calculation based on container height
+ * - Page navigation methods
+ * - Paging context for child components
+ */
+export declare function useNuGridPaging<T extends TableData = TableData>(options: UseNuGridPagingOptions<T>): NuGridPagingContext;
+export {};

package/dist/runtime/composables/_internal/useNuGridPaging.js

@@ -0,0 +1,147 @@
+import { getPaginationRowModel } from "@tanstack/vue-table";
+import { useResizeObserver } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+import { nuGridDefaults } from "../../config/_internal/index.js";
+export function resolvePagingOptions(prop) {
+  const defaults = nuGridDefaults.paging;
+  if (prop === void 0 || prop === false) {
+    return { ...defaults, enabled: false };
+  }
+  if (prop === true) {
+    return { ...defaults, enabled: true };
+  }
+  return {
+    enabled: prop.enabled ?? defaults.enabled,
+    pageSize: prop.pageSize ?? defaults.pageSize,
+    pageSizeSelector: prop.pageSizeSelector ?? defaults.pageSizeSelector,
+    autoPageSize: prop.autoPageSize ?? defaults.autoPageSize,
+    autoPageSizeMinimum: prop.autoPageSizeMinimum ?? defaults.autoPageSizeMinimum,
+    suppressPanel: prop.suppressPanel ?? defaults.suppressPanel
+  };
+}
+export function getPagingRowModelIfEnabled(prop) {
+  const options = resolvePagingOptions(prop);
+  if (options.enabled) {
+    return getPaginationRowModel();
+  }
+  return void 0;
+}
+export function useNuGridPaging(options) {
+  const { props, tableApi, rootRef } = options;
+  const resolvedOptions = computed(() => resolvePagingOptions(props.paging));
+  const enabled = computed(() => resolvedOptions.value.enabled ?? false);
+  const autoPageSizeEnabled = computed(() => resolvedOptions.value.autoPageSize ?? false);
+  const suppressPanel = computed(() => resolvedOptions.value.suppressPanel ?? false);
+  const showPanel = computed(() => enabled.value && !suppressPanel.value);
+  const pageSizeOptions = computed(() => {
+    const selector = resolvedOptions.value.pageSizeSelector;
+    if (selector === false) {
+      return [];
+    }
+    if (Array.isArray(selector)) {
+      return selector;
+    }
+    return nuGridDefaults.paging.pageSizeSelector;
+  });
+  const calculatedAutoPageSize = ref(null);
+  const autoPageSizeMinimum = computed(
+    () => resolvedOptions.value.autoPageSizeMinimum ?? nuGridDefaults.paging.autoPageSizeMinimum
+  );
+  const calculateAutoPageSize = () => {
+    if (!autoPageSizeEnabled.value || !rootRef.value) {
+      calculatedAutoPageSize.value = null;
+      return;
+    }
+    const containerHeight = rootRef.value.clientHeight;
+    if (containerHeight <= 0) {
+      calculatedAutoPageSize.value = null;
+      return;
+    }
+    const headerHeight = options.headerHeight ?? 48;
+    const pagingHeight = options.pagingPanelHeight ?? 56;
+    const rowHeight = options.estimatedRowHeight ?? 48;
+    const availableHeight = containerHeight - headerHeight - pagingHeight;
+    const minimum = autoPageSizeMinimum.value;
+    const calculatedSize = Math.max(minimum, Math.floor(availableHeight / rowHeight));
+    calculatedAutoPageSize.value = calculatedSize;
+    if (autoPageSizeEnabled.value && tableApi) {
+      tableApi.setPageSize(calculatedSize);
+    }
+  };
+  useResizeObserver(rootRef, () => {
+    if (autoPageSizeEnabled.value) {
+      calculateAutoPageSize();
+    }
+  });
+  watch(
+    [enabled, () => resolvedOptions.value.pageSize, autoPageSizeEnabled],
+    ([isEnabled, configuredPageSize]) => {
+      if (isEnabled && !autoPageSizeEnabled.value && tableApi) {
+        tableApi.setPageSize(configuredPageSize ?? nuGridDefaults.paging.pageSize);
+      }
+    },
+    { immediate: true }
+  );
+  watch(autoPageSizeEnabled, (isAuto) => {
+    if (isAuto) {
+      calculateAutoPageSize();
+    }
+  });
+  const pageSize = computed(() => {
+    if (autoPageSizeEnabled.value && calculatedAutoPageSize.value !== null) {
+      return calculatedAutoPageSize.value;
+    }
+    return tableApi?.getState().pagination.pageSize ?? resolvedOptions.value.pageSize ?? 20;
+  });
+  const pageIndex = computed(() => {
+    return tableApi?.getState().pagination.pageIndex ?? 0;
+  });
+  const totalRows = computed(() => {
+    return tableApi?.getFilteredRowModel().rows.length ?? 0;
+  });
+  const totalPages = computed(() => {
+    return tableApi?.getPageCount() ?? 0;
+  });
+  const canNextPage = computed(() => {
+    return tableApi?.getCanNextPage() ?? false;
+  });
+  const canPreviousPage = computed(() => {
+    return tableApi?.getCanPreviousPage() ?? false;
+  });
+  const setPageIndex = (index) => {
+    tableApi?.setPageIndex(index);
+  };
+  const setPageSize = (size) => {
+    tableApi?.setPageSize(size);
+  };
+  const firstPage = () => {
+    tableApi?.firstPage();
+  };
+  const lastPage = () => {
+    tableApi?.lastPage();
+  };
+  const nextPage = () => {
+    tableApi?.nextPage();
+  };
+  const previousPage = () => {
+    tableApi?.previousPage();
+  };
+  return {
+    enabled,
+    pageSize,
+    pageIndex,
+    totalRows,
+    totalPages,
+    pageSizeOptions,
+    showPanel,
+    autoPageSize: autoPageSizeEnabled,
+    setPageIndex,
+    setPageSize,
+    firstPage,
+    lastPage,
+    nextPage,
+    previousPage,
+    canNextPage,
+    canPreviousPage
+  };
+}

package/dist/runtime/composables/_internal/useNuGridRowDragDrop.d.ts

@@ -0,0 +1,68 @@
+import type { TableData } from '@nuxt/ui';
+import type { Row, Table } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
+import type { NuGridEventEmitter } from '../../types/index.js';
+export type { RowDragEvent } from '../../types/drag-drop.js';
+export interface RowDragOptions {
+    /**
+     * Enable row dragging
+     * @defaultValue false
+     */
+    enabled?: boolean;
+    /**
+     * Field name to update with new sort order after drag
+     * @defaultValue undefined
+     */
+    sortOrderField?: string;
+    /**
+     * Allow dragging rows between groups
+     * @defaultValue false
+     */
+    allowCrossGroup?: boolean;
+    /**
+     * Allow dragging rows between different grid instances
+     * @defaultValue false
+     */
+    allowCrossGrid?: boolean;
+    /**
+     * Grid instance ID for cross-grid dragging
+     * @defaultValue undefined
+     */
+    gridId?: string;
+}
+/**
+ * Row drag and drop functionality
+ */
+export declare function useNuGridRowDragDrop<T extends TableData>(tableApi: Table<T>, data: Ref<T[]>, options: Ref<RowDragOptions>, tableRef: Ref<HTMLDivElement | null>, emit?: (event: string, ...args: any[]) => void, eventEmitter?: NuGridEventEmitter<T>): Ref<{
+    draggedRowId: string | null;
+    draggedRowData: any;
+    dropTargetRowId: string | null;
+    dropPosition: "before" | "after";
+    dragSourceGridId: string | null;
+    isDraggingOutside: boolean;
+    handleRowDragStart: (e: DragEvent, row: Row<T>) => void;
+    handleRowDragOver: (e: DragEvent, row: Row<T>) => void;
+    handleRowDrop: (e: DragEvent, row: Row<T>) => void;
+    handleRowDragEnd: () => void;
+    handleRowDragLeave: (e: DragEvent) => void;
+    handleRowDragEnter: () => void;
+    isRowDraggable: (row: Row<T>) => boolean;
+    rowDragHandleProps: (row: Row<T>) => Record<string, unknown>;
+    rowDragProps: (row: Row<T>) => Record<string, unknown>;
+}, {
+    draggedRowId: string | null;
+    draggedRowData: any;
+    dropTargetRowId: string | null;
+    dropPosition: "before" | "after";
+    dragSourceGridId: string | null;
+    isDraggingOutside: boolean;
+    handleRowDragStart: (e: DragEvent, row: Row<T>) => void;
+    handleRowDragOver: (e: DragEvent, row: Row<T>) => void;
+    handleRowDrop: (e: DragEvent, row: Row<T>) => void;
+    handleRowDragEnd: () => void;
+    handleRowDragLeave: (e: DragEvent) => void;
+    handleRowDragEnter: () => void;
+    isRowDraggable: (row: Row<T>) => boolean;
+    rowDragHandleProps: (row: Row<T>) => Record<string, unknown>;
+    rowDragProps: (row: Row<T>) => Record<string, unknown>;
+}>;