87 lines
2.5 KiB
TypeScript
87 lines
2.5 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 } from "../styles/theme";
|
||
|
|
|
||
|
|
interface ListProps {
|
||
|
|
title: string;
|
||
|
|
rows: any;
|
||
|
|
columns: GridColDef<any>[];
|
||
|
|
onRowClick: (id: string) => void;
|
||
|
|
buttons?: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const List: FC<ListProps> = ({ title, rows, columns, onRowClick, buttons }) => {
|
||
|
|
const { h3 } = typography;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
|
||
|
|
<Grid container direction="column">
|
||
|
|
<Grid item container direction="row" justifyContent="space-between">
|
||
|
|
<Grid item>
|
||
|
|
<Box sx={h3}>{title}</Box>
|
||
|
|
</Grid>
|
||
|
|
<Grid item>
|
||
|
|
{buttons}
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
<Grid item>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
backgroundColor: "#ddd",
|
||
|
|
border: 0,
|
||
|
|
width: "100%",
|
||
|
|
height: "100vh",
|
||
|
|
".MuiDataGrid-row": {
|
||
|
|
cursor: "pointer",
|
||
|
|
"&:hover": {
|
||
|
|
backgroundColor: "#1982fc33 !important",
|
||
|
|
fontWeight: "bold",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
".MuiDataGrid-row:nth-of-type(1n)": {
|
||
|
|
backgroundColor: "#f3f3f3",
|
||
|
|
},
|
||
|
|
".MuiDataGrid-row:nth-of-type(2n)": {
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
},
|
||
|
|
".MuiDataGrid-columnHeaderTitle": {
|
||
|
|
color: "#333",
|
||
|
|
fontWeight: "bold",
|
||
|
|
fontSize: 11,
|
||
|
|
margin: "0 auto",
|
||
|
|
},
|
||
|
|
".MuiDataGrid-columnHeader": {
|
||
|
|
backgroundColor: "#ccc",
|
||
|
|
border: 0,
|
||
|
|
borderBottom: "3px solid #ddd",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DataGridPro
|
||
|
|
rows={rows}
|
||
|
|
columns={columns}
|
||
|
|
density="compact"
|
||
|
|
pagination
|
||
|
|
initialState={{
|
||
|
|
pagination: { paginationModel: { pageSize: 25 } },
|
||
|
|
}}
|
||
|
|
pageSizeOptions={[5, 10, 25]}
|
||
|
|
paginationMode="client"
|
||
|
|
sx={{ height: "100vh" }}
|
||
|
|
rowBuffer={30}
|
||
|
|
rowHeight={46}
|
||
|
|
scrollbarSize={0}
|
||
|
|
disableVirtualization
|
||
|
|
disableColumnMenu
|
||
|
|
onRowClick={(row: any) => onRowClick(row.id)}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|