erp-pos-ecommerce-shared 0.1.0 → 0.1.2

package/dist/components.d.ts

@@ -6,7 +6,7 @@ import { s as TblProductsImage, o as ITableFilterConfig, g as IFilterSelectOptio
 import * as z from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef, Row, useReactTable } from '@tanstack/react-table';
-import { D as DataTableConfig, S as ServerTableState } from './datatable.interface-BObLVL2e.js';
+import { D as DataTableConfig, S as ServerTableState } from './datatable.interface-DFSQWdXd.js';
 
 interface CreateEditFormProps<T> {
     fields: IField[];
@@ -123,38 +123,36 @@ interface BottomPaginationProps {
 declare const BottomPagination: ({ total, pageSize, pageIndex, onPageSizeChange, onPageIndexChange, }: BottomPaginationProps) => react_jsx_runtime.JSX.Element | null;
 
 interface DataTableProps$1<TData> {
-    /** Data to display in the table */
+    /** Data to display in the table (current page, already paginated by server) */
     data: TData[];
     /** Columns to display in the table */
     columns: ColumnDef<TData>[];
     /** Configuration for the table */
     config?: Partial<DataTableConfig>;
-    /** Dynamic filters (selects for category, role, etc.) */
+    /** Dynamic filters (selects, dates, etc.) */
     filters?: ITableFilterConfig[];
-    /** Enable server-side mode: pagination, filters, search handled by backend */
-    serverSide?: boolean;
-    /** Total row count from server (required when serverSide) */
+    /** Total row count from server (used for pagination) */
     totalRowCount?: number;
-    /** Called when table state changes. Use for API calls. */
+    /** Called when table state changes (page, search, filters, sort). Use to call your API. */
     onStateChange?: (state: ServerTableState) => void;
-    /** Whether the table is loading (shows TableSkeleton) */
+    /** Whether the table is loading (shows skeleton) */
     loading?: boolean;
     /** Whether to enable row selection */
     enableRowCheck?: boolean;
-    /** Called when row selection changes (only when canCheck is true) */
+    /** Called when row selection changes */
     onSelectionChange?: (selectedRows: TData[]) => void;
     /** Header background color. Use light-dark(light, dark) for theme-aware colors */
     headerBgColor?: string;
-    /** Column actions to display in the table */
+    /** Column actions to display per row */
     columnActions?: (row: TData) => React.ReactNode;
-    /** List menu actions to display in the table */
+    /** List menu actions to display per row */
     listMenuActions?: (row: TData) => {
         label: string;
         onClick: () => void;
         Icon?: React.ElementType;
     }[];
 }
-declare const DataTable: <TData>({ data, columns, config, filters, serverSide, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTable: <TData>({ data, columns, config, filters, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
 
 interface EmptyStateProps {
     title?: string;

package/dist/components.js

@@ -9,7 +9,7 @@ import { modals } from '@mantine/modals';
 import { notifications } from '@mantine/notifications';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as z from 'zod';
-import { flexRender, useReactTable, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { flexRender, useReactTable, getPaginationRowModel, getCoreRowModel } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ArrowUpDown, FileX, X, Search, ChevronUp, ChevronDown, ListFilter, Check, CalendarDays, MoreVertical } from 'lucide-react';
 
 // src/components/form/CreateEditForm.tsx
@@ -1196,8 +1196,7 @@ var defaultDataTableConfig = {
   pageSizeOptions: [5, 10, 15, 20, 50],
   defaultPageSize: 10,
   searchPlaceholder: "Buscar...",
-  enableGlobalFilter: true,
-  pageSizeLabel: (size) => `${size} / p\xE1g`
+  enableGlobalFilter: true
 };
 
 // src/hooks/useDataTable.ts
@@ -1206,15 +1205,11 @@ function useDataTable({
   columns,
   config: configOverride,
   enableRowSelection = false,
-  serverSide = false,
   totalRowCount,
   onStateChange
 }) {
   const mergedConfig = useMemo(
-    () => ({
-      ...defaultDataTableConfig,
-      ...configOverride
-    }),
+    () => ({ ...defaultDataTableConfig, ...configOverride }),
     [configOverride]
   );
   const [pagination, setPagination] = useState({
@@ -1229,14 +1224,15 @@ function useDataTable({
     () => (columnId, value) => {
       setColumnFilters((prev) => {
         const rest = prev.filter((f) => f.id !== columnId);
-        if (value === void 0 || value === null || value === "") {
-          return rest;
-        }
+        if (value === void 0 || value === null || value === "") return rest;
         return [...rest, { id: columnId, value }];
       });
     },
     []
   );
+  useEffect(() => {
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+  }, [globalFilter, columnFilters]);
   const serverState = useMemo(
     () => ({
       pageIndex: pagination.pageIndex,
@@ -1245,19 +1241,11 @@ function useDataTable({
       columnFilters,
       sorting
     }),
-    [
-      pagination.pageIndex,
-      pagination.pageSize,
-      globalFilter,
-      columnFilters,
-      sorting
-    ]
+    [pagination.pageIndex, pagination.pageSize, globalFilter, columnFilters, sorting]
   );
   useEffect(() => {
-    if (serverSide && onStateChange) {
-      onStateChange(serverState);
-    }
-  }, [serverSide, onStateChange, serverState]);
+    onStateChange?.(serverState);
+  }, [onStateChange, serverState]);
   const table = useReactTable({
     data,
     columns,
@@ -1265,7 +1253,7 @@ function useDataTable({
       pagination,
       sorting,
       rowSelection: enableRowSelection ? rowSelection : void 0,
-      globalFilter: mergedConfig.enableGlobalFilter ? globalFilter : void 0,
+      globalFilter,
       columnFilters
     },
     onPaginationChange: setPagination,
@@ -1274,14 +1262,12 @@ function useDataTable({
     onGlobalFilterChange: setGlobalFilter,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     enableRowSelection,
-    manualPagination: serverSide,
-    manualFiltering: serverSide,
-    manualSorting: serverSide,
-    pageCount: serverSide && totalRowCount != null ? Math.max(1, Math.ceil(totalRowCount / pagination.pageSize)) : void 0
+    manualPagination: true,
+    manualFiltering: true,
+    manualSorting: true,
+    pageCount: totalRowCount != null ? Math.max(1, Math.ceil(totalRowCount / pagination.pageSize)) : void 0
   });
   const selectedRows = useMemo(
     () => enableRowSelection ? table.getSelectedRowModel().rows.map((row) => row.original) : [],
@@ -1795,7 +1781,6 @@ var DataTable = ({
   columns,
   config,
   filters,
-  serverSide = false,
   totalRowCount,
   onStateChange,
   loading = false,
@@ -1818,7 +1803,6 @@ var DataTable = ({
     columns,
     config,
     enableRowSelection: canCheck,
-    serverSide,
     totalRowCount,
     onStateChange
   });
@@ -1875,13 +1859,7 @@ var DataTable = ({
       ),
       /* @__PURE__ */ jsx(Table.Tbody, { children: Array.from({ length: mergedConfig.defaultPageSize }).map(
         (_, rowIdx) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
-          canCheck && /* @__PURE__ */ jsx(
-            Table.Td,
-            {
-              style: { minHeight: 40, verticalAlign: "middle" },
-              children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 18, radius: "sm" })
-            }
-          ),
+          canCheck && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 18, radius: "sm" }) }),
           Array.from({ length: columns.length }).map((_2, colIdx) => /* @__PURE__ */ jsx(
             Table.Td,
             {
@@ -1897,13 +1875,7 @@ var DataTable = ({
             },
             colIdx
           )),
-          (columnActions ?? listMenuActions) && /* @__PURE__ */ jsx(
-            Table.Td,
-            {
-              style: { minHeight: 40, verticalAlign: "middle" },
-              children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 32, radius: "sm" })
-            }
-          )
+          (columnActions ?? listMenuActions) && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 32, radius: "sm" }) })
         ] }, rowIdx)
       ) })
     ] }) }) : /* @__PURE__ */ jsxs(Paper, { withBorder: true, radius: "md", style: { overflow: "hidden" }, children: [
@@ -1920,7 +1892,7 @@ var DataTable = ({
       /* @__PURE__ */ jsx(
         BottomPagination,
         {
-          total: serverSide && totalRowCount != null ? totalRowCount : table.getRowCount(),
+          total: totalRowCount ?? 0,
           pageSize: table.getState().pagination.pageSize,
           pageIndex: table.getState().pagination.pageIndex,
           onPageSizeChange: (value) => table.setPageSize(value),