npm - @xyo-network/react-payload-table - Versions diffs - 2.31.4 → 2.31.5 - Mend

@xyo-network/react-payload-table 2.31.4 → 2.31.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/esm/components/DynamicTable/DynamicTableRow.js CHANGED Viewed

@@ -21,7 +21,7 @@ export const PayloadDynamicTableRow = ({ exploreDomain, network: networkProp, pa
         const Render = payload
             ? resolver?.resolve(payload)?.components.table.cell
             : undefined;
-        return Render ? _jsx(Render, { payload: payload, ...props }) : null;
+        return Render ? _jsx(Render, { payload: payload, ...props }) : _jsx(TableCell, { align: "left", ...props }, "payloads");
     };
     const icon = (props) => {
         const Avatar = payload
@@ -30,7 +30,9 @@ export const PayloadDynamicTableRow = ({ exploreDomain, network: networkProp, pa
         return (_jsx(TableCell, { align: "left", ...props, children: Avatar ? _jsx(Avatar, { payload: payload }) : null }, "payloads"));
     };
     const isValid = wrapper ? new XyoPayloadValidator(wrapper.body).validate().length === 0 : undefined;
-    const valid = (props) => (_jsx(TableCell, { align: "center", ...props, children: isValid === undefined ? (_jsx(WarningAmberRoundedIcon, { fontSize: "small", color: "warning" })) : isValid ? (_jsx(CheckCircleOutlineRoundedIcon, { fontSize: "small", color: "success" })) : (_jsx(ErrorOutlineRoundedIcon, { color: "error", fontSize: "small" })) }, "valid"));
+    const valid = (props) => (_jsx(TableCell, { align: "center", ...props, children: isValid === undefined && payload != undefined ? (_jsx(WarningAmberRoundedIcon, { fontSize: "small", color: "warning" })) : isValid === true ? (_jsx(CheckCircleOutlineRoundedIcon, { fontSize: "small", color: "success" })) : isValid === false ? (_jsx(ErrorOutlineRoundedIcon, { color: "error", fontSize: "small" })) : (
+        //nbsp to keep row height consistent even when no data is provided for the row
+        _jsx(Typography, { children: " \u00A0" })) }, "valid"));
     const tableCells = {
         details,
         hash,

package/dist/esm/components/DynamicTable/DynamicTableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicTableRow.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/DynamicTableRow.tsx"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,MAAM,+CAA+C,CAAA;AACzF,OAAO,uBAAuB,MAAM,yCAAyC,CAAA;AAC7E,OAAO,uBAAuB,MAAM,yCAAyC,CAAA;AAC7E,OAAO,EAAe,SAAS,EAAkB,QAAQ,EAAiB,UAAU,EAAE,MAAM,eAAe,CAAA;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAc,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACzF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,8BAA8B,EAAyB,MAAM,mCAAmC,CAAA;AACzG,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAGzD,OAAO,EAEL,uCAAuC,GAExC,MAAM,mCAAmC,CAAA;AAU1C,MAAM,CAAC,MAAM,sBAAsB,GAA0C,CAAC,EAC5E,aAAa,EACb,OAAO,EAAE,WAAW,EACpB,OAAO,EACP,OAAO,EACP,OAAO,GAAG,uCAAuC,EAAE,EACnD,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACpE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAA;IAChC,MAAM,EAAE,QAAQ,EAAE,GAAG,8BAA8B,EAAE,CAAA;IACrD,MAAM,IAAI,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CAChD,KAAC,aAAa,IAEZ,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,OAAO,EAAE,IAAI,EACpB,QAAQ,EAAC,SAAS,EAClB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,IAAI,KACjC,KAAK,IAPL,MAAM,CAQV,CACH,CAAA;IAED,MAAM,MAAM,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CAClD,KAAC,SAAS,IAAgB,KAAK,EAAC,MAAM,KAAK,KAAK,YAC9C,KAAC,UAAU,IAAC,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,kBACtD,OAAO,EAAE,MAAM,GACL,IAHA,UAAU,CAIb,CACb,CAAA;IAED,MAAM,OAAO,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnD,KAAC,SAAS,IAAgB,KAAK,EAAC,MAAM,KAAK,KAAK,YAC9C,KAAC,UAAU,IAAC,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,kBACtD,OAAO,EAAE,OAAO,GACN,IAHA,UAAU,CAIb,CACb,CAAA;IAED,MAAM,MAAM,GAA6B,CAAC,KAAK,EAAE,EAAE;QACjD,MAAM,MAAM,GAAsE,OAAO;YACvF,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI;YACnD,CAAC,CAAC,SAAS,CAAA;QACb,OAAO,MAAM,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC,CAAC,CAAC,~~IAAI~~,CAAA;~~IAChE~~,CAAC,CAAA;IAED,MAAM,IAAI,GAA6B,CAAC,KAAK,EAAE,EAAE;QAC/C,MAAM,MAAM,GAAmE,OAAO;YACpF,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK;YACrD,CAAC,CAAC,SAAS,CAAA;QAEb,OAAO,CACL,KAAC,SAAS,IAAgB,KAAK,EAAC,MAAM,KAAK,KAAK,YAC7C,MAAM,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,IADhC,UAAU,CAEb,CACb,CAAA;IACH,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEnG,MAAM,KAAK,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACjD,KAAC,SAAS,IAAa,KAAK,EAAC,QAAQ,KAAK,KAAK,YAC5C,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,~~CACvB~~,KAAC,uBAAuB,IAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC7D,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,~~CACZ~~,KAAC,6BAA6B,IAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CACnE,CAAC,CAAC,CAAC,~~CACF~~,KAAC,uBAAuB,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,GAAG,CAC3D,~~IAPY~~,OAAO,~~CAQV~~,CACb,CAAA;IAED,MAAM,UAAU,GAAoE;QAClF,OAAO;QACP,IAAI;QACJ,IAAI;QACJ,MAAM;QACN,MAAM;QACN,KAAK;KACN,CAAA;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAM,KAAK,YAC9C,OAAO,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACnC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QACzD,CAAC,CAAC,GACO,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
1	+ {"version":3,"file":"DynamicTableRow.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/DynamicTableRow.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/DynamicTable/Table.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":";~~AAAA~~,OAAO,~~EAAiD~~,UAAU,~~EAAwB~~,MAAM,eAAe,CAAA;~~AAE/G~~,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;~~AAIpE~~,OAAO,EAAE,+BAA+B,EAA2C,MAAM,mCAAmC,CAAA;AAE5H,MAAM,WAAW,wBAAyB,SAAQ,UAAU;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,+BAA+B,CAAA;CAC1C;~~AAED~~,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,~~CAwDlE~~,CAAA"}
1	+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":";AAIA,OAAO,EAUL,UAAU,EAIX,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AAKpE,OAAO,EAAE,+BAA+B,EAA2C,MAAM,mCAAmC,CAAA;AAE5H,MAAM,WAAW,wBAAyB,SAAQ,UAAU;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,+BAA+B,CAAA;CAC1C;AA+CD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4FlE,CAAA"}

package/dist/esm/components/DynamicTable/Table.js CHANGED Viewed

@@ -1,21 +1,60 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
+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, Box, IconButton, Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, Typography, useTheme, } from '@mui/material';
 import { useBreakpoint } from '@xylabs/react-shared';
 import { XyoPayloadWrapper } from '@xyo-network/payload';
 import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service';
+import { useState } from 'react';
 import { PayloadDynamicTableRow } from './DynamicTableRow';
 import { payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig';
+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 PayloadDynamicTable = ({ exploreDomain, archive, onRowClick, payloads, children, columns = payloadDynamicTableColumnConfigDefaults(), ...props }) => {
     const breakPoint = useBreakpoint();
-    return breakPoint ? (_jsxs(Table, { ...props, stickyHeader: true, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const payloadCount = payloads ? payloads.length : 0;
+    // 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 handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+    return breakPoint ? (_jsxs(Table, { stickyHeader: true, ...props, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
                         return (_jsx(TableCell, { align: column.alignment ?? 'left', width: column.width, children: _jsx(Typography, { variant: "body2", noWrap: true, children: column.name }) }, index));
-                    }) }) }), _jsxs(TableBody, { children: [payloads?.map((payload, index) => {
+                    }) }) }), _jsxs(TableBody, { sx: { overflowY: 'scroll ' }, children: [payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
                         const wrapper = new XyoPayloadWrapper(payload);
                         return (_jsx(XyoApiThrownErrorBoundary, { errorComponent: (e) => (_jsxs(Alert, { severity: "error", children: ["Error Loading Payload: ", _jsx(Typography, { fontWeight: "bold", children: e.message })] })), children: _jsx(PayloadDynamicTableRow, { archive: archive, onClick: onRowClick
                                     ? () => {
                                         onRowClick(payload);
                                     }
                                     : undefined, exploreDomain: exploreDomain, payload: payload }) }, `${wrapper.hash}-${index}`));
-                    }), children] })] })) : null;
+                    }), children, emptyRows > 0 && Array(emptyRows).fill(_jsx(PayloadDynamicTableRow, {}))] }), _jsx(TableFooter, { children: _jsx(TableRow, { children: _jsx(TablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }], colSpan: 5, count: payloadCount, rowsPerPage: rowsPerPage, page: page, SelectProps: {
+                            inputProps: {
+                                'aria-label': 'rows per page',
+                            },
+                            native: true,
+                        }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: TablePaginationActions }) }) })] })) : null;
 };
 //# sourceMappingURL=Table.js.map

package/dist/esm/components/DynamicTable/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,~~EAAE~~,KAAK,~~EAAE~~,KAAK,~~EAAE~~,SAAS,~~EAAE~~,SAAS,~~EAAE~~,SAAS,~~EAAc~~,QAAQ,~~EAAE~~,UAAU,~~EAAE~~,MAAM,eAAe,CAAA;~~AAC/G~~,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAc,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;~~AAE3E~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAmC,uCAAuC,EAAE,MAAM,mCAAmC,CAAA;~~AAU5H~~,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,aAAa,EACb,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,uCAAuC,EAAE,EACnD,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,OAAO,~~UAAU~~,CAAC,CAAC,CAAC,~~CAClB~~,~~MAAC~~,KAAK,~~OAAK~~,KAAK,EAAE,YAAY,~~mBAC5B~~,KAAC,SAAS,cACR,KAAC,QAAQ,cACN,OAAO,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;wBAC1C,OAAO,CACL,KAAC,SAAS,IAAa,KAAK,EAAE,MAAM,CAAC,SAAS,IAAI,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3E,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,MAAM,kBAC/B,MAAM,CAAC,IAAI,GACD,IAHC,KAAK,CAIT,CACb,CAAA;oBACH,CAAC,CAAC,GACO,GACD,EACZ,MAAC,SAAS,~~eACP~~,QAAQ,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;~~wBAChC~~,MAAM,OAAO,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAA;wBAC9C,OAAO,CACL,KAAC,yBAAyB,IAExB,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CACrB,MAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,wCACE,KAAC,UAAU,IAAC,UAAU,EAAC,MAAM,YAAE,CAAC,CAAC,OAAO,GAAc,IACvE,CACT,YAED,KAAC,sBAAsB,IACrB,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,UAAU;oCACR,CAAC,CAAC,GAAG,EAAE;wCACH,UAAU,CAAC,OAAO,CAAC,CAAA;oCACrB,CAAC;oCACH,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,GAChB,IAlBG,GAAG,OAAO,CAAC,IAAI,IAAI,KAAK,EAAE,CAmBL,CAC7B,CAAA;oBACH,CAAC,CAAC,EACD,QAAQ,~~IACC~~,~~IACN~~,CACT,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
1	+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { TableProps } from '@mui/material';
 import { XyoPayload } from '@xyo-network/payload';
+import * as React from 'react';
 import { PayloadTableColumnConfig } from './PayloadTableColumnConfig';
 export interface PayloadTableProps extends TableProps {
     exploreDomain?: string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"~~;AAAA~~,OAAO,~~EAAiD~~,UAAU,EAAwB,MAAM,eAAe,CAAA;~~AAE/G~~,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;~~AAGpE~~,OAAO,EAAsB,wBAAwB,EAAoC,MAAM,4BAA4B,CAAA;AAG3H,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,wBAAwB,CAAA;CACnC;~~AAED~~,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,~~CAwDpD~~,CAAA"}
1	+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+E,UAAU,EAAwB,MAAM,eAAe,CAAA;AAK7I,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AAEpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAsB,wBAAwB,EAAoC,MAAM,4BAA4B,CAAA;AAG3H,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,wBAAwB,CAAA;CACnC;AA+CD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FpD,CAAA"}

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

@@ -1,21 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
+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, Table, TableBody, TableCell, TableFooter, 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 { useBreakpoint } from '@xylabs/react-shared';
 import { XyoPayloadWrapper } from '@xyo-network/payload';
 import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service';
+import { useState } from 'react';
 import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig';
 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, payloads, children, columns = payloadTableColumnConfigDefaults(), ...props }) => {
     const breakPoint = useBreakpoint();
-    return breakPoint ? (_jsxs(Table, { ...props, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const payloadCount = payloads ? payloads.length : 0;
+    // 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 handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+    return breakPoint ? (_jsxs(Table, { stickyHeader: true, ...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?.map((payload, index) => {
+                    }) }) }), _jsxs(TableBody, { sx: { overflowY: 'scroll ' }, children: [payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
+                        // {payloads?.map((payload, index) => {
                         const wrapper = new XyoPayloadWrapper(payload);
                         return (_jsx(XyoApiThrownErrorBoundary, { errorComponent: (e) => (_jsxs(Alert, { severity: "error", children: ["Error Loading Payload: ", _jsx(Typography, { fontWeight: "bold", children: e.message })] })), children: _jsx(PayloadTableRow, { archive: archive, onClick: onRowClick
                                     ? () => {
                                         onRowClick(payload);
                                     }
                                     : undefined, exploreDomain: exploreDomain, payload: payload }) }, `${wrapper.hash}-${index}`));
-                    }), children] })] })) : null;
+                    }), children, emptyRows > 0 && Array(emptyRows).fill(_jsx(PayloadTableRow, {}))] }), _jsx(TableFooter, { children: _jsx(TableRow, { children: _jsx(TablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }], colSpan: 3, count: payloadCount, rowsPerPage: rowsPerPage, page: page, SelectProps: {
+                            inputProps: {
+                                'aria-label': 'rows per page',
+                            },
+                            native: true,
+                        }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: TablePaginationActions }) }) })] })) : null;
 };
 //# sourceMappingURL=Table.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAc,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAc,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AAE3E,OAAO,EAAE,kBAAkB,EAA4B,gCAAgC,EAAE,MAAM,4BAA4B,CAAA;AAC3H,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;~~AAU5C~~,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,aAAa,EACb,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,gCAAgC,EAAE,EAC5C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,MAAC,KAAK,~~OAAK~~,KAAK,~~aACd~~,KAAC,SAAS,cACR,KAAC,QAAQ,cACN,OAAO,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;wBAC1C,OAAO,CACL,KAAC,SAAS,IAAa,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,YACpG,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,MAAM,kBAC/B,kBAAkB,CAAC,MAAM,CAAC,GAChB,IAHC,KAAK,CAIT,CACb,CAAA;oBACH,CAAC,CAAC,GACO,GACD,EACZ,MAAC,SAAS,~~eACP~~,QAAQ,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;~~wBAChC~~,MAAM,OAAO,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAA;wBAC9C,OAAO,CACL,KAAC,yBAAyB,IAExB,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CACrB,MAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,wCACE,KAAC,UAAU,IAAC,UAAU,EAAC,MAAM,YAAE,CAAC,CAAC,OAAO,GAAc,IACvE,CACT,YAED,KAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,UAAU;oCACR,CAAC,CAAC,GAAG,EAAE;wCACH,UAAU,CAAC,OAAO,CAAC,CAAA;oCACrB,CAAC;oCACH,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,GAChB,IAlBG,GAAG,OAAO,CAAC,IAAI,IAAI,KAAK,EAAE,CAmBL,CAC7B,CAAA;oBACH,CAAC,CAAC,EACD,QAAQ,~~IACC~~,~~IACN~~,CACT,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
1	+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Table/TableRow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":";~~AAAA~~,OAAO,~~EAAuC~~,aAAa,EAAc,MAAM,eAAe,CAAA;~~AAE9F~~,OAAO,EAAE,UAAU,EAA0C,MAAM,sBAAsB,CAAA;~~AAKzF~~,OAAO,EAAE,wBAAwB,EAA4D,MAAM,4BAA4B,CAAA;AAE/H,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,~~CA8D1D~~,CAAA"}
1	+ {"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":";AAGA,OAAO,EAA8C,aAAa,EAAc,MAAM,eAAe,CAAA;AAErG,OAAO,EAAE,UAAU,EAA0C,MAAM,sBAAsB,CAAA;AAIzF,OAAO,EAAE,wBAAwB,EAA4D,MAAM,4BAA4B,CAAA;AAE/H,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+D1D,CAAA"}

package/dist/esm/components/Table/TableRow.js CHANGED Viewed

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableCell, TableRow, Typography } from '@mui/material';
+import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
+import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import { alpha, TableCell, TableRow, Typography } from '@mui/material';
 import { useBreakpoint } from '@xylabs/react-shared';
 import { XyoPayloadValidator, XyoPayloadWrapper } from '@xyo-network/payload';
 import { useNetwork } from '@xyo-network/react-network';
 import { HashTableCell } from '@xyo-network/react-shared';
-import { MdClear, MdDone } from 'react-icons/md';
 import { payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig';
 export const PayloadTableRow = ({ exploreDomain, network: networkProp, payload, archive, columns = payloadTableColumnConfigDefaults(), ...props }) => {
     const breakPoint = useBreakpoint();
@@ -13,7 +15,9 @@ export const PayloadTableRow = ({ exploreDomain, network: networkProp, payload,
     const hash = (props) => (_jsx(HashTableCell, { archive: archive, width: "100%", value: wrapper?.hash, dataType: "payload", exploreDomain: exploreDomain, network: networkProp ?? network?.slug, ...props }, "hash"));
     const schema = (props) => (_jsx(TableCell, { align: "center", ...props, children: _jsx(Typography, { fontFamily: "monospace", variant: "body2", noWrap: true, children: payload?.schema }) }, "payloads"));
     const isValid = wrapper ? new XyoPayloadValidator(wrapper.body).validate().length === 0 : undefined;
-    const valid = (props) => (_jsx(TableCell, { align: "center", ...props, children: _jsx(Typography, { fontFamily: "monospace", variant: "body2", noWrap: true, children: isValid === undefined ? (_jsx(MdDone, { fontSize: 18, color: "yellow" })) : isValid ? (_jsx(MdDone, { fontSize: 18, color: "green" })) : (_jsx(MdClear, { color: "red", fontSize: 18 })) }) }, "valid"));
+    const valid = (props) => (_jsx(TableCell, { align: "center", ...props, children: isValid === undefined && payload != undefined ? (_jsx(WarningAmberRoundedIcon, { fontSize: "small", color: "warning" })) : isValid === true ? (_jsx(CheckCircleOutlineRoundedIcon, { fontSize: "small", color: "success" })) : isValid === false ? (_jsx(ErrorOutlineRoundedIcon, { color: "error", fontSize: "small" })) : (
+        //to keep row height consistent when no data provided, may need fix later
+        _jsx(ErrorOutlineRoundedIcon, { sx: { color: alpha('#fff', 0) }, fontSize: "small" })) }, "valid"));
     const tableCells = {
         hash,
         schema,

package/dist/esm/components/Table/TableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,QAAQ,EAAiB,UAAU,EAAE,MAAM,eAAe,CAAA;~~AAC9F~~,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAc,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACzF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;~~AACzD~~,OAAO,~~EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEhD,OAAO,~~EAA4B,gCAAgC,EAA0B,MAAM,4BAA4B,CAAA;AAU/H,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,aAAa,EACb,OAAO,EAAE,WAAW,EACpB,OAAO,EACP,OAAO,EACP,OAAO,GAAG,gCAAgC,EAAE,EAC5C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACpE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAA;IAEhC,MAAM,IAAI,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CAChD,KAAC,aAAa,IAEZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,OAAO,EAAE,IAAI,EACpB,QAAQ,EAAC,SAAS,EAClB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,IAAI,KACjC,KAAK,IAPL,MAAM,CAQV,CACH,CAAA;IAED,MAAM,MAAM,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CAClD,KAAC,SAAS,IAAgB,KAAK,EAAC,QAAQ,KAAK,KAAK,YAChD,KAAC,UAAU,IAAC,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,kBACtD,OAAO,EAAE,MAAM,GACL,IAHA,UAAU,CAIb,CACb,CAAA;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEnG,MAAM,KAAK,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACjD,KAAC,SAAS,IAAa,KAAK,EAAC,QAAQ,KAAK,KAAK,~~YAC7C~~,KAAC,~~UAAU~~,IAAC,~~UAAU~~,EAAC,~~WAAW~~,EAAC,~~OAAO~~,EAAC,~~OAAO~~,~~EAAC~~,~~MAAM~~,~~kBACtD~~,OAAO,KAAK,~~SAAS~~,CAAC,CAAC,CAAC,~~CACvB~~,KAAC,~~MAAM~~,IAAC,QAAQ,~~EAAE~~,~~EAAE~~,~~EAAE~~,KAAK,EAAC,~~QAAQ~~,GAAG,~~CACxC~~,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,~~CACZ~~,KAAC,~~MAAM~~,IAAC,~~QAAQ~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,EAAC,OAAO,GAAG,~~CACvC~~,CAAC,CAAC,CAAC,~~CACF~~,KAAC,~~OAAO~~,IAAC,KAAK,~~EAAC~~,KAAK,~~EAAC~~,~~QAAQ~~,EAAE,EAAE,~~GAAI~~,~~CACtC~~,~~GACU~~,~~IATA~~,OAAO,~~CAUV~~,CACb,CAAA;IAED,MAAM,UAAU,GAA6D;QAC3E,IAAI;QACJ,MAAM;QACN,KAAK;KACN,CAAA;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAM,KAAK,YAC9C,OAAO,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACnC,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAA;QAC/B,CAAC,CAAC,GACO,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
1	+ {"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,MAAM,+CAA+C,CAAA;AACzF,OAAO,uBAAuB,MAAM,yCAAyC,CAAA;AAC7E,OAAO,uBAAuB,MAAM,yCAAyC,CAAA;AAC7E,OAAO,EAAE,KAAK,EAAE,SAAS,EAAkB,QAAQ,EAAiB,UAAU,EAAE,MAAM,eAAe,CAAA;AACrG,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAc,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACzF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAA4B,gCAAgC,EAA0B,MAAM,4BAA4B,CAAA;AAU/H,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,aAAa,EACb,OAAO,EAAE,WAAW,EACpB,OAAO,EACP,OAAO,EACP,OAAO,GAAG,gCAAgC,EAAE,EAC5C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACpE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAA;IAEhC,MAAM,IAAI,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CAChD,KAAC,aAAa,IAEZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,OAAO,EAAE,IAAI,EACpB,QAAQ,EAAC,SAAS,EAClB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,IAAI,KACjC,KAAK,IAPL,MAAM,CAQV,CACH,CAAA;IAED,MAAM,MAAM,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CAClD,KAAC,SAAS,IAAgB,KAAK,EAAC,QAAQ,KAAK,KAAK,YAChD,KAAC,UAAU,IAAC,UAAU,EAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,kBACtD,OAAO,EAAE,MAAM,GACL,IAHA,UAAU,CAIb,CACb,CAAA;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEnG,MAAM,KAAK,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACjD,KAAC,SAAS,IAAa,KAAK,EAAC,QAAQ,KAAK,KAAK,YAC5C,OAAO,KAAK,SAAS,IAAI,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CAC/C,KAAC,uBAAuB,IAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC7D,CAAC,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CACrB,KAAC,6BAA6B,IAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CACnE,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CACtB,KAAC,uBAAuB,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,GAAG,CAC3D,CAAC,CAAC,CAAC;QACF,yEAAyE;QACzE,KAAC,uBAAuB,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAC,OAAO,GAAG,CAC9E,IAVY,OAAO,CAWV,CACb,CAAA;IAED,MAAM,UAAU,GAA6D;QAC3E,IAAI;QACJ,MAAM;QACN,KAAK;KACN,CAAA;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAM,KAAK,YAC9C,OAAO,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACnC,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAA;QAC/B,CAAC,CAAC,GACO,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}

package/package.json CHANGED Viewed

@@ -10,17 +10,17 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.3",
-    "@xylabs/react-shared": "^2.14.14",
-    "@xyo-network/payload": "^2.29.0",
-    "@xyo-network/react-auth-service": "^2.31.4",
-    "@xyo-network/react-crypto-market-uniswap-plugin": "^2.31.4",
-    "@xyo-network/react-network": "^2.31.4",
-    "@xyo-network/react-payload-plugin": "^2.31.4",
-    "@xyo-network/react-shared": "^2.31.4",
+    "@xylabs/react-shared": "^2.14.16",
+    "@xyo-network/payload": "^2.29.2",
+    "@xyo-network/react-auth-service": "^2.31.5",
+    "@xyo-network/react-crypto-market-uniswap-plugin": "^2.31.5",
+    "@xyo-network/react-network": "^2.31.5",
+    "@xyo-network/react-payload-plugin": "^2.31.5",
+    "@xyo-network/react-shared": "^2.31.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
@@ -30,8 +30,8 @@
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
     "@storybook/react": "^6.5.10",
-    "@xylabs/tsconfig-dom": "^2.5.163",
-    "@xyo-network/react-storybook": "^2.31.4"
+    "@xylabs/tsconfig-dom": "^2.5.167",
+    "@xyo-network/react-storybook": "^2.31.5"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -75,5 +75,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.31.4"
+  "version": "2.31.5"
 }

package/src/components/DynamicTable/DynamicTable.stories.tsx CHANGED Viewed

@@ -32,7 +32,27 @@ Default.args = {}
 Default.decorators = [useAppThemeDecorator]
 const WithData = Template.bind({})
-WithData.args = { payloads: [samplePayload, sampleUniswapPayload, sampleCoinGeckoPayload, samplePayload, sampleUniswapPayload] }
+WithData.args = {
+  payloads: [
+    samplePayload,
+    sampleUniswapPayload,
+    sampleCoinGeckoPayload,
+    samplePayload,
+    sampleUniswapPayload,
+    samplePayload,
+    sampleUniswapPayload,
+    sampleCoinGeckoPayload,
+    samplePayload,
+    sampleUniswapPayload,
+    samplePayload,
+    sampleUniswapPayload,
+    sampleCoinGeckoPayload,
+    samplePayload,
+    sampleUniswapPayload,
+    samplePayload,
+    sampleUniswapPayload,
+  ],
+}
 WithData.decorators = [useAppThemeDecorator]
 const WithError = Template.bind({})

package/src/components/DynamicTable/DynamicTableRow.tsx CHANGED Viewed

@@ -68,7 +68,7 @@ export const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({
     const Render: ComponentType<XyoPayloadRenderProps & TableCellProps> | undefined = payload
       ? resolver?.resolve(payload)?.components.table.cell
       : undefined
-    return Render ? <Render payload={payload} {...props} /> : null
+    return Render ? <Render payload={payload} {...props} /> : <TableCell key="payloads" align="left" {...props}></TableCell>
   }
   const icon: React.FC<TableCellProps> = (props) => {
@@ -87,12 +87,15 @@ export const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({
   const valid: React.FC<TableCellProps> = (props) => (
     <TableCell key="valid" align="center" {...props}>
-      {isValid === undefined ? (
+      {isValid === undefined && payload != undefined ? (
         <WarningAmberRoundedIcon fontSize="small" color="warning" />
-      ) : isValid ? (
+      ) : isValid === true ? (
         <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
-      ) : (
+      ) : isValid === false ? (
         <ErrorOutlineRoundedIcon color="error" fontSize="small" />
+      ) : (
+        //nbsp to keep row height consistent even when no data is provided for the row
+        <Typography> &nbsp;</Typography>
       )}
     </TableCell>
   )

package/src/components/DynamicTable/Table.tsx CHANGED Viewed

@@ -1,7 +1,26 @@
-import { Alert, Table, TableBody, TableCell, TableHead, TableProps, TableRow, Typography } from '@mui/material'
+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,
+  Box,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TablePagination,
+  TableProps,
+  TableRow,
+  Typography,
+  useTheme,
+} from '@mui/material'
 import { useBreakpoint } from '@xylabs/react-shared'
 import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
 import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
+import { useState } from 'react'
 import { PayloadDynamicTableRow } from './DynamicTableRow'
 import { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'
@@ -14,6 +33,51 @@ export interface PayloadDynamicTableProps extends TableProps {
   columns?: PayloadDynamicTableColumnConfig
 }
+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>
+  )
+}
 export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
   exploreDomain,
   archive,
@@ -24,8 +88,23 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
   ...props
 }) => {
   const breakPoint = useBreakpoint()
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(5)
+  const payloadCount = payloads ? payloads.length : 0
+  // 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 handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+    setPage(newPage)
+  }
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10))
+    setPage(0)
+  }
   return breakPoint ? (
-    <Table {...props} stickyHeader>
+    <Table stickyHeader {...props}>
       <TableHead>
         <TableRow>
           {columns[breakPoint]?.map((column, index) => {
@@ -39,8 +118,8 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
           })}
         </TableRow>
       </TableHead>
-      <TableBody>
-        {payloads?.map((payload, index) => {
+      <TableBody sx={{ overflowY: 'scroll ' }}>
+        {payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
           const wrapper = new XyoPayloadWrapper(payload)
           return (
             <XyoApiThrownErrorBoundary
@@ -67,7 +146,28 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
           )
         })}
         {children}
+        {emptyRows > 0 && Array(emptyRows).fill(<PayloadDynamicTableRow />)}
       </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TablePagination
+            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+            colSpan={5}
+            count={payloadCount}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            SelectProps={{
+              inputProps: {
+                'aria-label': 'rows per page',
+              },
+              native: true,
+            }}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            ActionsComponent={TablePaginationActions}
+          />
+        </TableRow>
+      </TableFooter>
     </Table>
   ) : null
 }

package/src/components/Table/Table.stories.tsx CHANGED Viewed

@@ -26,7 +26,41 @@ Default.args = {}
 Default.decorators = [useAppThemeDecorator]
 const WithData = Template.bind({})
-WithData.args = { payloads: [samplePayload, samplePayload] }
+WithData.args = {
+  payloads: [
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+    samplePayload,
+  ],
+}
 WithData.decorators = [useAppThemeDecorator]
 const WithError = Template.bind({})