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, 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>
  );
};