@xyo-network/react-payload-table 2.32.0-rc.8 → 2.32.0-rc.9

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 (20) hide show
  1. package/dist/cjs/components/DynamicTable/Table.d.ts.map +1 -1
  2. package/dist/cjs/components/DynamicTable/Table.js +42 -3
  3. package/dist/cjs/components/DynamicTable/Table.js.map +1 -1
  4. package/dist/cjs/components/Table/Table.d.ts +1 -1
  5. package/dist/cjs/components/Table/Table.d.ts.map +1 -1
  6. package/dist/cjs/components/Table/Table.js +46 -3
  7. package/dist/cjs/components/Table/Table.js.map +1 -1
  8. package/dist/docs.json +33 -33
  9. package/dist/esm/components/DynamicTable/Table.d.ts.map +1 -1
  10. package/dist/esm/components/DynamicTable/Table.js +43 -4
  11. package/dist/esm/components/DynamicTable/Table.js.map +1 -1
  12. package/dist/esm/components/Table/Table.d.ts +1 -1
  13. package/dist/esm/components/Table/Table.d.ts.map +1 -1
  14. package/dist/esm/components/Table/Table.js +47 -4
  15. package/dist/esm/components/Table/Table.js.map +1 -1
  16. package/package.json +5 -5
  17. package/src/components/DynamicTable/DynamicTable.stories.tsx +21 -1
  18. package/src/components/DynamicTable/Table.tsx +104 -4
  19. package/src/components/Table/Table.stories.tsx +35 -1
  20. package/src/components/Table/Table.tsx +95 -4
package/dist/cjs/components/DynamicTable/Table.d.ts.map CHANGED
@@ -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/cjs/components/DynamicTable/Table.js CHANGED
@@ -3,27 +3,66 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.PayloadDynamicTable = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
+ const FirstPage_1 = tslib_1.__importDefault(require("@mui/icons-material/FirstPage"));
7
+ const KeyboardArrowLeft_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowLeft"));
8
+ const KeyboardArrowRight_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowRight"));
9
+ const LastPage_1 = tslib_1.__importDefault(require("@mui/icons-material/LastPage"));
6
10
  const material_1 = require("@mui/material");
7
11
  const react_shared_1 = require("@xylabs/react-shared");
8
12
  const payload_1 = require("@xyo-network/payload");
9
13
  const react_auth_service_1 = require("@xyo-network/react-auth-service");
14
+ const react_1 = require("react");
10
15
  const DynamicTableRow_1 = require("./DynamicTableRow");
11
16
  const PayloadDynamicTableColumnConfig_1 = require("./PayloadDynamicTableColumnConfig");
17
+ function TablePaginationActions(props) {
18
+ const theme = (0, material_1.useTheme)();
19
+ const { count, page, rowsPerPage, onPageChange } = props;
20
+ const handleFirstPageButtonClick = (event) => {
21
+ onPageChange(event, 0);
22
+ };
23
+ const handleBackButtonClick = (event) => {
24
+ onPageChange(event, page - 1);
25
+ };
26
+ const handleNextButtonClick = (event) => {
27
+ onPageChange(event, page + 1);
28
+ };
29
+ const handleLastPageButtonClick = (event) => {
30
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
31
+ };
32
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { flexShrink: 0, ml: 2.5 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(LastPage_1.default, {}) : (0, jsx_runtime_1.jsx)(FirstPage_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(FirstPage_1.default, {}) : (0, jsx_runtime_1.jsx)(LastPage_1.default, {}) }))] })));
33
+ }
12
34
  const PayloadDynamicTable = (_a) => {
13
35
  var _b;
14
36
  var { exploreDomain, archive, onRowClick, payloads, children, columns = (0, PayloadDynamicTableColumnConfig_1.payloadDynamicTableColumnConfigDefaults)() } = _a, props = tslib_1.__rest(_a, ["exploreDomain", "archive", "onRowClick", "payloads", "children", "columns"]);
15
37
  const breakPoint = (0, react_shared_1.useBreakpoint)();
16
- return breakPoint ? ((0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({}, props, { stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (_b = columns[breakPoint]) === null || _b === void 0 ? void 0 : _b.map((column, index) => {
38
+ const [page, setPage] = (0, react_1.useState)(0);
39
+ const [rowsPerPage, setRowsPerPage] = (0, react_1.useState)(5);
40
+ const payloadCount = payloads ? payloads.length : 0;
41
+ // Avoid a layout jump when reaching the last page with empty rows.
42
+ const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0;
43
+ const handleChangePage = (event, newPage) => {
44
+ setPage(newPage);
45
+ };
46
+ const handleChangeRowsPerPage = (event) => {
47
+ setRowsPerPage(parseInt(event.target.value, 10));
48
+ setPage(0);
49
+ };
50
+ return breakPoint ? ((0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ stickyHeader: true }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (_b = columns[breakPoint]) === null || _b === void 0 ? void 0 : _b.map((column, index) => {
17
51
  var _a;
18
52
  return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: (_a = column.alignment) !== null && _a !== void 0 ? _a : 'left', width: column.width }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", noWrap: true }, { children: column.name })) }), index));
19
- }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [payloads === null || payloads === void 0 ? void 0 : payloads.map((payload, index) => {
53
+ }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ sx: { overflowY: 'scroll ' } }, { children: [payloads === null || payloads === void 0 ? void 0 : payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
20
54
  const wrapper = new payload_1.XyoPayloadWrapper(payload);
21
55
  return ((0, jsx_runtime_1.jsx)(react_auth_service_1.XyoApiThrownErrorBoundary, Object.assign({ errorComponent: (e) => ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error" }, { children: ["Error Loading Payload: ", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: "bold" }, { children: e.message }))] }))) }, { children: (0, jsx_runtime_1.jsx)(DynamicTableRow_1.PayloadDynamicTableRow, { archive: archive, onClick: onRowClick
22
56
  ? () => {
23
57
  onRowClick(payload);
24
58
  }
25
59
  : undefined, exploreDomain: exploreDomain, payload: payload }) }), `${wrapper.hash}-${index}`));
26
- }), children] })] }))) : null;
60
+ }), children, emptyRows > 0 && Array(emptyRows).fill((0, jsx_runtime_1.jsx)(DynamicTableRow_1.PayloadDynamicTableRow, {}))] })), (0, jsx_runtime_1.jsx)(material_1.TableFooter, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }], colSpan: 5, count: payloadCount, rowsPerPage: rowsPerPage, page: page, SelectProps: {
61
+ inputProps: {
62
+ 'aria-label': 'rows per page',
63
+ },
64
+ native: true,
65
+ }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: TablePaginationActions }) }) })] }))) : null;
27
66
  };
28
67
  exports.PayloadDynamicTable = PayloadDynamicTable;
29
68
  //# sourceMappingURL=Table.js.map
package/dist/cjs/components/DynamicTable/Table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA+G;AAC/G,uDAAoD;AACpD,kDAAoE;AACpE,wEAA2E;AAE3E,uDAA0D;AAC1D,uFAA4H;AAUrH,MAAM,mBAAmB,GAAuC,CAAC,EAQvE,EAAE,EAAE;;QARmE,EACtE,aAAa,EACb,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,IAAA,yEAAuC,GAAE,OAEpD,EADI,KAAK,sBAP8D,6EAQvE,CADS;IAER,MAAM,UAAU,GAAG,IAAA,4BAAa,GAAE,CAAA;IAClC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,wBAAC,gBAAK,oBAAK,KAAK,IAAE,YAAY,uBAC5B,uBAAC,oBAAS,cACR,uBAAC,mBAAQ,cACN,MAAA,OAAO,CAAC,UAAU,CAAC,0CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;wBAC1C,OAAO,CACL,uBAAC,oBAAS,kBAAa,KAAK,EAAE,MAAA,MAAM,CAAC,SAAS,mCAAI,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,gBAC3E,uBAAC,qBAAU,kBAAC,OAAO,EAAC,OAAO,EAAC,MAAM,sBAC/B,MAAM,CAAC,IAAI,IACD,KAHC,KAAK,CAIT,CACb,CAAA;oBACH,CAAC,CAAC,GACO,GACD,EACZ,wBAAC,oBAAS,eACP,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;wBAChC,MAAM,OAAO,GAAG,IAAI,2BAAiB,CAAC,OAAO,CAAC,CAAA;wBAC9C,OAAO,CACL,uBAAC,8CAAyB,kBAExB,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CACrB,wBAAC,gBAAK,kBAAC,QAAQ,EAAC,OAAO,4CACE,uBAAC,qBAAU,kBAAC,UAAU,EAAC,MAAM,gBAAE,CAAC,CAAC,OAAO,IAAc,KACvE,CACT,gBAED,uBAAC,wCAAsB,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,KAlBG,GAAG,OAAO,CAAC,IAAI,IAAI,KAAK,EAAE,CAmBL,CAC7B,CAAA;oBACH,CAAC,CAAC,EACD,QAAQ,IACC,KACN,CACT,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAxDY,QAAA,mBAAmB,uBAwD/B"}
1
+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":"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"}
package/dist/cjs/components/Table/Table.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- /// <reference types="react" />
2
1
  import { TableProps } from '@mui/material';
3
2
  import { XyoPayload } from '@xyo-network/payload';
3
+ import * as React from 'react';
4
4
  import { PayloadTableColumnConfig } from './PayloadTableColumnConfig';
5
5
  export interface PayloadTableProps extends TableProps {
6
6
  exploreDomain?: string;
package/dist/cjs/components/Table/Table.d.ts.map CHANGED
@@ -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/cjs/components/Table/Table.js CHANGED
@@ -3,26 +3,69 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.PayloadTable = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
+ const FirstPage_1 = tslib_1.__importDefault(require("@mui/icons-material/FirstPage"));
7
+ const KeyboardArrowLeft_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowLeft"));
8
+ const KeyboardArrowRight_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowRight"));
9
+ const LastPage_1 = tslib_1.__importDefault(require("@mui/icons-material/LastPage"));
6
10
  const material_1 = require("@mui/material");
11
+ const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
12
+ const IconButton_1 = tslib_1.__importDefault(require("@mui/material/IconButton"));
13
+ const styles_1 = require("@mui/material/styles");
7
14
  const react_shared_1 = require("@xylabs/react-shared");
8
15
  const payload_1 = require("@xyo-network/payload");
9
16
  const react_auth_service_1 = require("@xyo-network/react-auth-service");
17
+ const react_1 = require("react");
10
18
  const PayloadTableColumnConfig_1 = require("./PayloadTableColumnConfig");
11
19
  const TableRow_1 = require("./TableRow");
20
+ function TablePaginationActions(props) {
21
+ const theme = (0, styles_1.useTheme)();
22
+ const { count, page, rowsPerPage, onPageChange } = props;
23
+ const handleFirstPageButtonClick = (event) => {
24
+ onPageChange(event, 0);
25
+ };
26
+ const handleBackButtonClick = (event) => {
27
+ onPageChange(event, page - 1);
28
+ };
29
+ const handleNextButtonClick = (event) => {
30
+ onPageChange(event, page + 1);
31
+ };
32
+ const handleLastPageButtonClick = (event) => {
33
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
34
+ };
35
+ return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ sx: { flexShrink: 0, ml: 2.5 } }, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(LastPage_1.default, {}) : (0, jsx_runtime_1.jsx)(FirstPage_1.default, {}) })), (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}) })), (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) })), (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page" }, { children: theme.direction === 'rtl' ? (0, jsx_runtime_1.jsx)(FirstPage_1.default, {}) : (0, jsx_runtime_1.jsx)(LastPage_1.default, {}) }))] })));
36
+ }
12
37
  const PayloadTable = (_a) => {
13
38
  var _b;
14
39
  var { exploreDomain, archive, onRowClick, payloads, children, columns = (0, PayloadTableColumnConfig_1.payloadTableColumnConfigDefaults)() } = _a, props = tslib_1.__rest(_a, ["exploreDomain", "archive", "onRowClick", "payloads", "children", "columns"]);
15
40
  const breakPoint = (0, react_shared_1.useBreakpoint)();
16
- return breakPoint ? ((0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (_b = columns[breakPoint]) === null || _b === void 0 ? void 0 : _b.map((column, index) => {
41
+ const [page, setPage] = (0, react_1.useState)(0);
42
+ const [rowsPerPage, setRowsPerPage] = (0, react_1.useState)(5);
43
+ const payloadCount = payloads ? payloads.length : 0;
44
+ // Avoid a layout jump when reaching the last page with empty rows.
45
+ const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0;
46
+ const handleChangePage = (event, newPage) => {
47
+ setPage(newPage);
48
+ };
49
+ const handleChangeRowsPerPage = (event) => {
50
+ setRowsPerPage(parseInt(event.target.value, 10));
51
+ setPage(0);
52
+ };
53
+ return breakPoint ? ((0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ stickyHeader: true }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (_b = columns[breakPoint]) === null || _b === void 0 ? void 0 : _b.map((column, index) => {
17
54
  return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: index === 0 ? '100%' : undefined, align: index === 0 ? 'left' : 'center' }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", noWrap: true }, { children: PayloadTableColumnConfig_1.payloadColumnNames[column] })) }), index));
18
- }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [payloads === null || payloads === void 0 ? void 0 : payloads.map((payload, index) => {
55
+ }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ sx: { overflowY: 'scroll ' } }, { children: [payloads === null || payloads === void 0 ? void 0 : payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
56
+ // {payloads?.map((payload, index) => {
19
57
  const wrapper = new payload_1.XyoPayloadWrapper(payload);
20
58
  return ((0, jsx_runtime_1.jsx)(react_auth_service_1.XyoApiThrownErrorBoundary, Object.assign({ errorComponent: (e) => ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error" }, { children: ["Error Loading Payload: ", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: "bold" }, { children: e.message }))] }))) }, { children: (0, jsx_runtime_1.jsx)(TableRow_1.PayloadTableRow, { archive: archive, onClick: onRowClick
21
59
  ? () => {
22
60
  onRowClick(payload);
23
61
  }
24
62
  : undefined, exploreDomain: exploreDomain, payload: payload }) }), `${wrapper.hash}-${index}`));
25
- }), children] })] }))) : null;
63
+ }), children, emptyRows > 0 && Array(emptyRows).fill((0, jsx_runtime_1.jsx)(TableRow_1.PayloadTableRow, {}))] })), (0, jsx_runtime_1.jsx)(material_1.TableFooter, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }], colSpan: 3, count: payloadCount, rowsPerPage: rowsPerPage, page: page, SelectProps: {
64
+ inputProps: {
65
+ 'aria-label': 'rows per page',
66
+ },
67
+ native: true,
68
+ }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: TablePaginationActions }) }) })] }))) : null;
26
69
  };
27
70
  exports.PayloadTable = PayloadTable;
28
71
  //# sourceMappingURL=Table.js.map
package/dist/cjs/components/Table/Table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA+G;AAC/G,uDAAoD;AACpD,kDAAoE;AACpE,wEAA2E;AAE3E,yEAA2H;AAC3H,yCAA4C;AAUrC,MAAM,YAAY,GAAgC,CAAC,EAQzD,EAAE,EAAE;;QARqD,EACxD,aAAa,EACb,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,IAAA,2DAAgC,GAAE,OAE7C,EADI,KAAK,sBAPgD,6EAQzD,CADS;IAER,MAAM,UAAU,GAAG,IAAA,4BAAa,GAAE,CAAA;IAClC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,wBAAC,gBAAK,oBAAK,KAAK,eACd,uBAAC,oBAAS,cACR,uBAAC,mBAAQ,cACN,MAAA,OAAO,CAAC,UAAU,CAAC,0CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;wBAC1C,OAAO,CACL,uBAAC,oBAAS,kBAAa,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,gBACpG,uBAAC,qBAAU,kBAAC,OAAO,EAAC,OAAO,EAAC,MAAM,sBAC/B,6CAAkB,CAAC,MAAM,CAAC,IAChB,KAHC,KAAK,CAIT,CACb,CAAA;oBACH,CAAC,CAAC,GACO,GACD,EACZ,wBAAC,oBAAS,eACP,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;wBAChC,MAAM,OAAO,GAAG,IAAI,2BAAiB,CAAC,OAAO,CAAC,CAAA;wBAC9C,OAAO,CACL,uBAAC,8CAAyB,kBAExB,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CACrB,wBAAC,gBAAK,kBAAC,QAAQ,EAAC,OAAO,4CACE,uBAAC,qBAAU,kBAAC,UAAU,EAAC,MAAM,gBAAE,CAAC,CAAC,OAAO,IAAc,KACvE,CACT,gBAED,uBAAC,0BAAe,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,KAlBG,GAAG,OAAO,CAAC,IAAI,IAAI,KAAK,EAAE,CAmBL,CAC7B,CAAA;oBACH,CAAC,CAAC,EACD,QAAQ,IACC,KACN,CACT,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAxDY,QAAA,YAAY,gBAwDxB"}
1
+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}
package/dist/docs.json CHANGED
@@ -26,7 +26,7 @@
26
26
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
27
27
  "line": 7,
28
28
  "character": 2,
29
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L7"
29
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L7"
30
30
  }
31
31
  ],
32
32
  "type": {
@@ -51,7 +51,7 @@
51
51
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
52
52
  "line": 6,
53
53
  "character": 2,
54
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L6"
54
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L6"
55
55
  }
56
56
  ],
57
57
  "type": {
@@ -76,7 +76,7 @@
76
76
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
77
77
  "line": 5,
78
78
  "character": 2,
79
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L5"
79
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L5"
80
80
  }
81
81
  ],
82
82
  "type": {
@@ -101,7 +101,7 @@
101
101
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
102
102
  "line": 8,
103
103
  "character": 2,
104
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L8"
104
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L8"
105
105
  }
106
106
  ],
107
107
  "type": {
@@ -126,7 +126,7 @@
126
126
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
127
127
  "line": 4,
128
128
  "character": 2,
129
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L4"
129
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L4"
130
130
  }
131
131
  ],
132
132
  "type": {
@@ -156,7 +156,7 @@
156
156
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
157
157
  "line": 3,
158
158
  "character": 17,
159
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L3"
159
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L3"
160
160
  }
161
161
  ]
162
162
  },
@@ -178,9 +178,9 @@
178
178
  "sources": [
179
179
  {
180
180
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
181
- "line": 11,
181
+ "line": 20,
182
182
  "character": 2,
183
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L11"
183
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L20"
184
184
  }
185
185
  ],
186
186
  "type": {
@@ -199,9 +199,9 @@
199
199
  "sources": [
200
200
  {
201
201
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
202
- "line": 14,
202
+ "line": 23,
203
203
  "character": 2,
204
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L14"
204
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L23"
205
205
  }
206
206
  ],
207
207
  "type": {
@@ -221,9 +221,9 @@
221
221
  "sources": [
222
222
  {
223
223
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
224
- "line": 10,
224
+ "line": 19,
225
225
  "character": 2,
226
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L10"
226
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L19"
227
227
  }
228
228
  ],
229
229
  "type": {
@@ -242,9 +242,9 @@
242
242
  "sources": [
243
243
  {
244
244
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
245
- "line": 12,
245
+ "line": 21,
246
246
  "character": 2,
247
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L12"
247
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L21"
248
248
  }
249
249
  ],
250
250
  "type": {
@@ -258,9 +258,9 @@
258
258
  "sources": [
259
259
  {
260
260
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
261
- "line": 12,
261
+ "line": 21,
262
262
  "character": 15,
263
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L12"
263
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L21"
264
264
  }
265
265
  ],
266
266
  "signatures": [
@@ -316,9 +316,9 @@
316
316
  "sources": [
317
317
  {
318
318
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
319
- "line": 13,
319
+ "line": 22,
320
320
  "character": 2,
321
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L13"
321
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L22"
322
322
  }
323
323
  ],
324
324
  "type": {
@@ -367,9 +367,9 @@
367
367
  "sources": [
368
368
  {
369
369
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
370
- "line": 9,
370
+ "line": 18,
371
371
  "character": 17,
372
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L9"
372
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L18"
373
373
  }
374
374
  ],
375
375
  "extendedTypes": [
@@ -401,7 +401,7 @@
401
401
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx",
402
402
  "line": 12,
403
403
  "character": 2,
404
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L12"
404
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L12"
405
405
  }
406
406
  ],
407
407
  "type": {
@@ -422,7 +422,7 @@
422
422
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx",
423
423
  "line": 14,
424
424
  "character": 2,
425
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L14"
425
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L14"
426
426
  }
427
427
  ],
428
428
  "type": {
@@ -444,7 +444,7 @@
444
444
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx",
445
445
  "line": 13,
446
446
  "character": 2,
447
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L13"
447
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L13"
448
448
  }
449
449
  ],
450
450
  "type": {
@@ -465,7 +465,7 @@
465
465
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx",
466
466
  "line": 15,
467
467
  "character": 2,
468
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L15"
468
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L15"
469
469
  }
470
470
  ],
471
471
  "type": {
@@ -486,7 +486,7 @@
486
486
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx",
487
487
  "line": 11,
488
488
  "character": 2,
489
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L11"
489
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L11"
490
490
  }
491
491
  ],
492
492
  "type": {
@@ -525,7 +525,7 @@
525
525
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx",
526
526
  "line": 10,
527
527
  "character": 17,
528
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L10"
528
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L10"
529
529
  }
530
530
  ],
531
531
  "extendedTypes": [
@@ -548,7 +548,7 @@
548
548
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
549
549
  "line": 1,
550
550
  "character": 12,
551
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L1"
551
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L1"
552
552
  }
553
553
  ],
554
554
  "type": {
@@ -582,7 +582,7 @@
582
582
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
583
583
  "line": 11,
584
584
  "character": 13,
585
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L11"
585
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L11"
586
586
  }
587
587
  ],
588
588
  "type": {
@@ -613,9 +613,9 @@
613
613
  "sources": [
614
614
  {
615
615
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/Table.tsx",
616
- "line": 17,
616
+ "line": 71,
617
617
  "character": 13,
618
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L17"
618
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/Table.tsx#L71"
619
619
  }
620
620
  ],
621
621
  "signatures": [
@@ -691,7 +691,7 @@
691
691
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx",
692
692
  "line": 18,
693
693
  "character": 13,
694
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L18"
694
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/TableRow.tsx#L18"
695
695
  }
696
696
  ],
697
697
  "signatures": [
@@ -767,7 +767,7 @@
767
767
  "fileName": "packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts",
768
768
  "line": 18,
769
769
  "character": 13,
770
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L18"
770
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/components/Table/PayloadTableColumnConfig.ts#L18"
771
771
  }
772
772
  ],
773
773
  "signatures": [
@@ -821,7 +821,7 @@
821
821
  "fileName": "packages/sdk/packages/payload-table/src/index.ts",
822
822
  "line": 1,
823
823
  "character": 0,
824
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eb2d0440/packages/sdk/packages/payload-table/src/index.ts#L1"
824
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/98da10b5/packages/sdk/packages/payload-table/src/index.ts#L1"
825
825
  }
826
826
  ]
827
827
  }
package/dist/esm/components/DynamicTable/Table.d.ts.map CHANGED
@@ -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
@@ -1,21 +1,60 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Alert, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
2
+ import FirstPageIcon from '@mui/icons-material/FirstPage';
3
+ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
4
+ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
5
+ import LastPageIcon from '@mui/icons-material/LastPage';
6
+ import { Alert, Box, IconButton, Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, Typography, useTheme, } from '@mui/material';
3
7
  import { useBreakpoint } from '@xylabs/react-shared';
4
8
  import { XyoPayloadWrapper } from '@xyo-network/payload';
5
9
  import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service';
10
+ import { useState } from 'react';
6
11
  import { PayloadDynamicTableRow } from './DynamicTableRow';
7
12
  import { payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig';
13
+ function TablePaginationActions(props) {
14
+ const theme = useTheme();
15
+ const { count, page, rowsPerPage, onPageChange } = props;
16
+ const handleFirstPageButtonClick = (event) => {
17
+ onPageChange(event, 0);
18
+ };
19
+ const handleBackButtonClick = (event) => {
20
+ onPageChange(event, page - 1);
21
+ };
22
+ const handleNextButtonClick = (event) => {
23
+ onPageChange(event, page + 1);
24
+ };
25
+ const handleLastPageButtonClick = (event) => {
26
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
27
+ };
28
+ 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, {}) })] }));
29
+ }
8
30
  export const PayloadDynamicTable = ({ exploreDomain, archive, onRowClick, payloads, children, columns = payloadDynamicTableColumnConfigDefaults(), ...props }) => {
9
31
  const breakPoint = useBreakpoint();
10
- return breakPoint ? (_jsxs(Table, { ...props, stickyHeader: true, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
32
+ const [page, setPage] = useState(0);
33
+ const [rowsPerPage, setRowsPerPage] = useState(5);
34
+ const payloadCount = payloads ? payloads.length : 0;
35
+ // Avoid a layout jump when reaching the last page with empty rows.
36
+ const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0;
37
+ const handleChangePage = (event, newPage) => {
38
+ setPage(newPage);
39
+ };
40
+ const handleChangeRowsPerPage = (event) => {
41
+ setRowsPerPage(parseInt(event.target.value, 10));
42
+ setPage(0);
43
+ };
44
+ return breakPoint ? (_jsxs(Table, { stickyHeader: true, ...props, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
11
45
  return (_jsx(TableCell, { align: column.alignment ?? 'left', width: column.width, children: _jsx(Typography, { variant: "body2", noWrap: true, children: column.name }) }, index));
12
- }) }) }), _jsxs(TableBody, { children: [payloads?.map((payload, index) => {
46
+ }) }) }), _jsxs(TableBody, { sx: { overflowY: 'scroll ' }, children: [payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
13
47
  const wrapper = new XyoPayloadWrapper(payload);
14
48
  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
15
49
  ? () => {
16
50
  onRowClick(payload);
17
51
  }
18
52
  : undefined, exploreDomain: exploreDomain, payload: payload }) }, `${wrapper.hash}-${index}`));
19
- }), children] })] })) : null;
53
+ }), 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: {
54
+ inputProps: {
55
+ 'aria-label': 'rows per page',
56
+ },
57
+ native: true,
58
+ }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: TablePaginationActions }) }) })] })) : null;
20
59
  };
21
60
  //# sourceMappingURL=Table.js.map
package/dist/esm/components/DynamicTable/Table.js.map CHANGED
@@ -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
@@ -1,6 +1,6 @@
1
- /// <reference types="react" />
2
1
  import { TableProps } from '@mui/material';
3
2
  import { XyoPayload } from '@xyo-network/payload';
3
+ import * as React from 'react';
4
4
  import { PayloadTableColumnConfig } from './PayloadTableColumnConfig';
5
5
  export interface PayloadTableProps extends TableProps {
6
6
  exploreDomain?: string;
package/dist/esm/components/Table/Table.d.ts.map CHANGED
@@ -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
@@ -1,21 +1,64 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Alert, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
2
+ import FirstPageIcon from '@mui/icons-material/FirstPage';
3
+ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
4
+ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
5
+ import LastPageIcon from '@mui/icons-material/LastPage';
6
+ import { Alert, Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, Typography } from '@mui/material';
7
+ import Box from '@mui/material/Box';
8
+ import IconButton from '@mui/material/IconButton';
9
+ import { useTheme } from '@mui/material/styles';
3
10
  import { useBreakpoint } from '@xylabs/react-shared';
4
11
  import { XyoPayloadWrapper } from '@xyo-network/payload';
5
12
  import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service';
13
+ import { useState } from 'react';
6
14
  import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig';
7
15
  import { PayloadTableRow } from './TableRow';
16
+ function TablePaginationActions(props) {
17
+ const theme = useTheme();
18
+ const { count, page, rowsPerPage, onPageChange } = props;
19
+ const handleFirstPageButtonClick = (event) => {
20
+ onPageChange(event, 0);
21
+ };
22
+ const handleBackButtonClick = (event) => {
23
+ onPageChange(event, page - 1);
24
+ };
25
+ const handleNextButtonClick = (event) => {
26
+ onPageChange(event, page + 1);
27
+ };
28
+ const handleLastPageButtonClick = (event) => {
29
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
30
+ };
31
+ 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, {}) })] }));
32
+ }
8
33
  export const PayloadTable = ({ exploreDomain, archive, onRowClick, payloads, children, columns = payloadTableColumnConfigDefaults(), ...props }) => {
9
34
  const breakPoint = useBreakpoint();
10
- return breakPoint ? (_jsxs(Table, { ...props, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
35
+ const [page, setPage] = useState(0);
36
+ const [rowsPerPage, setRowsPerPage] = useState(5);
37
+ const payloadCount = payloads ? payloads.length : 0;
38
+ // Avoid a layout jump when reaching the last page with empty rows.
39
+ const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0;
40
+ const handleChangePage = (event, newPage) => {
41
+ setPage(newPage);
42
+ };
43
+ const handleChangeRowsPerPage = (event) => {
44
+ setRowsPerPage(parseInt(event.target.value, 10));
45
+ setPage(0);
46
+ };
47
+ return breakPoint ? (_jsxs(Table, { stickyHeader: true, ...props, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
11
48
  return (_jsx(TableCell, { width: index === 0 ? '100%' : undefined, align: index === 0 ? 'left' : 'center', children: _jsx(Typography, { variant: "body2", noWrap: true, children: payloadColumnNames[column] }) }, index));
12
- }) }) }), _jsxs(TableBody, { children: [payloads?.map((payload, index) => {
49
+ }) }) }), _jsxs(TableBody, { sx: { overflowY: 'scroll ' }, children: [payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
50
+ // {payloads?.map((payload, index) => {
13
51
  const wrapper = new XyoPayloadWrapper(payload);
14
52
  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
15
53
  ? () => {
16
54
  onRowClick(payload);
17
55
  }
18
56
  : undefined, exploreDomain: exploreDomain, payload: payload }) }, `${wrapper.hash}-${index}`));
19
- }), children] })] })) : null;
57
+ }), 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: {
58
+ inputProps: {
59
+ 'aria-label': 'rows per page',
60
+ },
61
+ native: true,
62
+ }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage, ActionsComponent: TablePaginationActions }) }) })] })) : null;
20
63
  };
21
64
  //# sourceMappingURL=Table.js.map
package/dist/esm/components/Table/Table.js.map CHANGED
@@ -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":";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,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAc,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7I,OAAO,GAAG,MAAM,mBAAmB,CAAA;AACnC,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,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,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,kBAAkB,EAA4B,gCAAgC,EAAE,MAAM,4BAA4B,CAAA;AAC3H,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAiB5C,SAAS,sBAAsB,CAAC,KAAkC;IAChE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IAExD,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,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,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAa,WAAW,YACrH,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,CACP,CAAA;AACH,CAAC;AAED,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,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACnC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjD,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IACnD,mEAAmE;IACnE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAErF,MAAM,gBAAgB,GAAG,CAAC,KAAiD,EAAE,OAAe,EAAE,EAAE;QAC9F,OAAO,CAAC,OAAO,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,uBAAuB,GAAG,CAAC,KAAgE,EAAE,EAAE;QACnG,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;QAChD,OAAO,CAAC,CAAC,CAAC,CAAA;IACZ,CAAC,CAAA;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,MAAC,KAAK,IAAC,YAAY,WAAK,KAAK,aAC3B,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,IAAC,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aACpC,QAAQ,EAAE,KAAK,CAAC,IAAI,GAAG,WAAW,EAAE,IAAI,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;wBAC5F,uCAAuC;wBACvC,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,EACR,SAAS,GAAG,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,KAAC,eAAe,KAAG,CAAC,IAClD,EACZ,KAAC,WAAW,cACV,KAAC,QAAQ,cACP,KAAC,eAAe,IACd,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAC5D,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE;4BACX,UAAU,EAAE;gCACV,YAAY,EAAE,eAAe;6BAC9B;4BACD,MAAM,EAAE,IAAI;yBACb,EACD,YAAY,EAAE,gBAAgB,EAC9B,mBAAmB,EAAE,uBAAuB,EAC5C,gBAAgB,EAAE,sBAAsB,GACxC,GACO,GACC,IACR,CACT,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA"}
package/package.json CHANGED
@@ -15,10 +15,10 @@
15
15
  "@mui/icons-material": "^5.10.3",
16
16
  "@mui/material": "^5.10.3",
17
17
  "@xylabs/react-shared": "^2.14.14",
18
- "@xyo-network/react-auth-service": "^2.32.0-rc.8",
19
- "@xyo-network/react-network": "^2.32.0-rc.8",
20
- "@xyo-network/react-payload-plugin": "^2.32.0-rc.8",
21
- "@xyo-network/react-shared": "^2.32.0-rc.8",
18
+ "@xyo-network/react-auth-service": "^2.32.0-rc.9",
19
+ "@xyo-network/react-network": "^2.32.0-rc.9",
20
+ "@xyo-network/react-payload-plugin": "^2.32.0-rc.9",
21
+ "@xyo-network/react-shared": "^2.32.0-rc.9",
22
22
  "react": "^18.2.0",
23
23
  "react-dom": "^18.2.0",
24
24
  "react-icons": "^4.4.0",
@@ -71,6 +71,6 @@
71
71
  },
72
72
  "sideEffects": false,
73
73
  "types": "dist/esm/index.d.ts",
74
- "version": "2.32.0-rc.8",
74
+ "version": "2.32.0-rc.9",
75
75
  "stableVersion": "2.31.3"
76
76
  }
package/src/components/DynamicTable/DynamicTable.stories.tsx CHANGED
@@ -32,7 +32,27 @@ Default.args = {}
32
32
  Default.decorators = [useAppThemeDecorator]
33
33
 
34
34
  const WithData = Template.bind({})
35
- WithData.args = { payloads: [samplePayload, sampleUniswapPayload, sampleCoinGeckoPayload, samplePayload, sampleUniswapPayload] }
35
+ WithData.args = {
36
+ payloads: [
37
+ samplePayload,
38
+ sampleUniswapPayload,
39
+ sampleCoinGeckoPayload,
40
+ samplePayload,
41
+ sampleUniswapPayload,
42
+ samplePayload,
43
+ sampleUniswapPayload,
44
+ sampleCoinGeckoPayload,
45
+ samplePayload,
46
+ sampleUniswapPayload,
47
+ samplePayload,
48
+ sampleUniswapPayload,
49
+ sampleCoinGeckoPayload,
50
+ samplePayload,
51
+ sampleUniswapPayload,
52
+ samplePayload,
53
+ sampleUniswapPayload,
54
+ ],
55
+ }
36
56
  WithData.decorators = [useAppThemeDecorator]
37
57
 
38
58
  const WithError = Template.bind({})
package/src/components/DynamicTable/Table.tsx CHANGED
@@ -1,7 +1,26 @@
1
- import { Alert, Table, TableBody, TableCell, TableHead, TableProps, TableRow, Typography } from '@mui/material'
1
+ import FirstPageIcon from '@mui/icons-material/FirstPage'
2
+ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
3
+ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
4
+ import LastPageIcon from '@mui/icons-material/LastPage'
5
+ import {
6
+ Alert,
7
+ Box,
8
+ IconButton,
9
+ Table,
10
+ TableBody,
11
+ TableCell,
12
+ TableFooter,
13
+ TableHead,
14
+ TablePagination,
15
+ TableProps,
16
+ TableRow,
17
+ Typography,
18
+ useTheme,
19
+ } from '@mui/material'
2
20
  import { useBreakpoint } from '@xylabs/react-shared'
3
21
  import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
4
22
  import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
23
+ import { useState } from 'react'
5
24
 
6
25
  import { PayloadDynamicTableRow } from './DynamicTableRow'
7
26
  import { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'
@@ -14,6 +33,51 @@ export interface PayloadDynamicTableProps extends TableProps {
14
33
  columns?: PayloadDynamicTableColumnConfig
15
34
  }
16
35
 
36
+ interface TablePaginationActionsProps {
37
+ count: number
38
+ page: number
39
+ rowsPerPage: number
40
+ onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void
41
+ }
42
+
43
+ function TablePaginationActions(props: TablePaginationActionsProps) {
44
+ const theme = useTheme()
45
+ const { count, page, rowsPerPage, onPageChange } = props
46
+
47
+ const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
48
+ onPageChange(event, 0)
49
+ }
50
+
51
+ const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
52
+ onPageChange(event, page - 1)
53
+ }
54
+
55
+ const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
56
+ onPageChange(event, page + 1)
57
+ }
58
+
59
+ const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
60
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
61
+ }
62
+
63
+ return (
64
+ <Box sx={{ flexShrink: 0, ml: 2.5 }}>
65
+ <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
66
+ {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
67
+ </IconButton>
68
+ <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
69
+ {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
70
+ </IconButton>
71
+ <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
72
+ {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
73
+ </IconButton>
74
+ <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
75
+ {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
76
+ </IconButton>
77
+ </Box>
78
+ )
79
+ }
80
+
17
81
  export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
18
82
  exploreDomain,
19
83
  archive,
@@ -24,8 +88,23 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
24
88
  ...props
25
89
  }) => {
26
90
  const breakPoint = useBreakpoint()
91
+ const [page, setPage] = useState(0)
92
+ const [rowsPerPage, setRowsPerPage] = useState(5)
93
+ const payloadCount = payloads ? payloads.length : 0
94
+ // Avoid a layout jump when reaching the last page with empty rows.
95
+ const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0
96
+
97
+ const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
98
+ setPage(newPage)
99
+ }
100
+
101
+ const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
102
+ setRowsPerPage(parseInt(event.target.value, 10))
103
+ setPage(0)
104
+ }
105
+
27
106
  return breakPoint ? (
28
- <Table {...props} stickyHeader>
107
+ <Table stickyHeader {...props}>
29
108
  <TableHead>
30
109
  <TableRow>
31
110
  {columns[breakPoint]?.map((column, index) => {
@@ -39,8 +118,8 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
39
118
  })}
40
119
  </TableRow>
41
120
  </TableHead>
42
- <TableBody>
43
- {payloads?.map((payload, index) => {
121
+ <TableBody sx={{ overflowY: 'scroll ' }}>
122
+ {payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
44
123
  const wrapper = new XyoPayloadWrapper(payload)
45
124
  return (
46
125
  <XyoApiThrownErrorBoundary
@@ -67,7 +146,28 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
67
146
  )
68
147
  })}
69
148
  {children}
149
+ {emptyRows > 0 && Array(emptyRows).fill(<PayloadDynamicTableRow />)}
70
150
  </TableBody>
151
+ <TableFooter>
152
+ <TableRow>
153
+ <TablePagination
154
+ rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
155
+ colSpan={5}
156
+ count={payloadCount}
157
+ rowsPerPage={rowsPerPage}
158
+ page={page}
159
+ SelectProps={{
160
+ inputProps: {
161
+ 'aria-label': 'rows per page',
162
+ },
163
+ native: true,
164
+ }}
165
+ onPageChange={handleChangePage}
166
+ onRowsPerPageChange={handleChangeRowsPerPage}
167
+ ActionsComponent={TablePaginationActions}
168
+ />
169
+ </TableRow>
170
+ </TableFooter>
71
171
  </Table>
72
172
  ) : null
73
173
  }
package/src/components/Table/Table.stories.tsx CHANGED
@@ -26,7 +26,41 @@ Default.args = {}
26
26
  Default.decorators = [useAppThemeDecorator]
27
27
 
28
28
  const WithData = Template.bind({})
29
- WithData.args = { payloads: [samplePayload, samplePayload] }
29
+ WithData.args = {
30
+ payloads: [
31
+ samplePayload,
32
+ samplePayload,
33
+ samplePayload,
34
+ samplePayload,
35
+ samplePayload,
36
+ samplePayload,
37
+ samplePayload,
38
+ samplePayload,
39
+ samplePayload,
40
+ samplePayload,
41
+ samplePayload,
42
+ samplePayload,
43
+ samplePayload,
44
+ samplePayload,
45
+ samplePayload,
46
+ samplePayload,
47
+ samplePayload,
48
+ samplePayload,
49
+ samplePayload,
50
+ samplePayload,
51
+ samplePayload,
52
+ samplePayload,
53
+ samplePayload,
54
+ samplePayload,
55
+ samplePayload,
56
+ samplePayload,
57
+ samplePayload,
58
+ samplePayload,
59
+ samplePayload,
60
+ samplePayload,
61
+ samplePayload,
62
+ ],
63
+ }
30
64
  WithData.decorators = [useAppThemeDecorator]
31
65
 
32
66
  const WithError = Template.bind({})
package/src/components/Table/Table.tsx CHANGED
@@ -1,7 +1,16 @@
1
- import { Alert, Table, TableBody, TableCell, TableHead, TableProps, TableRow, Typography } from '@mui/material'
1
+ import FirstPageIcon from '@mui/icons-material/FirstPage'
2
+ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
3
+ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
4
+ import LastPageIcon from '@mui/icons-material/LastPage'
5
+ import { Alert, Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableProps, TableRow, Typography } from '@mui/material'
6
+ import Box from '@mui/material/Box'
7
+ import IconButton from '@mui/material/IconButton'
8
+ import { useTheme } from '@mui/material/styles'
2
9
  import { useBreakpoint } from '@xylabs/react-shared'
3
10
  import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
4
11
  import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
12
+ import * as React from 'react'
13
+ import { useState } from 'react'
5
14
 
6
15
  import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
7
16
  import { PayloadTableRow } from './TableRow'
@@ -14,6 +23,51 @@ export interface PayloadTableProps extends TableProps {
14
23
  columns?: PayloadTableColumnConfig
15
24
  }
16
25
 
26
+ interface TablePaginationActionsProps {
27
+ count: number
28
+ page: number
29
+ rowsPerPage: number
30
+ onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void
31
+ }
32
+
33
+ function TablePaginationActions(props: TablePaginationActionsProps) {
34
+ const theme = useTheme()
35
+ const { count, page, rowsPerPage, onPageChange } = props
36
+
37
+ const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
38
+ onPageChange(event, 0)
39
+ }
40
+
41
+ const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
42
+ onPageChange(event, page - 1)
43
+ }
44
+
45
+ const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
46
+ onPageChange(event, page + 1)
47
+ }
48
+
49
+ const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
50
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
51
+ }
52
+
53
+ return (
54
+ <Box sx={{ flexShrink: 0, ml: 2.5 }}>
55
+ <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
56
+ {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
57
+ </IconButton>
58
+ <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
59
+ {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
60
+ </IconButton>
61
+ <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
62
+ {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
63
+ </IconButton>
64
+ <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
65
+ {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
66
+ </IconButton>
67
+ </Box>
68
+ )
69
+ }
70
+
17
71
  export const PayloadTable: React.FC<PayloadTableProps> = ({
18
72
  exploreDomain,
19
73
  archive,
@@ -24,8 +78,23 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
24
78
  ...props
25
79
  }) => {
26
80
  const breakPoint = useBreakpoint()
81
+ const [page, setPage] = useState(0)
82
+ const [rowsPerPage, setRowsPerPage] = useState(5)
83
+ const payloadCount = payloads ? payloads.length : 0
84
+ // Avoid a layout jump when reaching the last page with empty rows.
85
+ const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0
86
+
87
+ const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
88
+ setPage(newPage)
89
+ }
90
+
91
+ const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
92
+ setRowsPerPage(parseInt(event.target.value, 10))
93
+ setPage(0)
94
+ }
95
+
27
96
  return breakPoint ? (
28
- <Table {...props}>
97
+ <Table stickyHeader {...props}>
29
98
  <TableHead>
30
99
  <TableRow>
31
100
  {columns[breakPoint]?.map((column, index) => {
@@ -39,8 +108,9 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
39
108
  })}
40
109
  </TableRow>
41
110
  </TableHead>
42
- <TableBody>
43
- {payloads?.map((payload, index) => {
111
+ <TableBody sx={{ overflowY: 'scroll ' }}>
112
+ {payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
113
+ // {payloads?.map((payload, index) => {
44
114
  const wrapper = new XyoPayloadWrapper(payload)
45
115
  return (
46
116
  <XyoApiThrownErrorBoundary
@@ -67,7 +137,28 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
67
137
  )
68
138
  })}
69
139
  {children}
140
+ {emptyRows > 0 && Array(emptyRows).fill(<PayloadTableRow />)}
70
141
  </TableBody>
142
+ <TableFooter>
143
+ <TableRow>
144
+ <TablePagination
145
+ rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
146
+ colSpan={3}
147
+ count={payloadCount}
148
+ rowsPerPage={rowsPerPage}
149
+ page={page}
150
+ SelectProps={{
151
+ inputProps: {
152
+ 'aria-label': 'rows per page',
153
+ },
154
+ native: true,
155
+ }}
156
+ onPageChange={handleChangePage}
157
+ onRowsPerPageChange={handleChangeRowsPerPage}
158
+ ActionsComponent={TablePaginationActions}
159
+ />
160
+ </TableRow>
161
+ </TableFooter>
71
162
  </Table>
72
163
  ) : null
73
164
  }