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

package/src/components/DynamicTable/Table.tsx

@@ -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 { useEffect, useState } from 'react'
 
 import { PayloadDynamicTableRow } from './DynamicTableRow'
 import { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'
@@ -10,22 +29,88 @@ export interface PayloadDynamicTableProps extends TableProps {
   exploreDomain?: string
   archive?: string
   onRowClick?: (value: XyoPayload) => void
+  rowsPerPage?: number
   payloads?: XyoPayload[] | null
   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,
   onRowClick,
+  rowsPerPage: rowsPerPageProp = 10,
   payloads,
   children,
   columns = payloadDynamicTableColumnConfigDefaults(),
   ...props
 }) => {
   const breakPoint = useBreakpoint()
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
+  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
+
+  useEffect(() => {
+    setRowsPerPage(rowsPerPageProp)
+  }, [rowsPerPageProp])
+
+  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 +124,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 +152,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

@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { samplePayload, useAppThemeDecorator } from '@xyo-network/react-storybook'
+import { sampleIdPayload, sampleSystemInfoBrowserPayload, useAppThemeDecorator } from '@xyo-network/react-storybook'
 import { BrowserRouter } from 'react-router-dom'
 
 import { PayloadTable } from './Table'
@@ -26,16 +26,33 @@ Default.args = {}
 Default.decorators = [useAppThemeDecorator]
 
 const WithData = Template.bind({})
-WithData.args = { payloads: [samplePayload, samplePayload] }
+WithData.args = {
+  payloads: [
+    sampleIdPayload,
+    sampleSystemInfoBrowserPayload,
+    sampleIdPayload,
+    sampleSystemInfoBrowserPayload,
+    sampleIdPayload,
+    sampleSystemInfoBrowserPayload,
+    sampleIdPayload,
+    sampleSystemInfoBrowserPayload,
+    sampleIdPayload,
+    sampleSystemInfoBrowserPayload,
+    sampleIdPayload,
+    sampleSystemInfoBrowserPayload,
+    sampleIdPayload,
+    sampleSystemInfoBrowserPayload,
+  ],
+}
 WithData.decorators = [useAppThemeDecorator]
 
 const WithError = Template.bind({})
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { _hash, ...badPayload } = samplePayload
+const { ...badPayload } = sampleIdPayload
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
-WithError.args = { payloads: [samplePayload, badPayload] }
+WithError.args = { payloads: [sampleIdPayload, badPayload] }
 
 export { Default, WithData, WithError }
 

package/src/components/Table/Table.tsx

@@ -1,7 +1,16 @@
-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, Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableProps, 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 { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
 import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
+import * as React from 'react'
+import { useEffect, useState } from 'react'
 
 import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
 import { PayloadTableRow } from './TableRow'
@@ -10,22 +19,88 @@ export interface PayloadTableProps extends TableProps {
   exploreDomain?: string
   archive?: string
   onRowClick?: (value: XyoPayload) => void
+  rowsPerPage?: number
   payloads?: XyoPayload[] | null
   columns?: PayloadTableColumnConfig
 }
 
+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 PayloadTable: React.FC<PayloadTableProps> = ({
   exploreDomain,
   archive,
   onRowClick,
+  rowsPerPage: rowsPerPageProp = 10,
   payloads,
   children,
   columns = payloadTableColumnConfigDefaults(),
   ...props
 }) => {
   const breakPoint = useBreakpoint()
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
+  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
+
+  useEffect(() => {
+    setRowsPerPage(rowsPerPageProp)
+  }, [rowsPerPageProp])
+
+  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}>
+    <Table stickyHeader {...props}>
       <TableHead>
         <TableRow>
           {columns[breakPoint]?.map((column, index) => {
@@ -39,13 +114,14 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
           })}
         </TableRow>
       </TableHead>
-      <TableBody>
-        {payloads?.map((payload, index) => {
+      <TableBody sx={{ overflowY: 'scroll ' }}>
+        {payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
+          // {payloads?.map((payload, index) => {
           const wrapper = new XyoPayloadWrapper(payload)
           return (
             <XyoApiThrownErrorBoundary
               key={`${wrapper.hash}-${index}`}
-              errorComponent={(e) => (
+              errorComponent={(e: Error) => (
                 <Alert severity="error">
                   Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
                 </Alert>
@@ -67,7 +143,28 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
           )
         })}
         {children}
+        {emptyRows > 0 && Array(emptyRows).fill(<PayloadTableRow />)}
       </TableBody>
+      <TableFooter>
+        <TableRow>
+          <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}
+          />
+        </TableRow>
+      </TableFooter>
     </Table>
   ) : null
 }

package/src/components/Table/TableRow.tsx

@@ -1,9 +1,11 @@
-import { TableCell, TableCellProps, TableRow, TableRowProps, 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, TableCellProps, TableRow, TableRowProps, Typography } from '@mui/material'
 import { useBreakpoint } from '@xylabs/react-shared'
 import { XyoPayload, 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 { PayloadTableColumnConfig, payloadTableColumnConfigDefaults, PayloadTableColumnSlug } from './PayloadTableColumnConfig'
 
@@ -52,15 +54,16 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
 
   const valid: React.FC<TableCellProps> = (props) => (
     <TableCell key="valid" align="center" {...props}>
-      <Typography fontFamily="monospace" variant="body2" noWrap>
-        {isValid === undefined ? (
-          <MdDone fontSize={18} color="yellow" />
-        ) : isValid ? (
-          <MdDone fontSize={18} color="green" />
-        ) : (
-          <MdClear color="red" fontSize={18} />
-        )}
-      </Typography>
+      {isValid === undefined && payload != undefined ? (
+        <WarningAmberRoundedIcon fontSize="small" color="warning" />
+      ) : isValid === true ? (
+        <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
+      ) : isValid === false ? (
+        <ErrorOutlineRoundedIcon color="error" fontSize="small" />
+      ) : (
+        //to keep row height consistent when no data provided, may need fix later
+        <ErrorOutlineRoundedIcon sx={{ color: alpha('#fff', 0) }} fontSize="small" />
+      )}
     </TableCell>
   )
 

package/src/components/index.ts

@@ -1 +1,2 @@
+export * from './DynamicTable'
 export * from './Table'