377 lines
11 KiB
TypeScript
377 lines
11 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Grid from "@mui/material/Grid";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import Paper from "@mui/material/Paper";
|
|
import Table from "@mui/material/Table";
|
|
import TableBody from "@mui/material/TableBody";
|
|
import TableCell from "@mui/material/TableCell";
|
|
import TableContainer from "@mui/material/TableContainer";
|
|
import TableHead from "@mui/material/TableHead";
|
|
import TableRow from "@mui/material/TableRow";
|
|
import Collapse from "@mui/material/Collapse";
|
|
|
|
import IconButton from "@mui/material/IconButton";
|
|
import {
|
|
ChevronsLeft,
|
|
ChevronsRight,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
} from "lucide-react";
|
|
|
|
import TablePagination from "@mui/material/TablePagination";
|
|
import type { TablePaginationProps } from "@mui/material/TablePagination";
|
|
|
|
import { useState, Fragment } from "react";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
|
|
export type Header<T> = {
|
|
id: number | string;
|
|
content: React.ReactNode;
|
|
onClick?: (
|
|
event: React.MouseEvent<HTMLTableCellElement | null>,
|
|
row: T
|
|
) => void;
|
|
render: (row: T) => React.ReactNode;
|
|
};
|
|
|
|
type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
|
|
{
|
|
headers: Header<T>[];
|
|
data: T[];
|
|
onRowClick?: (row: T) => void;
|
|
cardsOnSmallScreens?: boolean;
|
|
expandableRows?: boolean;
|
|
renderExpandedContent?: (row: T) => React.ReactNode;
|
|
};
|
|
|
|
export function DataTable<
|
|
T extends {
|
|
id?: string | number;
|
|
_id?: string | number;
|
|
onRowClick?: (row: T) => void;
|
|
},
|
|
>({
|
|
headers,
|
|
data,
|
|
onRowClick,
|
|
cardsOnSmallScreens = true,
|
|
expandableRows = false,
|
|
renderExpandedContent,
|
|
}: DataTableProps<T>) {
|
|
const theme = useTheme();
|
|
const [expanded, setExpanded] = useState<(string | number) | null>(null);
|
|
const handleExpand = (row: T) => {
|
|
const key = row.id || row._id || null;
|
|
setExpanded(expanded === key ? null : key);
|
|
};
|
|
|
|
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
|
if (data.length === 0 || headers.length === 0) return <EmptyView />;
|
|
|
|
const keys = [];
|
|
// Return stack of cards for small screens
|
|
if (isSmall && cardsOnSmallScreens) {
|
|
return (
|
|
<Stack spacing={theme.spacing(4)}>
|
|
{data.map((row) => {
|
|
const key = row.id || row._id || Math.random();
|
|
keys.push(key);
|
|
return (
|
|
<Stack
|
|
onClick={() => (onRowClick ? onRowClick(row) : null)}
|
|
spacing={theme.spacing(4)}
|
|
sx={{
|
|
borderStyle: "solid",
|
|
borderWidth: 1,
|
|
borderColor: theme.palette.divider,
|
|
borderRadius: theme.shape.borderRadius,
|
|
padding: theme.spacing(4),
|
|
cursor: onRowClick ? "pointer" : "default",
|
|
}}
|
|
key={key}
|
|
>
|
|
{headers.map((header) => {
|
|
return (
|
|
<Grid container key={header.id}>
|
|
<Grid size={3} display={"flex"} alignItems={"center"}>
|
|
<Typography color={theme.palette.text.primary}>
|
|
{header.content}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid size={9} display="flex" alignItems={"center"}>
|
|
{header.render(row)}{" "}
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
})}
|
|
{expandableRows &&
|
|
renderExpandedContent &&
|
|
renderExpandedContent(row) && (
|
|
<Grid size={12}>{renderExpandedContent(row)}</Grid>
|
|
)}
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TableContainer component={Paper} elevation={0} sx={{ boxShadow: "none" }}>
|
|
<Table
|
|
sx={{
|
|
"&.MuiTable-root :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)":
|
|
{
|
|
paddingLeft: theme.spacing(8),
|
|
},
|
|
"& .MuiTableCell-root": {
|
|
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
},
|
|
"& .MuiTableHead-root .MuiTableRow-root": {
|
|
height: "28px",
|
|
},
|
|
"& :is(th)": {
|
|
backgroundColor: theme.palette.background.paper,
|
|
color: theme.palette.text.secondary,
|
|
fontWeight: 500,
|
|
textTransform: "uppercase",
|
|
padding: `${theme.spacing(2)} ${theme.spacing(8)}`,
|
|
fontSize: theme.typography.fontSize,
|
|
},
|
|
"& :is(td)": {
|
|
backgroundColor: theme.palette.background.paper,
|
|
color: theme.palette.text.secondary,
|
|
padding: `${theme.spacing(7)} ${theme.spacing(8)}`,
|
|
fontSize: theme.typography.fontSize,
|
|
},
|
|
"& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root":
|
|
{
|
|
borderBottom: "none",
|
|
},
|
|
}}
|
|
>
|
|
<TableHead>
|
|
<TableRow>
|
|
{headers.map((header, idx) => {
|
|
return (
|
|
<TableCell
|
|
align={idx === 0 ? "left" : "center"}
|
|
key={header.id}
|
|
>
|
|
{header.content}
|
|
</TableCell>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data.map((row) => {
|
|
const key = row.id || row._id || Math.random();
|
|
const isExpanded = expanded === key;
|
|
|
|
return (
|
|
<Fragment key={key}>
|
|
<TableRow
|
|
sx={{
|
|
cursor: onRowClick ? "pointer" : "default",
|
|
}}
|
|
onClick={() => {
|
|
if (expandableRows) handleExpand(row);
|
|
else if (onRowClick) onRowClick(row);
|
|
}}
|
|
>
|
|
{headers.map((header, index) => {
|
|
return (
|
|
<TableCell
|
|
align={index === 0 ? "left" : "center"}
|
|
key={header.id}
|
|
onClick={
|
|
header.onClick
|
|
? (e) => header.onClick!(e, row)
|
|
: undefined
|
|
}
|
|
>
|
|
{header.render(row)}
|
|
</TableCell>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
{expandableRows &&
|
|
renderExpandedContent &&
|
|
renderExpandedContent(row) && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={headers.length}
|
|
style={{
|
|
borderBottom: isExpanded ? undefined : "none",
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
}}
|
|
>
|
|
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
|
|
<Box sx={{ pt: 4, pb: 4 }}>
|
|
{renderExpandedContent(row)}
|
|
</Box>
|
|
</Collapse>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
}
|
|
|
|
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 }} className="table-pagination-actions">
|
|
<IconButton
|
|
onClick={handleFirstPageButtonClick}
|
|
disabled={page === 0}
|
|
aria-label="first page"
|
|
>
|
|
{theme.direction === "rtl" ? (
|
|
<ChevronsRight size={20} strokeWidth={1.5} />
|
|
) : (
|
|
<ChevronsLeft size={20} strokeWidth={1.5} />
|
|
)}
|
|
</IconButton>
|
|
<IconButton
|
|
onClick={handleBackButtonClick}
|
|
disabled={page === 0}
|
|
aria-label="previous page"
|
|
>
|
|
{theme.direction === "rtl" ? (
|
|
<ChevronRight size={20} strokeWidth={1.5} />
|
|
) : (
|
|
<ChevronLeft size={20} strokeWidth={1.5} />
|
|
)}
|
|
</IconButton>
|
|
<IconButton
|
|
onClick={handleNextButtonClick}
|
|
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
|
aria-label="next page"
|
|
>
|
|
{theme.direction === "rtl" ? (
|
|
<ChevronLeft size={20} strokeWidth={1.5} />
|
|
) : (
|
|
<ChevronRight size={20} strokeWidth={1.5} />
|
|
)}
|
|
</IconButton>
|
|
<IconButton
|
|
onClick={handleLastPageButtonClick}
|
|
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
|
aria-label="last page"
|
|
>
|
|
{theme.direction === "rtl" ? (
|
|
<ChevronsLeft size={20} strokeWidth={1.5} />
|
|
) : (
|
|
<ChevronsRight size={20} strokeWidth={1.5} />
|
|
)}
|
|
</IconButton>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export const Pagination: React.FC<TablePaginationProps> = ({ ...props }) => {
|
|
const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm"));
|
|
const theme = useTheme();
|
|
return (
|
|
<TablePagination
|
|
ActionsComponent={TablePaginationActions}
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
{...props}
|
|
sx={{
|
|
"& .MuiTablePagination-toolbar": {
|
|
display: isSmall ? "grid" : "flex",
|
|
},
|
|
"& .MuiTablePagination-selectLabel": {
|
|
gridColumn: "1",
|
|
gridRow: "1",
|
|
justifySelf: "center",
|
|
},
|
|
"& .MuiTablePagination-select": {
|
|
gridColumn: "2",
|
|
gridRow: "1",
|
|
justifySelf: "center",
|
|
},
|
|
"& .MuiTablePagination-displayedRows": {
|
|
gridColumn: "2",
|
|
gridRow: "2",
|
|
justifySelf: "center ",
|
|
},
|
|
"& .table-pagination-actions": {
|
|
gridColumn: "1",
|
|
gridRow: "2",
|
|
justifySelf: "center",
|
|
},
|
|
"& .MuiSelect-select": {
|
|
border: 1,
|
|
borderColor: theme.palette.divider,
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const EmptyView = () => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Stack
|
|
alignItems={"center"}
|
|
sx={{
|
|
p: theme.spacing(4),
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.palette.divider,
|
|
borderRadius: theme.shape.borderRadius,
|
|
}}
|
|
>
|
|
<Typography>No data</Typography>
|
|
</Stack>
|
|
);
|
|
};
|