@pagamio/frontend-commons-lib 0.8.213 → 0.8.214

package/lib/data-table-v2/components/DataTableRowActions.d.ts

@@ -0,0 +1,13 @@
+import type { RowAction } from '../types';
+interface DataTableRowActionsProps<TData> {
+    /** Row data */
+    row: TData;
+    /** Actions configuration */
+    actions: RowAction<TData>[];
+}
+/**
+ * DataTable Row Actions Component
+ * Dropdown menu for row-level actions
+ */
+export declare function DataTableRowActions<TData>({ row, actions }: DataTableRowActionsProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+export default DataTableRowActions;

package/lib/data-table-v2/components/DataTableRowActions.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Row Actions Component
+ */
+import { MoreHorizontal } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../helpers';
+/**
+ * DataTable Row Actions Component
+ * Dropdown menu for row-level actions
+ */
+export function DataTableRowActions({ row, actions }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const menuRef = useRef(null);
+    // Close menu on outside click
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    // Filter visible actions
+    const visibleActions = actions.filter((action) => {
+        if (typeof action.hidden === 'function') {
+            return !action.hidden(row);
+        }
+        return !action.hidden;
+    });
+    if (visibleActions.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "relative", ref: menuRef, children: [_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setIsOpen(!isOpen);
+                }, className: "p-1.5 rounded-md hover:bg-gray-100 transition-colors", children: _jsx(MoreHorizontal, { className: "w-4 h-4 text-gray-500" }) }), isOpen && (_jsx("div", { className: "absolute right-0 top-full mt-1 w-40 bg-white border border-gray-200 rounded-lg shadow-lg z-30", children: _jsx("div", { className: "py-1", children: visibleActions.map((action) => {
+                        const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : action.disabled;
+                        return (_jsxs("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                if (!isDisabled) {
+                                    action.onClick(row);
+                                    setIsOpen(false);
+                                }
+                            }, disabled: isDisabled, className: cn('w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors', action.variant === 'danger'
+                                ? 'text-red-600 hover:bg-red-50'
+                                : action.variant === 'primary'
+                                    ? 'text-blue-600 hover:bg-blue-50'
+                                    : 'text-gray-700 hover:bg-gray-50', isDisabled && 'opacity-50 cursor-not-allowed hover:bg-transparent'), children: [action.icon && _jsx("span", { className: "w-4 h-4", children: action.icon }), action.label] }, action.id));
+                    }) }) }))] }));
+}
+export default DataTableRowActions;

package/lib/data-table-v2/components/DataTableSearch.d.ts

@@ -0,0 +1,19 @@
+import type { DataTableClassNames } from '../types';
+interface DataTableSearchProps {
+    /** Current global filter value */
+    value: string;
+    /** On change handler */
+    onChange: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Custom classNames */
+    classNames?: DataTableClassNames;
+}
+/**
+ * DataTable Search Component
+ * Global search/filter input with debounce
+ */
+export declare function DataTableSearch({ value: externalValue, onChange, placeholder, debounceMs, classNames, }: DataTableSearchProps): import("react/jsx-runtime").JSX.Element;
+export default DataTableSearch;

package/lib/data-table-v2/components/DataTableSearch.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Search/Filter Component
+ */
+import { Search, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { cn } from '../../helpers';
+/**
+ * DataTable Search Component
+ * Global search/filter input with debounce
+ */
+export function DataTableSearch({ value: externalValue, onChange, placeholder = 'Search...', debounceMs = 300, classNames, }) {
+    const [value, setValue] = useState(externalValue);
+    // Sync external value
+    useEffect(() => {
+        setValue(externalValue);
+    }, [externalValue]);
+    // Debounced onChange
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (value !== externalValue) {
+                onChange(value);
+            }
+        }, debounceMs);
+        return () => clearTimeout(timer);
+    }, [value, debounceMs, onChange, externalValue]);
+    const handleClear = () => {
+        setValue('');
+        onChange('');
+    };
+    return (_jsxs("div", { className: cn('relative', classNames?.search), children: [_jsx("div", { className: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none", children: _jsx(Search, { className: "w-4 h-4 text-gray-400" }) }), _jsx("input", { type: "text", value: value, onChange: (e) => setValue(e.target.value), placeholder: placeholder, className: "w-full pl-10 pr-10 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" }), value && (_jsx("button", { onClick: handleClear, className: "absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600", children: _jsx(X, { className: "w-4 h-4" }) }))] }));
+}
+export default DataTableSearch;

package/lib/data-table-v2/components/DataTableToolbar.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { BulkAction, ColumnVisibilityOptions, DataTableClassNames, ExportOptions } from '../types';
+interface DataTableToolbarProps<TData> {
+    /** Table title */
+    title?: string;
+    /** Table description */
+    description?: string;
+    /** Global filter value */
+    globalFilter: string;
+    /** Global filter setter */
+    setGlobalFilter: (value: string) => void;
+    /** Enable global filter */
+    enableGlobalFilter?: boolean;
+    /** Global filter placeholder */
+    globalFilterPlaceholder?: string;
+    /** Filter debounce time */
+    filterDebounceMs?: number;
+    /** Column visibility state */
+    columnVisibility: Record<string, boolean>;
+    /** Column visibility setter */
+    setColumnVisibility: (visibility: Record<string, boolean>) => void;
+    /** Column visibility options */
+    columnVisibilityOptions?: ColumnVisibilityOptions;
+    /** All columns for visibility toggle */
+    allColumns: Array<{
+        id: string;
+        getIsVisible: () => boolean;
+        toggleVisibility: (value: boolean) => void;
+        columnDef: {
+            header?: unknown;
+        };
+    }>;
+    /** Export options */
+    exportOptions?: ExportOptions;
+    /** Export handler */
+    onExport?: (format: string) => void;
+    /** Refresh handler */
+    onRefresh?: () => void;
+    /** Selected row count */
+    selectedCount?: number;
+    /** Bulk actions */
+    bulkActions?: BulkAction<TData>[];
+    /** Selected rows for bulk actions */
+    selectedRows?: TData[];
+    /** Custom header content */
+    headerContent?: React.ReactNode;
+    /** Custom classNames */
+    classNames?: DataTableClassNames;
+}
+/**
+ * DataTable Toolbar Component
+ */
+export declare function DataTableToolbar<TData>({ title, description, globalFilter, setGlobalFilter, enableGlobalFilter, globalFilterPlaceholder, filterDebounceMs, columnVisibility, setColumnVisibility, columnVisibilityOptions, allColumns, exportOptions, onExport, onRefresh, selectedCount, bulkActions, selectedRows, headerContent, classNames, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default DataTableToolbar;

package/lib/data-table-v2/components/DataTableToolbar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Toolbar Component
+ */
+import { Columns, Download, RefreshCw } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '../../helpers';
+import { DataTableSearch } from './DataTableSearch';
+/**
+ * DataTable Toolbar Component
+ */
+export function DataTableToolbar({ title, description, globalFilter, setGlobalFilter, enableGlobalFilter = true, globalFilterPlaceholder, filterDebounceMs, columnVisibility, setColumnVisibility, columnVisibilityOptions, allColumns, exportOptions, onExport, onRefresh, selectedCount = 0, bulkActions, selectedRows = [], headerContent, classNames, }) {
+    const [showColumnMenu, setShowColumnMenu] = useState(false);
+    const [showExportMenu, setShowExportMenu] = useState(false);
+    return (_jsxs("div", { className: cn('px-4 py-3 border-b border-gray-200 bg-white', classNames?.toolbar), children: [(title || description) && (_jsxs("div", { className: "mb-3", children: [title && _jsx("h2", { className: "text-lg font-semibold text-gray-900", children: title }), description && _jsx("p", { className: "text-sm text-gray-500", children: description })] })), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [enableGlobalFilter && (_jsx("div", { className: "w-64", children: _jsx(DataTableSearch, { value: globalFilter, onChange: setGlobalFilter, placeholder: globalFilterPlaceholder, debounceMs: filterDebounceMs, classNames: classNames }) })), selectedCount > 0 && bulkActions && bulkActions.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 ml-2 pl-2 border-l border-gray-200", children: [_jsxs("span", { className: "text-sm text-gray-600", children: [selectedCount, " selected"] }), bulkActions.map((action) => (_jsxs("button", { onClick: () => action.onClick(selectedRows), disabled: action.disabled, className: cn('px-3 py-1.5 text-sm font-medium rounded-md transition-colors', action.variant === 'danger'
+                                            ? 'text-red-600 hover:bg-red-50'
+                                            : action.variant === 'primary'
+                                                ? 'text-blue-600 hover:bg-blue-50'
+                                                : 'text-gray-600 hover:bg-gray-100', action.disabled && 'opacity-50 cursor-not-allowed'), children: [action.icon && _jsx("span", { className: "mr-1.5", children: action.icon }), action.label] }, action.id)))] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerContent, onRefresh && (_jsx("button", { onClick: onRefresh, className: "p-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors", title: "Refresh", children: _jsx(RefreshCw, { className: "w-4 h-4" }) })), columnVisibilityOptions?.enabled !== false && (_jsxs("div", { className: "relative", children: [_jsx("button", { onClick: () => setShowColumnMenu(!showColumnMenu), className: "p-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors", title: "Toggle columns", children: _jsx(Columns, { className: "w-4 h-4" }) }), showColumnMenu && (_jsx("div", { className: "absolute right-0 top-full mt-1 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-20", children: _jsx("div", { className: "p-2 max-h-64 overflow-y-auto", children: allColumns.map((column) => {
+                                                const isAlwaysVisible = columnVisibilityOptions?.alwaysVisible?.includes(column.id);
+                                                const header = typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+                                                return (_jsxs("label", { className: cn('flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer', isAlwaysVisible && 'opacity-50 cursor-not-allowed'), children: [_jsx("input", { type: "checkbox", checked: column.getIsVisible(), onChange: (e) => column.toggleVisibility(e.target.checked), disabled: isAlwaysVisible, className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500" }), _jsx("span", { className: "text-sm text-gray-700", children: header })] }, column.id));
+                                            }) }) }))] })), exportOptions?.enabled && onExport && (_jsxs("div", { className: "relative", children: [_jsxs("button", { onClick: () => setShowExportMenu(!showExportMenu), className: "flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-md transition-colors", children: [_jsx(Download, { className: "w-4 h-4" }), "Export"] }), showExportMenu && (_jsx("div", { className: "absolute right-0 top-full mt-1 w-36 bg-white border border-gray-200 rounded-lg shadow-lg z-20", children: _jsx("div", { className: "p-1", children: (exportOptions.formats ?? ['csv', 'excel', 'json']).map((format) => (_jsxs("button", { onClick: () => {
+                                                    onExport(format);
+                                                    setShowExportMenu(false);
+                                                }, className: "w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded", children: ["Export as ", format.toUpperCase()] }, format))) }) }))] }))] })] })] }));
+}
+export default DataTableToolbar;

package/lib/data-table-v2/components/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview DataTable V2 Components Index
+ */
+export { DataTableHeader } from './DataTableHeader';
+export { DataTableBody } from './DataTableBody';
+export { DataTablePagination } from './DataTablePagination';
+export { DataTableSearch } from './DataTableSearch';
+export { DataTableToolbar } from './DataTableToolbar';
+export { DataTableEmpty } from './DataTableEmpty';
+export { DataTableLoading } from './DataTableLoading';
+export { DataTableError } from './DataTableError';
+export { DataTableRowActions } from './DataTableRowActions';

package/lib/data-table-v2/components/index.js

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview DataTable V2 Components Index
+ */
+export { DataTableHeader } from './DataTableHeader';
+export { DataTableBody } from './DataTableBody';
+export { DataTablePagination } from './DataTablePagination';
+export { DataTableSearch } from './DataTableSearch';
+export { DataTableToolbar } from './DataTableToolbar';
+export { DataTableEmpty } from './DataTableEmpty';
+export { DataTableLoading } from './DataTableLoading';
+export { DataTableError } from './DataTableError';
+export { DataTableRowActions } from './DataTableRowActions';

package/lib/data-table-v2/hooks/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @fileoverview DataTable V2 Hooks
+ */
+export { useTableData, usePaginatedTableData, type UseTableDataOptions, type UsePaginatedTableDataOptions, type UseTableDataResult, type UsePaginatedTableDataResult, } from './useTableData';

package/lib/data-table-v2/hooks/index.js

@@ -0,0 +1,4 @@
+/**
+ * @fileoverview DataTable V2 Hooks
+ */
+export { useTableData, usePaginatedTableData, } from './useTableData';

package/lib/data-table-v2/hooks/useTableData.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Options for useTableData hook
+ */
+export interface UseTableDataOptions<TData> {
+    /** API endpoint URL */
+    url: string;
+    /** Query key for TanStack Query cache management */
+    queryKey?: unknown[];
+    /** HTTP method */
+    method?: 'GET' | 'POST';
+    /** Request body for POST requests */
+    body?: Record<string, unknown>;
+    /** Query parameters */
+    params?: Record<string, string | number>;
+    /** Transform function for response data */
+    transform?: (data: unknown) => TData[];
+    /** Whether to enable the query */
+    enabled?: boolean;
+    /** Stale time in milliseconds (how long data is considered fresh) */
+    staleTime?: number;
+    /** Garbage collection time in milliseconds */
+    gcTime?: number;
+    /** Refetch interval in milliseconds (0 = disabled) */
+    refetchInterval?: number;
+    /** Refetch on window focus */
+    refetchOnWindowFocus?: boolean;
+    /** Initial data */
+    initialData?: TData[];
+}
+/**
+ * Options for usePaginatedTableData hook
+ */
+export interface UsePaginatedTableDataOptions<TData> extends UseTableDataOptions<TData> {
+    /** Current page (0-indexed) */
+    page?: number;
+    /** Page size */
+    pageSize?: number;
+    /** Sort field */
+    sortField?: string;
+    /** Sort direction */
+    sortDirection?: 'asc' | 'desc';
+    /** Search/filter query */
+    search?: string;
+    /** Additional filters */
+    filters?: Record<string, string | number | boolean | null>;
+}
+/**
+ * Result from useTableData hook
+ */
+export interface UseTableDataResult<TData> {
+    /** The fetched and transformed data */
+    data: TData[];
+    /** Whether the initial fetch is in progress */
+    isLoading: boolean;
+    /** Whether a background refetch is in progress */
+    isFetching: boolean;
+    /** Whether there was an error */
+    isError: boolean;
+    /** The error object if any */
+    error: Error | null;
+    /** Function to manually refetch data */
+    refetch: () => void;
+}
+/**
+ * Result from usePaginatedTableData hook
+ */
+export interface UsePaginatedTableDataResult<TData> extends UseTableDataResult<TData> {
+    /** Total number of items */
+    totalItems: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Current page (0-indexed) */
+    currentPage: number;
+    /** Whether there's a next page */
+    hasNextPage: boolean;
+    /** Whether there's a previous page */
+    hasPreviousPage: boolean;
+}
+/**
+ * Hook for fetching table data using TanStack Query
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error, refetch } = useTableData<User>({
+ *   url: '/api/users',
+ *   queryKey: ['users'],
+ *   params: { status: 'active' },
+ *   transform: (raw) => raw.users,
+ * });
+ * ```
+ */
+export declare function useTableData<TData = unknown>(options: UseTableDataOptions<TData>): UseTableDataResult<TData>;
+/**
+ * Hook for fetching paginated table data using TanStack Query
+ * Designed for Spring Boot style paginated responses
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   data,
+ *   isLoading,
+ *   totalItems,
+ *   totalPages,
+ *   hasNextPage,
+ * } = usePaginatedTableData<User>({
+ *   url: '/api/users',
+ *   queryKey: ['users'],
+ *   page: 0,
+ *   pageSize: 20,
+ *   sortField: 'createdAt',
+ *   sortDirection: 'desc',
+ *   search: searchQuery,
+ *   filters: { status: 'active' },
+ * });
+ * ```
+ */
+export declare function usePaginatedTableData<TData = unknown>(options: UsePaginatedTableDataOptions<TData>): UsePaginatedTableDataResult<TData>;
+export default useTableData;

package/lib/data-table-v2/hooks/useTableData.js

@@ -0,0 +1,210 @@
+/**
+ * @fileoverview useTableData hook - Data fetching for DataTable V2
+ * Uses TanStack Query for declarative, cache-aware data fetching with pagination support
+ */
+import { useCallback, useMemo } from 'react';
+import { useApiQuery, usePaginatedApiQuery } from '../../api/tanstackQuery';
+/**
+ * Hook for fetching table data using TanStack Query
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error, refetch } = useTableData<User>({
+ *   url: '/api/users',
+ *   queryKey: ['users'],
+ *   params: { status: 'active' },
+ *   transform: (raw) => raw.users,
+ * });
+ * ```
+ */
+export function useTableData(options) {
+    const { url, queryKey: customQueryKey, method = 'GET', body, params, transform, enabled = true, staleTime, gcTime, refetchInterval, refetchOnWindowFocus, initialData = [], } = options;
+    // Build query string
+    const queryString = useMemo(() => {
+        if (!params || Object.keys(params).length === 0)
+            return '';
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                searchParams.append(key, String(value));
+            }
+        });
+        return '?' + searchParams.toString();
+    }, [params]);
+    const fullUrl = `${url}${queryString}`;
+    // Build stable query key
+    const queryKey = useMemo(() => customQueryKey || ['table', url, method, params, body].filter(Boolean), [customQueryKey, url, method, params, body]);
+    // Use TanStack Query for data fetching
+    const { data: rawData, isLoading, isFetching, isError, error, refetch: queryRefetch, } = useApiQuery({
+        queryKey,
+        endpoint: fullUrl,
+        requestConfig: {
+            method,
+            ...(method === 'POST' && body ? { body: JSON.stringify(body) } : {}),
+        },
+        enabled: enabled && !!url,
+        staleTime,
+        gcTime,
+        refetchInterval: refetchInterval || false,
+        refetchOnWindowFocus: refetchOnWindowFocus ?? false,
+    });
+    // Transform data
+    const transformedData = useMemo(() => {
+        if (!rawData)
+            return initialData;
+        if (transform) {
+            try {
+                return transform(rawData);
+            }
+            catch (e) {
+                console.error('Error transforming table data:', e);
+                return initialData;
+            }
+        }
+        // Default: assume data is array or has data/content property
+        if (Array.isArray(rawData))
+            return rawData;
+        if (rawData && typeof rawData === 'object') {
+            if ('content' in rawData) {
+                return rawData.content;
+            }
+            if ('data' in rawData) {
+                return rawData.data;
+            }
+        }
+        return initialData;
+    }, [rawData, transform, initialData]);
+    const refetch = useCallback(() => {
+        queryRefetch();
+    }, [queryRefetch]);
+    return {
+        data: transformedData,
+        isLoading,
+        isFetching,
+        isError,
+        error: error,
+        refetch,
+    };
+}
+/**
+ * Hook for fetching paginated table data using TanStack Query
+ * Designed for Spring Boot style paginated responses
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   data,
+ *   isLoading,
+ *   totalItems,
+ *   totalPages,
+ *   hasNextPage,
+ * } = usePaginatedTableData<User>({
+ *   url: '/api/users',
+ *   queryKey: ['users'],
+ *   page: 0,
+ *   pageSize: 20,
+ *   sortField: 'createdAt',
+ *   sortDirection: 'desc',
+ *   search: searchQuery,
+ *   filters: { status: 'active' },
+ * });
+ * ```
+ */
+export function usePaginatedTableData(options) {
+    const { url, queryKey: customQueryKey, method = 'GET', body, params: additionalParams, transform, enabled = true, staleTime, gcTime, refetchInterval, refetchOnWindowFocus, initialData = [], page = 0, pageSize = 20, sortField, sortDirection, search, filters, } = options;
+    // Build params with pagination
+    const params = useMemo(() => {
+        const p = {
+            page,
+            size: pageSize,
+            ...additionalParams,
+        };
+        if (sortField) {
+            p.sort = sortDirection ? `${sortField},${sortDirection}` : sortField;
+        }
+        if (search) {
+            p.search = search;
+        }
+        if (filters) {
+            Object.entries(filters).forEach(([key, value]) => {
+                if (value !== undefined && value !== null && value !== '') {
+                    p[key] = String(value);
+                }
+            });
+        }
+        return p;
+    }, [page, pageSize, sortField, sortDirection, search, filters, additionalParams]);
+    // Build query string
+    const queryString = useMemo(() => {
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            searchParams.append(key, String(value));
+        });
+        return '?' + searchParams.toString();
+    }, [params]);
+    const fullUrl = `${url}${queryString}`;
+    // Build stable query key
+    const queryKey = useMemo(() => customQueryKey || ['table-paginated', url, params, body].filter(Boolean), [customQueryKey, url, params, body]);
+    // Use paginated API query
+    const { data: rawData, isLoading, isFetching, isError, error, refetch: queryRefetch, } = usePaginatedApiQuery({
+        queryKey,
+        endpoint: fullUrl,
+        requestConfig: {
+            method,
+            ...(method === 'POST' && body ? { body: JSON.stringify(body) } : {}),
+        },
+        enabled: enabled && !!url,
+        staleTime,
+        gcTime,
+        refetchInterval: refetchInterval || false,
+        refetchOnWindowFocus: refetchOnWindowFocus ?? false,
+    });
+    // Extract data and pagination info
+    const { data, totalItems, totalPages, hasNextPage, hasPreviousPage } = useMemo(() => {
+        if (!rawData) {
+            return {
+                data: initialData,
+                totalItems: 0,
+                totalPages: 0,
+                hasNextPage: false,
+                hasPreviousPage: false,
+            };
+        }
+        // Handle Spring Boot response
+        const springResponse = rawData;
+        let content = springResponse.content || [];
+        if (transform) {
+            try {
+                content = transform(content);
+            }
+            catch (e) {
+                console.error('Error transforming table data:', e);
+                content = initialData;
+            }
+        }
+        return {
+            data: content,
+            totalItems: springResponse.totalElements || 0,
+            totalPages: springResponse.totalPages || 0,
+            hasNextPage: !springResponse.last,
+            hasPreviousPage: !springResponse.first,
+        };
+    }, [rawData, transform, initialData]);
+    const refetch = useCallback(() => {
+        queryRefetch();
+    }, [queryRefetch]);
+    return {
+        data,
+        isLoading,
+        isFetching,
+        isError,
+        error: error,
+        refetch,
+        totalItems,
+        totalPages,
+        currentPage: page,
+        hasNextPage,
+        hasPreviousPage,
+    };
+}
+export default useTableData;

package/lib/data-table-v2/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @fileoverview DataTable V2 - Main exports
+ * TanStack Table-based data table with headless architecture
+ */
+export { DataTable } from './DataTable';
+export type { DataTableProps, DataTableColumn, DataTableClassNames, RowSelectionOptions, PaginationOptions, SortingOptions, FilteringOptions, ColumnVisibilityOptions, ExportOptions, RowAction, BulkAction, DataTableServerResponse, DataTableServerRequest, } from './types';
+export { DataTableHeader, DataTableBody, DataTablePagination, DataTableSearch, DataTableToolbar, DataTableEmpty, DataTableLoading, DataTableError, DataTableRowActions, } from './components';
+export { useTableData, usePaginatedTableData, type UseTableDataOptions, type UsePaginatedTableDataOptions, type UseTableDataResult, type UsePaginatedTableDataResult, } from './hooks';
+export { exportToCSV, exportToJSON, downloadFile, createExportHandler } from './utils';

package/lib/data-table-v2/index.js

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview DataTable V2 - Main exports
+ * TanStack Table-based data table with headless architecture
+ */
+// Main component
+export { DataTable } from './DataTable';
+// Sub-components (for customization)
+export { DataTableHeader, DataTableBody, DataTablePagination, DataTableSearch, DataTableToolbar, DataTableEmpty, DataTableLoading, DataTableError, DataTableRowActions, } from './components';
+// Hooks (TanStack Query based)
+export { useTableData, usePaginatedTableData, } from './hooks';
+// Utilities
+export { exportToCSV, exportToJSON, downloadFile, createExportHandler } from './utils';