@rufous/ui 0.2.105 → 0.3.0

package/dist/main.cjs

@@ -3616,15 +3616,27 @@ var DateField = ({
           const spaceBelow = window.innerHeight - rect.bottom - GAP2;
           const spaceAbove = rect.top - GAP2;
           const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
-          const top = useDropUp ? Math.max(4, rect.top - PICKER_H - GAP2) : rect.bottom + GAP2;
+          if (useDropUp) {
+            return {
+              position: "fixed",
+              left: rect.left,
+              // bottom anchors picker's bottom edge exactly to field top — no gap regardless of actual height
+              bottom: window.innerHeight - rect.top + GAP2,
+              // prevent going above viewport
+              maxHeight: rect.top - GAP2 - 4,
+              overflowY: "auto",
+              zIndex: 99999,
+              animationName: "rf-date-picker-appear-up",
+              transformOrigin: "bottom left"
+            };
+          }
           return {
             position: "fixed",
             left: rect.left,
-            top,
+            top: rect.bottom + GAP2,
             zIndex: 99999,
-            // Drive animation from same decision — no separate state/re-render needed
-            animationName: useDropUp ? "rf-date-picker-appear-up" : "rf-date-picker-appear",
-            transformOrigin: useDropUp ? "bottom left" : "top left"
+            animationName: "rf-date-picker-appear",
+            transformOrigin: "top left"
           };
         })(),
         onMouseDown: (e) => e.preventDefault()
@@ -4427,6 +4439,12 @@ function DataGrid({
   columns: initialColumnsProp,
   data,
   actions,
+  loading = false,
+  pagination = true,
+  paginationMode = "client",
+  rowCount,
+  paginationModel,
+  onPaginationModelChange,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   title,
@@ -4467,6 +4485,23 @@ function DataGrid({
   const [sortDirection, setSortDirection] = (0, import_react23.useState)(null);
   const [filterText, setFilterText] = (0, import_react23.useState)("");
   const [currentPage, setCurrentPage] = (0, import_react23.useState)(1);
+  const activePage = paginationModel ? paginationModel.page + 1 : currentPage;
+  const activePageSize = paginationModel ? paginationModel.pageSize : pageSize;
+  const handlePageChange = (newPage) => {
+    if (onPaginationModelChange) {
+      onPaginationModelChange({ page: newPage - 1, pageSize: activePageSize });
+    } else {
+      setCurrentPage(newPage);
+    }
+  };
+  const handlePageSizeChange = (newSize) => {
+    if (onPaginationModelChange) {
+      onPaginationModelChange({ page: 0, pageSize: newSize });
+    } else {
+      setPageSize(newSize);
+      setCurrentPage(1);
+    }
+  };
   const [resizingColumn, setResizingColumn] = (0, import_react23.useState)(null);
   const [startX, setStartX] = (0, import_react23.useState)(0);
   const [startWidth, setStartWidth] = (0, import_react23.useState)(0);
@@ -4699,11 +4734,14 @@ function DataGrid({
       return 0;
     });
   }, [filteredData, sortField, sortDirection, resolvedColumns]);
-  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const isServer = paginationMode === "server";
+  const totalRows = isServer ? rowCount ?? data.length : filteredData.length;
+  const totalPages = Math.max(1, Math.ceil(totalRows / activePageSize));
   const paginatedData = (0, import_react23.useMemo)(() => {
-    const start = (currentPage - 1) * pageSize;
-    return sortedData.slice(start, start + pageSize);
-  }, [sortedData, currentPage, pageSize]);
+    if (isServer) return data;
+    const start = (activePage - 1) * activePageSize;
+    return sortedData.slice(start, start + activePageSize);
+  }, [isServer, data, sortedData, activePage, activePageSize]);
   const handleExport = () => {
     const exportableCols = resolvedColumns.filter((c) => !c.hidden && c.isExportable !== false);
     const headers = exportableCols.map((c) => c.headerName).join(",");
@@ -4798,7 +4836,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Columns, { size: 16 })
-  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4912,17 +4950,14 @@ function DataGrid({
       },
       action.icon
     )))));
-  })()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
     "select",
     {
-      value: pageSize,
-      onChange: (e) => {
-        setPageSize(Number(e.target.value));
-        setCurrentPage(1);
-      }
+      value: activePageSize,
+      onChange: (e) => handlePageSizeChange(Number(e.target.value))
     },
     pageSizeOptions.map((o) => /* @__PURE__ */ import_react23.default.createElement("option", { key: o, value: o }, o))
-  )), /* @__PURE__ */ import_react23.default.createElement("span", null, (currentPage - 1) * pageSize + 1, "\u2013", Math.min(currentPage * pageSize, filteredData.length), " of ", filteredData.length)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: currentPage === 1, onClick: () => setCurrentPage((p) => p - 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronLeft, { size: 15 })), /* @__PURE__ */ import_react23.default.createElement("span", { className: "dg-page-fraction" }, currentPage, " / ", totalPages), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: currentPage === totalPages, onClick: () => setCurrentPage((p) => p + 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ import_react23.default.createElement(
+  )), /* @__PURE__ */ import_react23.default.createElement("span", null, (activePage - 1) * activePageSize + 1, "\u2013", Math.min(activePage * activePageSize, totalRows), " of ", totalRows)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: activePage === 1, onClick: () => handlePageChange(activePage - 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronLeft, { size: 15 })), /* @__PURE__ */ import_react23.default.createElement("span", { className: "dg-page-fraction" }, activePage, " / ", totalPages), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-page-btn", disabled: activePage === totalPages, onClick: () => handlePageChange(activePage + 1) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ import_react23.default.createElement(
     "div",
     {
       ref: menuRef,

package/dist/main.css

@@ -443,6 +443,7 @@
   overflow-x: auto;
   overflow-y: auto;
   flex: 1;
+  position: relative;
 }
 .dg-table-wrap--empty {
   display: flex;
@@ -936,6 +937,30 @@
   --tf-hover-border-color: var(--text-secondary);
   --tf-primary-color: var(--primary-color);
 }
+.dg-loading-overlay {
+  position: absolute;
+  inset: 0;
+  top: 41px;
+  background: rgba(255, 255, 255, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+  pointer-events: all;
+}
+.dg-loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: var(--primary-color, #f15b24);
+  border-radius: 50%;
+  animation: dg-spin 0.7s linear infinite;
+}
+@keyframes dg-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .dg-empty-state {
   flex: 1;
   display: flex;
@@ -6321,11 +6346,11 @@ pre {
   z-index: 2;
 }
 .rf-text-field__adornment--start {
-  margin-left: 14px;
+  margin-left: 0px;
   margin-right: -6px;
 }
 .rf-text-field__adornment--end {
-  margin-right: 14px;
+  margin-right: 0px;
   margin-left: -6px;
 }
 .rf-text-field--standard .rf-text-field__adornment--start {

package/dist/main.d.cts

@@ -863,10 +863,37 @@ interface DataGridToolbarSlot {
     content: React__default.ReactNode;
     align?: 'left' | 'center' | 'right';
 }
+interface PaginationModel {
+    /** 0-indexed current page */
+    page: number;
+    pageSize: number;
+}
 interface DataGridProps<T> {
     columns: Column<T>[];
     data: T[];
     actions?: Action<T>[] | ((item: T) => Action<T>[]);
+    /** Show a loading overlay over the table body */
+    loading?: boolean;
+    /** Show the pagination bar. Defaults to true. */
+    pagination?: boolean;
+    /**
+     * 'client' (default) — DataGrid filters, sorts, and paginates data internally.
+     * 'server' — data is already the current page; DataGrid skips client-side
+     *            filtering/sorting/slicing and delegates everything to the server.
+     */
+    paginationMode?: 'client' | 'server';
+    /**
+     * Total number of rows across all pages (server mode).
+     * Used to compute total page count when paginationMode="server".
+     */
+    rowCount?: number;
+    /**
+     * Controlled pagination state. page is 0-indexed.
+     * When provided, the DataGrid uses these values instead of internal state.
+     */
+    paginationModel?: PaginationModel;
+    /** Called whenever the page or pageSize changes. page is 0-indexed. */
+    onPaginationModelChange?: (model: PaginationModel) => void;
     pageSize?: number;
     pageSizeOptions?: number[];
     title?: string;
@@ -886,7 +913,7 @@ interface DataGridProps<T> {
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;

package/dist/main.d.ts

@@ -863,10 +863,37 @@ interface DataGridToolbarSlot {
     content: React__default.ReactNode;
     align?: 'left' | 'center' | 'right';
 }
+interface PaginationModel {
+    /** 0-indexed current page */
+    page: number;
+    pageSize: number;
+}
 interface DataGridProps<T> {
     columns: Column<T>[];
     data: T[];
     actions?: Action<T>[] | ((item: T) => Action<T>[]);
+    /** Show a loading overlay over the table body */
+    loading?: boolean;
+    /** Show the pagination bar. Defaults to true. */
+    pagination?: boolean;
+    /**
+     * 'client' (default) — DataGrid filters, sorts, and paginates data internally.
+     * 'server' — data is already the current page; DataGrid skips client-side
+     *            filtering/sorting/slicing and delegates everything to the server.
+     */
+    paginationMode?: 'client' | 'server';
+    /**
+     * Total number of rows across all pages (server mode).
+     * Used to compute total page count when paginationMode="server".
+     */
+    rowCount?: number;
+    /**
+     * Controlled pagination state. page is 0-indexed.
+     * When provided, the DataGrid uses these values instead of internal state.
+     */
+    paginationModel?: PaginationModel;
+    /** Called whenever the page or pageSize changes. page is 0-indexed. */
+    onPaginationModelChange?: (model: PaginationModel) => void;
     pageSize?: number;
     pageSizeOptions?: number[];
     title?: string;
@@ -886,7 +913,7 @@ interface DataGridProps<T> {
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;

package/dist/main.js

@@ -3467,15 +3467,27 @@ var DateField = ({
           const spaceBelow = window.innerHeight - rect.bottom - GAP2;
           const spaceAbove = rect.top - GAP2;
           const useDropUp = spaceBelow < PICKER_H && spaceAbove > spaceBelow;
-          const top = useDropUp ? Math.max(4, rect.top - PICKER_H - GAP2) : rect.bottom + GAP2;
+          if (useDropUp) {
+            return {
+              position: "fixed",
+              left: rect.left,
+              // bottom anchors picker's bottom edge exactly to field top — no gap regardless of actual height
+              bottom: window.innerHeight - rect.top + GAP2,
+              // prevent going above viewport
+              maxHeight: rect.top - GAP2 - 4,
+              overflowY: "auto",
+              zIndex: 99999,
+              animationName: "rf-date-picker-appear-up",
+              transformOrigin: "bottom left"
+            };
+          }
           return {
             position: "fixed",
             left: rect.left,
-            top,
+            top: rect.bottom + GAP2,
             zIndex: 99999,
-            // Drive animation from same decision — no separate state/re-render needed
-            animationName: useDropUp ? "rf-date-picker-appear-up" : "rf-date-picker-appear",
-            transformOrigin: useDropUp ? "bottom left" : "top left"
+            animationName: "rf-date-picker-appear",
+            transformOrigin: "top left"
           };
         })(),
         onMouseDown: (e) => e.preventDefault()
@@ -4299,6 +4311,12 @@ function DataGrid({
   columns: initialColumnsProp,
   data,
   actions,
+  loading = false,
+  pagination = true,
+  paginationMode = "client",
+  rowCount,
+  paginationModel,
+  onPaginationModelChange,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   title,
@@ -4339,6 +4357,23 @@ function DataGrid({
   const [sortDirection, setSortDirection] = useState9(null);
   const [filterText, setFilterText] = useState9("");
   const [currentPage, setCurrentPage] = useState9(1);
+  const activePage = paginationModel ? paginationModel.page + 1 : currentPage;
+  const activePageSize = paginationModel ? paginationModel.pageSize : pageSize;
+  const handlePageChange = (newPage) => {
+    if (onPaginationModelChange) {
+      onPaginationModelChange({ page: newPage - 1, pageSize: activePageSize });
+    } else {
+      setCurrentPage(newPage);
+    }
+  };
+  const handlePageSizeChange = (newSize) => {
+    if (onPaginationModelChange) {
+      onPaginationModelChange({ page: 0, pageSize: newSize });
+    } else {
+      setPageSize(newSize);
+      setCurrentPage(1);
+    }
+  };
   const [resizingColumn, setResizingColumn] = useState9(null);
   const [startX, setStartX] = useState9(0);
   const [startWidth, setStartWidth] = useState9(0);
@@ -4571,11 +4606,14 @@ function DataGrid({
       return 0;
     });
   }, [filteredData, sortField, sortDirection, resolvedColumns]);
-  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const isServer = paginationMode === "server";
+  const totalRows = isServer ? rowCount ?? data.length : filteredData.length;
+  const totalPages = Math.max(1, Math.ceil(totalRows / activePageSize));
   const paginatedData = useMemo2(() => {
-    const start = (currentPage - 1) * pageSize;
-    return sortedData.slice(start, start + pageSize);
-  }, [sortedData, currentPage, pageSize]);
+    if (isServer) return data;
+    const start = (activePage - 1) * activePageSize;
+    return sortedData.slice(start, start + activePageSize);
+  }, [isServer, data, sortedData, activePage, activePageSize]);
   const handleExport = () => {
     const exportableCols = resolvedColumns.filter((c) => !c.hidden && c.isExportable !== false);
     const headers = exportableCols.map((c) => c.headerName).join(",");
@@ -4670,7 +4708,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ React75.createElement(Columns, { size: 16 })
-  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 ? " dg-table-wrap--empty" : ""}` }, /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4784,17 +4822,14 @@ function DataGrid({
       },
       action.icon
     )))));
-  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
     "select",
     {
-      value: pageSize,
-      onChange: (e) => {
-        setPageSize(Number(e.target.value));
-        setCurrentPage(1);
-      }
+      value: activePageSize,
+      onChange: (e) => handlePageSizeChange(Number(e.target.value))
     },
     pageSizeOptions.map((o) => /* @__PURE__ */ React75.createElement("option", { key: o, value: o }, o))
-  )), /* @__PURE__ */ React75.createElement("span", null, (currentPage - 1) * pageSize + 1, "\u2013", Math.min(currentPage * pageSize, filteredData.length), " of ", filteredData.length)), /* @__PURE__ */ React75.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: currentPage === 1, onClick: () => setCurrentPage((p) => p - 1) }, /* @__PURE__ */ React75.createElement(ChevronLeft, { size: 15 })), /* @__PURE__ */ React75.createElement("span", { className: "dg-page-fraction" }, currentPage, " / ", totalPages), /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: currentPage === totalPages, onClick: () => setCurrentPage((p) => p + 1) }, /* @__PURE__ */ React75.createElement(ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ React75.createElement(
+  )), /* @__PURE__ */ React75.createElement("span", null, (activePage - 1) * activePageSize + 1, "\u2013", Math.min(activePage * activePageSize, totalRows), " of ", totalRows)), /* @__PURE__ */ React75.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: activePage === 1, onClick: () => handlePageChange(activePage - 1) }, /* @__PURE__ */ React75.createElement(ChevronLeft, { size: 15 })), /* @__PURE__ */ React75.createElement("span", { className: "dg-page-fraction" }, activePage, " / ", totalPages), /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: activePage === totalPages, onClick: () => handlePageChange(activePage + 1) }, /* @__PURE__ */ React75.createElement(ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ React75.createElement(
     "div",
     {
       ref: menuRef,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.105",
+  "version": "0.3.0",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",
@@ -93,4 +93,4 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }
-}
+}