erp-pos-ecommerce-shared 0.1.6 → 0.2.0

package/dist/components.d.ts

@@ -162,8 +162,14 @@ interface DataTableProps$1<TData> {
     table?: ReturnType<typeof useReactTable<TData>>;
     /** Custom Header component */
     CustomHeader?: React.ReactNode;
+    /** Whether to show the search input */
+    showSearchInput?: boolean;
+    /** Whether to show the bottom pagination */
+    showBottomPagination?: boolean;
+    /** Height of the table */
+    tableHeight?: number;
 }
-declare const DataTable: <TData>({ data, columns, config, filters, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, onRowClick, onRowHover, emptyState, table: ExternalTable, CustomHeader, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTable: <TData>({ showSearchInput, showBottomPagination, data, columns, config, filters, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, onRowClick, onRowHover, emptyState, table: ExternalTable, CustomHeader, tableHeight, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
 
 interface EmptyStateProps {
     title?: string;
@@ -262,8 +268,10 @@ interface DataTableProps<TData> {
     onRowHover?: (row: TData) => void;
     /** Empty state to display when no data is available */
     emptyState?: React$1.ReactNode;
+    /** Height of the table */
+    tableHeight?: number;
 }
-declare const SimpleDataTable: <TData>({ table, withBorder, borderRadius, SortIcon, SortIconAsc, SortIconDesc, canCheck, columnActions, listMenuActions, headerBgColor, loading, skeletonRowCount, onRowClick, onRowHover, emptyState, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const SimpleDataTable: <TData>({ tableHeight, table, withBorder, borderRadius, SortIcon, SortIconAsc, SortIconDesc, canCheck, columnActions, listMenuActions, headerBgColor, loading, skeletonRowCount, onRowClick, onRowHover, emptyState, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface TableSkeletonProps {
     /** Number of skeleton rows to show */
@@ -291,7 +299,7 @@ interface TablePageProps<TRow> {
     /**
      * Title of the table
      */
-    title: string;
+    title?: string;
     /**
      * Columns of the table
      */
@@ -352,7 +360,19 @@ interface TablePageProps<TRow> {
      * Custom Header component
      */
     CustomHeader?: React.ReactNode;
+    /**
+     * Whether to show the search input
+     */
+    showSearchInput?: boolean;
+    /**
+     * Whether to show the bottom pagination
+     */
+    showBottomPagination?: boolean;
+    /**
+     * Height of the table
+     */
+    tableHeight?: number;
 }
-declare const TablePage: <TRow>({ getQueryOptions, title, columns, filters, isLoadingExternal, onRowClick, onRowHover, emptyState, table, enableRowSelection, headerBgColor, columnActions, listMenuActions, onSelectionChange, config, CustomHeader, }: TablePageProps<TRow>) => react_jsx_runtime.JSX.Element;
+declare const TablePage: <TRow>({ getQueryOptions, title, columns, filters, isLoadingExternal, onRowClick, onRowHover, emptyState, table, enableRowSelection, headerBgColor, columnActions, listMenuActions, onSelectionChange, config, CustomHeader, showSearchInput, showBottomPagination, tableHeight, }: TablePageProps<TRow>) => react_jsx_runtime.JSX.Element;
 
 export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, type PaginatedResponse, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };

package/dist/components.js

@@ -9,7 +9,8 @@ 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, getCoreRowModel } from '@tanstack/react-table';
+import { useMediaQuery } from '@mantine/hooks';
+import { flexRender, useReactTable, getSortedRowModel, 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
@@ -1114,6 +1115,8 @@ var BottomPagination = ({
   onPageSizeChange,
   onPageIndexChange
 }) => {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const isDesktop = useMediaQuery("(min-width: 992px)");
   const totalPages = Math.ceil(total / pageSize);
   const currentPage = pageIndex + 1;
   const handlePageChange = (page) => {
@@ -1145,18 +1148,18 @@ var BottomPagination = ({
           Pagination,
           {
             radius: "md",
-            withEdges: true,
+            withEdges: isDesktop,
             total: totalPages,
             value: currentPage,
             onChange: handlePageChange,
             size: "sm",
-            siblings: 1,
-            boundaries: 1,
-            style: {
+            siblings: !isMobile ? 1 : 0,
+            boundaries: !isMobile ? 1 : 0,
+            style: isDesktop ? {
               position: "absolute",
               left: "50%",
               transform: "translateX(-50%)"
-            }
+            } : void 0
           }
         ),
         /* @__PURE__ */ jsxs(Group, { style: { marginLeft: "auto", alignItems: "center" }, children: [
@@ -1179,8 +1182,8 @@ var BottomPagination = ({
               comboboxProps: { withinPortal: false }
             }
           ),
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "registros" }),
-          total !== void 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", ml: "xs", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", visibleFrom: "sm", children: "registros" }),
+          total !== void 0 && !isMobile && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", ml: "xs", children: [
             "(",
             total,
             " en total)"
@@ -1263,10 +1266,12 @@ function useDataTable({
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
     enableRowSelection,
     manualPagination: true,
     manualFiltering: true,
-    manualSorting: true,
+    /** Sort is applied client-side to the current page only (no server refetch) */
+    manualSorting: false,
     pageCount: totalRowCount != null ? Math.max(1, Math.ceil(totalRowCount / pagination.pageSize)) : void 0
   });
   const selectedRows = useMemo(
@@ -1462,7 +1467,7 @@ var TableBody = ({
           },
           cell.id
         )),
-        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", align: "center", gap: "sm", children: [
+        (columnActions || listMenuActions) && /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", align: "center", gap: "sm", children: [
           columnActions?.(row.original),
           listMenuActions && /* @__PURE__ */ jsxs(Menu, { variant: "subtle", children: [
             /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", children: /* @__PURE__ */ jsx(MenuIcon, { size: 16 }) }) }),
@@ -1583,6 +1588,7 @@ var EmptyState = ({
   );
 };
 var SimpleDataTable = ({
+  tableHeight = 600,
   table,
   withBorder,
   borderRadius = "md",
@@ -1609,7 +1615,7 @@ var SimpleDataTable = ({
   const dataColumnsCount = table.getAllLeafColumns().length;
   const hasActionsColumn = !!(columnActions || listMenuActions);
   const headerBg = typeof headerBgColor === "string" ? headerBgColor : headerBgColor?.bgColor ?? defaultHeaderBgColor;
-  return /* @__PURE__ */ jsx(Paper, { withBorder, radius: borderRadius, children: /* @__PURE__ */ jsx(ScrollArea, { h: 600, type: "scroll", scrollbarSize: 8, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Paper, { withBorder, radius: borderRadius, children: /* @__PURE__ */ jsx(ScrollArea, { h: tableHeight, type: "scroll", scrollbarSize: 8, children: /* @__PURE__ */ jsxs(
     Table,
     {
       styles: {
@@ -1905,6 +1911,8 @@ var FilterDate = ({
   );
 };
 var DataTable = ({
+  showSearchInput = true,
+  showBottomPagination = true,
   data,
   columns,
   config,
@@ -1921,7 +1929,8 @@ var DataTable = ({
   onRowHover,
   emptyState,
   table: ExternalTable,
-  CustomHeader
+  CustomHeader,
+  tableHeight = 600
 }) => {
   const {
     table: internalTable,
@@ -1949,7 +1958,7 @@ var DataTable = ({
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "md", children: [
     /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
       /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "wrap", children: [
-        mergedConfig.enableGlobalFilter && /* @__PURE__ */ jsx(
+        showSearchInput && mergedConfig.enableGlobalFilter && /* @__PURE__ */ jsx(
           SearchInput,
           {
             value: globalFilter,
@@ -1985,6 +1994,7 @@ var DataTable = ({
       /* @__PURE__ */ jsx(
         SimpleDataTable,
         {
+          tableHeight,
           onRowClick,
           onRowHover,
           table,
@@ -1997,7 +2007,7 @@ var DataTable = ({
           emptyState
         }
       ),
-      /* @__PURE__ */ jsx(
+      showBottomPagination && /* @__PURE__ */ jsx(
         BottomPagination,
         {
           total: totalRowCount ?? 0,
@@ -2029,7 +2039,10 @@ var TablePage = ({
   listMenuActions,
   onSelectionChange,
   config,
-  CustomHeader
+  CustomHeader,
+  showSearchInput = true,
+  showBottomPagination = true,
+  tableHeight = 600
 }) => {
   const [tableParams, setTableParams] = useState({
     skip: 0,
@@ -2046,11 +2059,14 @@ var TablePage = ({
   }, []);
   const { data, isLoading } = useQuery(getQueryOptions(tableParams));
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "sm", children: [
-    /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
+    title && /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
     /* @__PURE__ */ jsx(
       DataTable,
       {
+        showBottomPagination,
+        tableHeight,
         emptyState,
+        showSearchInput,
         table,
         onRowClick: (row) => onRowClick?.(row),
         onRowHover: (row) => onRowHover?.(row),