LoadedRowsStatus: show hard cap

src/components/Table/TableHeader/LoadedRowsStatus.tsx

@@ -1,6 +1,7 @@
 import { Tooltip, Typography } from "@mui/material";
 
 import { useProjectContext } from "contexts/ProjectContext";
+import { CAP } from "hooks/useTable/useTableData";
 
 export default function LoadedRowsStatus() {
   const { tableState } = useProjectContext();
@@ -10,12 +11,27 @@ export default function LoadedRowsStatus() {
   const allLoaded =
     !tableState.loadingRows && tableState.rows.length < tableState.queryLimit;
 
+  if (tableState.rows.length >= CAP)
+    return (
+      <Tooltip title={`Number of rows loaded is capped to ${CAP}`}>
+        <Typography
+          variant="body2"
+          color="text.disabled"
+          display="block"
+          style={{ userSelect: "none" }}
+        >
+          Loaded {tableState.rows.length} row
+          {tableState.rows.length !== 1 && "s"} (capped)
+        </Typography>
+      </Tooltip>
+    );
+
   return (
     <Tooltip
       title={
         allLoaded
           ? "All rows have been loaded in this table"
-          : "Scroll to the bottom to load more rows"
+          : `Scroll to the bottom to load more rows`
       }
     >
       <Typography

src/hooks/useTable/useTableData.tsx

@@ -18,7 +18,8 @@ import _findIndex from "lodash/findIndex";
 import _orderBy from "lodash/orderBy";
 import { useAppContext } from "contexts/AppContext";
 
-const CAP = 1000; // safety  paramter sets the  upper limit of number of docs fetched by this hook
+// Safety parameter sets the upper limit of number of docs fetched by this hook
+export const CAP = 1000;
 
 const tableReducer = (prevState: any, newProps: any) => {
   return { ...prevState, ...newProps };