111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { FC } from "react";
|
|
import { Grid, Box } from "@mui/material";
|
|
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
|
|
import { typography, colors } from "../styles/theme";
|
|
|
|
interface ListProps {
|
|
title: string;
|
|
rows: any;
|
|
columns: GridColDef<any>[];
|
|
onRowClick?: (id: string) => void;
|
|
getRowID?: (row: any) => any;
|
|
buttons?: React.ReactNode;
|
|
paginate?: boolean;
|
|
}
|
|
|
|
export const List: FC<ListProps> = ({
|
|
title,
|
|
rows,
|
|
columns,
|
|
onRowClick,
|
|
getRowID,
|
|
buttons,
|
|
paginate = false,
|
|
}) => {
|
|
const { h3 } = typography;
|
|
const { mediumGray, lightGray, veryLightGray, mediumBlue, white, darkGray } =
|
|
colors;
|
|
const getRowIDInternal = (row: any) => {
|
|
if (getRowID) {
|
|
return getRowID(row);
|
|
}
|
|
|
|
return row.id;
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ height: "100vh", backgroundColor: lightGray, p: 3 }}>
|
|
<Grid container direction="column">
|
|
<Grid
|
|
item
|
|
container
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
>
|
|
<Grid item xs="auto">
|
|
<Box sx={h3}>{title}</Box>
|
|
</Grid>
|
|
<Grid item xs="auto">
|
|
{buttons}
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item>
|
|
<Box
|
|
sx={{
|
|
mt: 2,
|
|
backgroundColor: "transparent",
|
|
border: 0,
|
|
width: "100%",
|
|
height: "calc(100vh - 100px)",
|
|
".MuiDataGrid-row": {
|
|
cursor: "pointer",
|
|
"&:hover": {
|
|
backgroundColor: `${mediumBlue}22 !important`,
|
|
},
|
|
},
|
|
".MuiDataGrid-row:nth-of-type(1n)": {
|
|
backgroundColor: white,
|
|
},
|
|
".MuiDataGrid-row:nth-of-type(2n)": {
|
|
backgroundColor: veryLightGray,
|
|
},
|
|
".MuiDataGrid-columnHeaderTitle": {
|
|
color: darkGray,
|
|
fontWeight: "bold",
|
|
fontSize: 11,
|
|
margin: "0 auto",
|
|
},
|
|
".MuiDataGrid-columnHeader": {
|
|
backgroundColor: mediumGray,
|
|
border: 0,
|
|
},
|
|
}}
|
|
>
|
|
<DataGridPro
|
|
rows={rows}
|
|
columns={columns}
|
|
density="compact"
|
|
pagination={paginate}
|
|
hideFooterRowCount={!paginate}
|
|
hideFooter={!paginate}
|
|
initialState={{
|
|
pagination: { paginationModel: { pageSize: 25 } },
|
|
}}
|
|
pageSizeOptions={[5, 10, 25]}
|
|
paginationMode="client"
|
|
sx={{ height: "100%" }}
|
|
rowHeight={46}
|
|
scrollbarSize={0}
|
|
disableVirtualization
|
|
disableColumnMenu
|
|
onRowClick={({ row }: any) => onRowClick?.(getRowIDInternal(row))}
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|