brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added load more function to the responsive table for mobile view

Browse source
This commit is contained in:
csawatzky 2025-05-23 15:15:55 -06:00
parent 746cfdf8a9
commit d6a76203ef
2 changed files with 43 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/common/ResponsiveTable.tsx
View file

@ -1,6 +1,6 @@
import { Box, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
import { ArrowDownward, ArrowLeft, ArrowRight, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
import { useEffect, useState } from "react";
import React from "react";
import { useMobile } from "hooks";
@ -98,7 +98,7 @@ interface Props<T> {
setOrderBy?: React.Dispatch<React.SetStateAction<string>>;
order?: string;
setOrder?: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
loadMore?: () => void
}
export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@ -131,14 +131,14 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
orderBy,
setOrderBy,
order,
setOrder
setOrder,
loadMore
} = props
const classes = useStyles();
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
const title = typeof(props.title) === "function" ? props.title() : props.title
// const order = props.order ? props.order : "asc"
const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement
const isMobile = useMobile()
@ -320,13 +320,11 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
if (isMobile || mobileView) return (
<Box>
<Box className={classes.mobileTitleBox}>
{renderTitle()}
{renderSubtitle()}
{setSearchText && searchBar()}
</Box>
{rows.map((row, index) => {
return (
<Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
@ -375,6 +373,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
</Box>
)
}
{(loadMore && rows.length < total) &&
<Box>
<Button
onClick={loadMore}
color="primary"
sx={{width: "100%"}}
variant="contained">
Load More
</Button>
</Box>
}
</Box>
)
@ -426,9 +435,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
<Grid2>
{actions && actions}
</Grid2>
<Grid2>
{endTitleElement}
</Grid2>
<Grid2>
{setSearchText &&<Box className={classes.searchContainer}>
{searchBar()}