@visns-studio/visns-components 6.34.3 → 6.35.0

package/README.md

@@ -9,6 +9,28 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v6.35.0)
+
+### `fixedLimit` pins a grid's page size
+
+`Table` (the `DataGrid`) has always worked out its rows per page for itself.
+The profile's `rows_per_page` seeds it, a fixed-height grid falls back to
+`tableSetting.pageSize` or `ajaxSetting.take`, and a grid sized to the window
+replaces all of that with however many rows fit the screen — and re-works it on
+every resize. That is right for an index page and wrong for a page whose page
+size is part of what it means: the same page shows a different number of rows
+on every monitor, and a staff member's stored preference quietly changes it
+again.
+
+Pass `fixedLimit={100}` and the grid always requests and shows 100 rows. The
+pin is checked first everywhere the limit is decided, so it beats the profile
+preference, `pageSize`, `take` and the window-fit arithmetic, and a resize no
+longer moves it. The pager's "Results per page" control is pinned too: it is
+given `pageSizes={[fixedLimit]}`, so it still shows the value but has nothing
+else to offer, and any change that reaches the grid anyway is ignored. The
+grid's drawn height is still fitted to the window as before — only the request
+is pinned. Without the prop (or with `0`) nothing changes.
+
 ## Recent Updates (v6.34.3)
 
 ### The auth fields' values no longer sit on top of their labels
@@ -3373,6 +3395,7 @@ The frontend intelligent sorting works seamlessly with the backend `HasRelations
 | defaultExpandedNodes  | Initial expanded nodes for TreeGrid        | Object   | -       |
 | defaultGroupBy        | Initial grouping configuration             | Array    | -       |
 | expandedNodes         | Current expanded nodes for TreeGrid        | Object   | -       |
+| fixedLimit            | Pins rows per page; beats profile preference, take and window-fit | Number   | -       |
 | form                  | Form configuration for editing             | Object   | -       |
 | gridHeight            | Height of the grid                         | Number   | 500     |
 | groupBy               | Current grouping configuration             | Array    | -       |

package/package.json

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.34.3",
+    "version": "6.35.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -379,6 +379,14 @@ const DataGrid = forwardRef(
             // grid. An empty object gives every one of those reads undefined,
             // which is what they already treat as "not set".
             form = {},
+            // A page-level pin on rows per page. When it is a positive number
+            // the grid always asks for and shows exactly that many rows: it
+            // wins over the profile's rows_per_page, `tableSetting.pageSize`,
+            // `ajaxSetting.take` and the window-fit arithmetic, and the pager's
+            // "Results per page" control is pinned to it. It exists for pages
+            // whose page size must not drift with the screen height or with a
+            // stored preference. Unset (or 0) changes nothing.
+            fixedLimit,
             gridHeight,
             hoverColor,
             legend,
@@ -993,6 +1001,7 @@ const DataGrid = forwardRef(
                 tableSetting_pageSize: tableSetting?.pageSize,
                 userProfile: userProfile,
             });
+            if (fixedLimit > 0) return fixedLimit;
             if (userProfile?.rows_per_page) return userProfile.rows_per_page;
             if (userProfile?.settings?.rows_per_page) return userProfile.settings.rows_per_page;
             if (tableSetting?.pageSize) return tableSetting.pageSize;
@@ -1016,10 +1025,17 @@ const DataGrid = forwardRef(
         const limitRef = useRef(limit);
         limitRef.current = limit;
 
-        const handleLimitChange = useCallback((next) => {
-            userChoseLimitRef.current = true;
-            setLimit(next);
-        }, []);
+        const handleLimitChange = useCallback(
+            (next) => {
+                // A pinned page size is not the user's to change. The pager
+                // only offers the pinned value, but ignore anything else that
+                // arrives here too — and don't mark it as a user choice.
+                if (fixedLimit > 0) return;
+                userChoseLimitRef.current = true;
+                setLimit(next);
+            },
+            [fixedLimit]
+        );
         const [search, setSearch] = useState('');
 
         // This component instance survives client-side route changes — React Router
@@ -1058,7 +1074,9 @@ const DataGrid = forwardRef(
             // becomes available — and never over a size the user has picked
             // from the pager since. This seeds the limit for the first fetch;
             // the sizing effect below replaces it as soon as the grid has
-            // measured itself against the window.
+            // measured itself against the window. A `fixedLimit` page never
+            // takes the profile value at all.
+            if (fixedLimit > 0) return;
             if (!initialLimitApplied.current && !userChoseLimitRef.current) {
                 const userLimit = userProfile?.rows_per_page || userProfile?.settings?.rows_per_page;
                 debugLog('[DataGrid] Checking userLimit:', userLimit);
@@ -1068,7 +1086,11 @@ const DataGrid = forwardRef(
                     initialLimitApplied.current = true;
                 }
             }
-        }, [userProfile?.rows_per_page, userProfile?.settings?.rows_per_page]);
+        }, [
+            fixedLimit,
+            userProfile?.rows_per_page,
+            userProfile?.settings?.rows_per_page,
+        ]);
 
         /** Auto Refresh States */
         const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(false);
@@ -6367,7 +6389,15 @@ const DataGrid = forwardRef(
                 userProfile?.rows_per_page ||
                 userProfile?.settings?.rows_per_page;
 
-            if (userChoseLimitRef.current) {
+            // A page that passes `fixedLimit` has pinned its page size, and
+            // the pin wins over everything below — the profile preference, a
+            // configured `take` and the window-fit arithmetic — so the number
+            // of rows never drifts with screen height or a resize. The grid's
+            // drawn height above is still fitted to the window as usual; only
+            // the request is pinned.
+            if (fixedLimit > 0) {
+                if (limitRef.current !== fixedLimit) setLimit(fixedLimit);
+            } else if (userChoseLimitRef.current) {
                 debugLog(
                     '[DataGrid] Honouring the size the user picked this session:',
                     limitRef.current
@@ -6411,6 +6441,7 @@ const DataGrid = forwardRef(
             ajaxSetting?.take,
             userProfile?.rows_per_page,
             userProfile?.settings?.rows_per_page,
+            fixedLimit,
         ]);
 
         useEffect(() => {
@@ -7120,6 +7151,12 @@ const DataGrid = forwardRef(
                                 handleFilterChange(fv, filterValue);
                             }}
                             onLimitChange={handleLimitChange}
+                            // Offer only the pinned size in "Results per
+                            // page", so the selector shows the value but has
+                            // nothing else to pick.
+                            {...(fixedLimit > 0
+                                ? { pageSizes: [fixedLimit] }
+                                : {})}
                             onSelectionChange={handleSelectionChange}
                             onSortInfoChange={handleSort}
                             onRenderRow={onRenderRow}