link-stack/apps/bridge-frontend/app/_components/List.tsx

"use client";

import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
import { useRouter } from "next/navigation";
import { typography } from "@/app/_styles/theme";

interface ListProps {
  title: string;
  entity: string;
  rows: any;
  columns: GridColDef<any>[];
}

export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
  const router = useRouter();
  const { h3 } = typography;

  const onRowClick = (id: string) => {
    router.push(`/${entity}/${id}`);
  };

  return (
    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
      <Grid container direction="column">
        <Grid item>
          <Box sx={h3}>{title}</Box>
        </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>
  );
};