link-stack/packages/ui/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 { 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={{
              mt: 2,
              backgroundColor: "#ddd",
              border: 0,
              width: "100%",
              height: "calc(100vh - 100px)",
              ".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: "100%" }}
              rowHeight={46}
              scrollbarSize={0}
              disableVirtualization
              disableColumnMenu
              onRowClick={(row: any) => onRowClick?.(row.id)}
            />
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
};