@xyo-network/react-payload-table 2.37.23 → 2.37.25

package/dist/esm/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import { XyoPayload } from '@xyo-network/payload';
 import { TableExProps } from '@xyo-network/react-table';
-import * as React from 'react';
 import { PayloadTableColumnConfig } from './PayloadTableColumnConfig';
 export interface PayloadTableProps extends TableExProps {
     exploreDomain?: string;
@@ -8,8 +8,14 @@ export interface PayloadTableProps extends TableExProps {
     onRowClick?: (value: XyoPayload) => void;
     rowsPerPage?: number;
     payloads?: XyoPayload[] | null;
+    loading?: boolean;
     columns?: PayloadTableColumnConfig;
+    /** External trigger to fetch more payloads */
+    fetchMorePayloads?: () => void;
+    /** set number of schema parts to display starting from the end */
     maxSchemaDepth?: number;
+    /** Total number of payloads passed */
+    count?: number;
 }
 export declare const PayloadTable: React.FC<PayloadTableProps>;
 //# sourceMappingURL=Table.d.ts.map

package/dist/esm/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjE,OAAO,EAAW,YAAY,EAAiB,MAAM,0BAA0B,CAAA;AAC/E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAsB,wBAAwB,EAAoC,MAAM,4BAA4B,CAAA;AAE3H,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AA+CD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsGpD,CAAA"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkB,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjE,OAAO,EAAW,YAAY,EAAiB,MAAM,0BAA0B,CAAA;AAG/E,OAAO,EAAsB,wBAAwB,EAAoC,MAAM,4BAA4B,CAAA;AAI3H,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkIpD,CAAA"}

package/dist/esm/components/Table/Table.js

@@ -1,48 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FirstPageIcon from '@mui/icons-material/FirstPage';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import LastPageIcon from '@mui/icons-material/LastPage';
-import { Alert, TableBody, TableCell, TableHead, TablePagination, TableRow, Typography } from '@mui/material';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
+import { Alert, styled, TableBody, TableCell, TableHead, TablePagination, TableRow, Typography } from '@mui/material';
 import { useBreakpoint } from '@xylabs/react-shared';
 import { PayloadWrapper } from '@xyo-network/payload';
 import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service';
 import { TableEx, TableFooterEx } from '@xyo-network/react-table';
 import { useEffect, useState } from 'react';
 import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig';
+import { TablePaginationActions } from './TablePagination';
 import { PayloadTableRow } from './TableRow';
-function TablePaginationActions(props) {
-    const theme = useTheme();
-    const { count, page, rowsPerPage, onPageChange } = props;
-    const handleFirstPageButtonClick = (event) => {
-        onPageChange(event, 0);
-    };
-    const handleBackButtonClick = (event) => {
-        onPageChange(event, page - 1);
-    };
-    const handleNextButtonClick = (event) => {
-        onPageChange(event, page + 1);
-    };
-    const handleLastPageButtonClick = (event) => {
-        onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-    };
-    return (_jsxs(Box, { sx: { flexShrink: 0, ml: 2.5 }, children: [_jsx(IconButton, { onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === 'rtl' ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) }), _jsx(IconButton, { onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowRight, {}) : _jsx(KeyboardArrowLeft, {}) }), _jsx(IconButton, { onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowLeft, {}) : _jsx(KeyboardArrowRight, {}) }), _jsx(IconButton, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === 'rtl' ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) })] }));
-}
-export const PayloadTable = ({ exploreDomain, archive, onRowClick, rowsPerPage: rowsPerPageProp = 25, payloads, children, columns = payloadTableColumnConfigDefaults(), maxSchemaDepth, variant = 'scrollable', ...props }) => {
-    const theme = useTheme();
+export const PayloadTable = ({ exploreDomain, archive, onRowClick, fetchMorePayloads, rowsPerPage: rowsPerPageProp = 25, payloads, children, columns = payloadTableColumnConfigDefaults(), maxSchemaDepth, count = 0, loading = false, variant = 'scrollable', ...props }) => {
     const breakPoint = useBreakpoint();
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp);
-    const payloadCount = payloads ? payloads.length : 0;
+    const [visiblePayloads, setVisiblePayloads] = useState([]);
     // Avoid a layout jump when reaching the last page with empty rows.
-    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0;
+    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0;
     useEffect(() => {
         setRowsPerPage(rowsPerPageProp);
     }, [rowsPerPageProp]);
+    // React to various prop changes to derive new visible payloads
+    // count is needed to show initial payloads added async to the same payloads reference
+    useEffect(() => {
+        if (payloads) {
+            setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage));
+        }
+    }, [count, page, payloads, rowsPerPage]);
+    // If the payload reference changes, assume we have a new list and reset current page
+    useEffect(() => {
+        setPage(0);
+    }, [payloads]);
+    const handleAdditionalPayloads = () => {
+        if (fetchMorePayloads && payloads) {
+            const buffer = rowsPerPage * 2;
+            const lastVisiblePayload = visiblePayloads?.at(-1);
+            if (lastVisiblePayload) {
+                const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload);
+                if (lastVisibleIndex !== undefined && payloads.length - (lastVisibleIndex + 1) <= buffer) {
+                    fetchMorePayloads();
+                }
+            }
+        }
+    };
     const handleChangePage = (event, newPage) => {
+        handleAdditionalPayloads();
         setPage(newPage);
     };
     const handleChangeRowsPerPage = (event) => {
@@ -51,19 +51,25 @@ export const PayloadTable = ({ exploreDomain, archive, onRowClick, rowsPerPage:
     };
     return breakPoint ? (_jsxs(TableEx, { variant: variant, ...props, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
                         return (_jsx(TableCell, { width: index === 0 ? '100%' : undefined, align: index === 0 ? 'left' : 'center', children: _jsx(Typography, { variant: "body2", noWrap: true, children: payloadColumnNames[column] }) }, index));
-                    }) }) }), _jsxs(TableBody, { children: [payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
-                        // {payloads?.map((payload, index) => {
+                    }) }) }), _jsxs(TableBody, { children: [visiblePayloads?.map((payload, index) => {
                         const wrapper = new PayloadWrapper(payload);
                         return (_jsx(XyoApiThrownErrorBoundary, { errorComponent: (e) => (_jsxs(Alert, { severity: "error", children: ["Error Loading Payload: ", _jsx(Typography, { fontWeight: "bold", children: e.message })] })), children: _jsx(PayloadTableRow, { maxSchemaDepth: maxSchemaDepth, archive: archive, onClick: onRowClick
                                     ? () => {
                                         onRowClick(payload);
                                     }
                                     : undefined, exploreDomain: exploreDomain, payload: payload }) }, `${wrapper.hash}-${index}`));
-                    }), children, emptyRows > 0 && Array(emptyRows).fill(_jsx(PayloadTableRow, {}))] }), _jsx(TableFooterEx, { variant: variant, children: _jsx(TableRow, { children: _jsx(TablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }], count: payloadCount, rowsPerPage: rowsPerPage, page: page, style: { borderTop: '1px solid', borderTopColor: theme.palette.divider }, SelectProps: {
+                    }), children, emptyRows > 0 && Array(emptyRows).fill(_jsx(PayloadTableRow, {}))] }), _jsx(TableFooterEx, { variant: variant, children: _jsx(TableRow, { children: _jsx(StyledTablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }], count: count ?? 0, rowsPerPage: rowsPerPage, page: page, SelectProps: {
                             inputProps: {
                                 'aria-label': 'rows per page',
                             },
                             native: true,
-                        }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: TablePaginationActions }) }) })] })) : null;
+                        }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: (props) => _jsx(TablePaginationActions, { enableNextPage: !!fetchMorePayloads, loading: loading, ...props }) }) }) })] })) : null;
 };
+const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
+    '& > .MuiToolbar-root': {
+        paddingLeft: theme.spacing(1),
+    },
+    borderTop: '1px solid',
+    borderTopColor: theme.palette.divider,
+}));
 //# sourceMappingURL=Table.js.map

package/dist/esm/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Table/TablePagination.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface TablePaginationActionsProps {
+    count: number;
+    enableNextPage?: boolean;
+    page: number;
+    rowsPerPage: number;
+    loading?: boolean;
+    onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}
+export declare function TablePaginationActions({ count, page, rowsPerPage, onPageChange, enableNextPage, loading }: TablePaginationActionsProps): JSX.Element;
+export {};
+//# sourceMappingURL=TablePagination.d.ts.map

package/dist/esm/components/Table/TablePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TablePagination.tsx"],"names":[],"mappings":";AAMA,UAAU,2BAA2B;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACpF;AAED,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,2BAA2B,eAsCtI"}

package/dist/esm/components/Table/TablePagination.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import { Box, CircularProgress, IconButton, useTheme } from '@mui/material';
+export function TablePaginationActions({ count, page, rowsPerPage, onPageChange, enableNextPage, loading }) {
+    const theme = useTheme();
+    const handleFirstPageButtonClick = (event) => {
+        onPageChange(event, 0);
+    };
+    const handleBackButtonClick = (event) => {
+        onPageChange(event, page - 1);
+    };
+    const handleNextButtonClick = (event) => {
+        onPageChange(event, page + 1);
+    };
+    const handleLastPageButtonClick = (event) => {
+        onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    };
+    return (_jsxs(_Fragment, { children: [loading ? _jsx(CircularProgress, { size: 'small', sx: { height: theme.spacing(2), position: 'absolute', width: theme.spacing(2) } }) : null, _jsxs(Box, { sx: { flexShrink: 0, ml: 2.5 }, children: [_jsx(IconButton, { onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === 'rtl' ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) }), _jsx(IconButton, { onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowRight, {}) : _jsx(KeyboardArrowLeft, {}) }), _jsx(IconButton, { onClick: handleNextButtonClick, disabled: !enableNextPage && page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowLeft, {}) : _jsx(KeyboardArrowRight, {}) }), _jsx(IconButton, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === 'rtl' ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) })] })] }));
+}
+//# sourceMappingURL=TablePagination.js.map

package/dist/esm/components/Table/TablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.js","sourceRoot":"","sources":["../../../../src/components/Table/TablePagination.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,iBAAiB,MAAM,uCAAuC,CAAA;AACrE,OAAO,kBAAkB,MAAM,wCAAwC,CAAA;AACvE,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAW3E,MAAM,UAAU,sBAAsB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAA+B;IACrI,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,0BAA0B,GAAG,CAAC,KAA0C,EAAE,EAAE;QAChF,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC3E,YAAY,CAAC,KAAK,EAAE,IAAI,GAAG,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC3E,YAAY,CAAC,KAAK,EAAE,IAAI,GAAG,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,yBAAyB,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC/E,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IACtE,CAAC,CAAA;IAED,OAAO,CACL,8BACG,OAAO,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAI,CAAC,CAAC,CAAC,IAAI,EACtI,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,aACjC,KAAC,UAAU,IAAC,OAAO,EAAE,0BAA0B,EAAE,QAAQ,EAAE,IAAI,KAAK,CAAC,gBAAa,YAAY,YAC3F,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GACtD,EACb,KAAC,UAAU,IAAC,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,IAAI,KAAK,CAAC,gBAAa,eAAe,YACzF,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,KAAG,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,GAChE,EACb,KAAC,UAAU,IAAC,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,CAAC,cAAc,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAa,WAAW,YACxI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC,CAAC,KAAC,kBAAkB,KAAG,GAChE,EACb,KAAC,UAAU,IAAC,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAa,WAAW,YACzH,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,YAAY,KAAG,GACtD,IACT,IACL,CACJ,CAAA;AACH,CAAC"}

package/package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@xylabs/react-shared": "^2.15.1",
-    "@xyo-network/react-auth-service": "^2.37.23",
-    "@xyo-network/react-network": "^2.37.23",
-    "@xyo-network/react-payload-plugin": "^2.37.23",
-    "@xyo-network/react-shared": "^2.37.23",
-    "@xyo-network/react-table": "^2.36.23",
+    "@xyo-network/react-auth-service": "^2.37.25",
+    "@xyo-network/react-network": "^2.37.25",
+    "@xyo-network/react-payload-plugin": "^2.37.25",
+    "@xyo-network/react-shared": "^2.37.25",
+    "@xyo-network/react-table": "^2.36.25",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -77,5 +77,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.37.23"
+  "version": "2.37.25"
 }

package/src/components/Table/FetchMoreTable.stories.tsx

@@ -0,0 +1,94 @@
+import { Button, Typography } from '@mui/material'
+import { useEffect } from '@storybook/addons'
+import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
+import { delay } from '@xylabs/sdk-js'
+import { XyoPayload } from '@xyo-network/payload'
+import { useState } from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { PayloadTable } from './Table'
+
+const newPayloads = () =>
+  Array(50)
+    .fill(undefined)
+    .map((_, index) => ({ index, random: Math.random(), schema: 'network.xyo.stories.test' }))
+
+// simulating the end of the list
+const maxPayloads = 200
+
+const NewPayloadsDecorator: DecoratorFn = (Story, args) => {
+  const testPayloads = newPayloads()
+  const [payloads, setPayloads] = useState<XyoPayload[]>([])
+  const [count, setCount] = useState(0)
+
+  const addToTotalPayloads = (payloads: XyoPayload[]) =>
+    setPayloads((previous) => {
+      previous.push(...payloads)
+      setCount(previous.length)
+      return previous
+    })
+
+  useEffect(() => {
+    // simulate initial async payloads
+    setTimeout(() => {
+      addToTotalPayloads(testPayloads)
+    }, 500)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const addPayloads = () => {
+    addToTotalPayloads(newPayloads())
+    return true
+  }
+
+  const newPayloadList = async () => {
+    // Simulating delay fetching new payloads
+    await delay(800)
+    const newPayloadList = newPayloads()
+    setCount(newPayloadList.length)
+    setPayloads(newPayloadList)
+  }
+
+  args.args = {
+    ...args.args,
+    count,
+    fetchMorePayloads: payloads.length < maxPayloads ? addPayloads : null,
+    payloads,
+  }
+
+  return (
+    <>
+      <Typography>Max Payloads: {maxPayloads}</Typography>
+      <Button variant="contained" onClick={newPayloadList}>
+        Simulate Network Change
+      </Button>
+      <Story {...args} />
+    </>
+  )
+}
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadTable,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/FetchMoreTable',
+} as ComponentMeta<typeof PayloadTable>
+
+const Template: ComponentStory<typeof PayloadTable> = (args) => (
+  <BrowserRouter>
+    <PayloadTable {...args}></PayloadTable>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [NewPayloadsDecorator]
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Table/Table.tsx

@@ -1,100 +1,85 @@
-import FirstPageIcon from '@mui/icons-material/FirstPage'
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
-import LastPageIcon from '@mui/icons-material/LastPage'
-import { Alert, TableBody, TableCell, TableHead, TablePagination, TableRow, Typography } from '@mui/material'
-import Box from '@mui/material/Box'
-import IconButton from '@mui/material/IconButton'
-import { useTheme } from '@mui/material/styles'
+import { Alert, styled, TableBody, TableCell, TableHead, TablePagination, TableRow, Typography } from '@mui/material'
 import { useBreakpoint } from '@xylabs/react-shared'
 import { PayloadWrapper, XyoPayload } from '@xyo-network/payload'
 import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
 import { TableEx, TableExProps, TableFooterEx } from '@xyo-network/react-table'
-import * as React from 'react'
 import { useEffect, useState } from 'react'
 
 import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
+import { TablePaginationActions } from './TablePagination'
 import { PayloadTableRow } from './TableRow'
+
 export interface PayloadTableProps extends TableExProps {
   exploreDomain?: string
   archive?: string
   onRowClick?: (value: XyoPayload) => void
   rowsPerPage?: number
   payloads?: XyoPayload[] | null
+  loading?: boolean
   columns?: PayloadTableColumnConfig
+  /** External trigger to fetch more payloads */
+  fetchMorePayloads?: () => void
+  /** set number of schema parts to display starting from the end */
   maxSchemaDepth?: number
-}
-
-interface TablePaginationActionsProps {
-  count: number
-  page: number
-  rowsPerPage: number
-  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void
-}
-
-function TablePaginationActions(props: TablePaginationActionsProps) {
-  const theme = useTheme()
-  const { count, page, rowsPerPage, onPageChange } = props
-
-  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, 0)
-  }
-
-  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, page - 1)
-  }
-
-  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, page + 1)
-  }
-
-  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
-  }
-
-  return (
-    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
-      <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
-        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
-      </IconButton>
-      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
-        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
-      </IconButton>
-      <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
-        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
-      </IconButton>
-      <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
-        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
-      </IconButton>
-    </Box>
-  )
+  /** Total number of payloads passed */
+  count?: number
 }
 
 export const PayloadTable: React.FC<PayloadTableProps> = ({
   exploreDomain,
   archive,
   onRowClick,
+  fetchMorePayloads,
   rowsPerPage: rowsPerPageProp = 25,
   payloads,
   children,
   columns = payloadTableColumnConfigDefaults(),
   maxSchemaDepth,
+  count = 0,
+  loading = false,
   variant = 'scrollable',
   ...props
 }) => {
-  const theme = useTheme()
   const breakPoint = useBreakpoint()
   const [page, setPage] = useState(0)
   const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
-  const payloadCount = payloads ? payloads.length : 0
+  const [visiblePayloads, setVisiblePayloads] = useState<XyoPayload[]>([])
+
   // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0
+  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0
 
   useEffect(() => {
     setRowsPerPage(rowsPerPageProp)
   }, [rowsPerPageProp])
 
+  // React to various prop changes to derive new visible payloads
+  // count is needed to show initial payloads added async to the same payloads reference
+  useEffect(() => {
+    if (payloads) {
+      setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage))
+    }
+  }, [count, page, payloads, rowsPerPage])
+
+  // If the payload reference changes, assume we have a new list and reset current page
+  useEffect(() => {
+    setPage(0)
+  }, [payloads])
+
+  const handleAdditionalPayloads = () => {
+    if (fetchMorePayloads && payloads) {
+      const buffer = rowsPerPage * 2
+      const lastVisiblePayload = visiblePayloads?.at(-1)
+      if (lastVisiblePayload) {
+        const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload)
+        if (lastVisibleIndex !== undefined && payloads.length - (lastVisibleIndex + 1) <= buffer) {
+          fetchMorePayloads()
+        }
+      }
+    }
+  }
+
   const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+    handleAdditionalPayloads()
     setPage(newPage)
   }
 
@@ -119,8 +104,7 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
         </TableRow>
       </TableHead>
       <TableBody>
-        {payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
-          // {payloads?.map((payload, index) => {
+        {visiblePayloads?.map((payload, index) => {
           const wrapper = new PayloadWrapper(payload)
           return (
             <XyoApiThrownErrorBoundary
@@ -152,12 +136,11 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
       </TableBody>
       <TableFooterEx variant={variant}>
         <TableRow>
-          <TablePagination
+          <StyledTablePagination
             rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-            count={payloadCount}
+            count={count ?? 0}
             rowsPerPage={rowsPerPage}
             page={page}
-            style={{ borderTop: '1px solid', borderTopColor: theme.palette.divider }}
             SelectProps={{
               inputProps: {
                 'aria-label': 'rows per page',
@@ -166,10 +149,18 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
             }}
             onPageChange={handleChangePage}
             onRowsPerPageChange={handleChangeRowsPerPage}
-            ActionsComponent={TablePaginationActions}
+            ActionsComponent={(props) => <TablePaginationActions enableNextPage={!!fetchMorePayloads} loading={loading} {...props} />}
           />
         </TableRow>
       </TableFooterEx>
     </TableEx>
   ) : null
 }
+
+const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
+  '& > .MuiToolbar-root': {
+    paddingLeft: theme.spacing(1),
+  },
+  borderTop: '1px solid',
+  borderTopColor: theme.palette.divider,
+}))

package/src/components/Table/TablePagination.tsx

@@ -0,0 +1,54 @@
+import FirstPageIcon from '@mui/icons-material/FirstPage'
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
+import LastPageIcon from '@mui/icons-material/LastPage'
+import { Box, CircularProgress, IconButton, useTheme } from '@mui/material'
+
+interface TablePaginationActionsProps {
+  count: number
+  enableNextPage?: boolean
+  page: number
+  rowsPerPage: number
+  loading?: boolean
+  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void
+}
+
+export function TablePaginationActions({ count, page, rowsPerPage, onPageChange, enableNextPage, loading }: TablePaginationActionsProps) {
+  const theme = useTheme()
+
+  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, 0)
+  }
+
+  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, page - 1)
+  }
+
+  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, page + 1)
+  }
+
+  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
+  }
+
+  return (
+    <>
+      {loading ? <CircularProgress size={'small'} sx={{ height: theme.spacing(2), position: 'absolute', width: theme.spacing(2) }} /> : null}
+      <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+        <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
+          {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+        </IconButton>
+        <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+          {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+        </IconButton>
+        <IconButton onClick={handleNextButtonClick} disabled={!enableNextPage && page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
+          {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+        </IconButton>
+        <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
+          {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+        </IconButton>
+      </Box>
+    </>
+  )
+}