adminFront/src/pages/dashboard/ModalUser/PurchaseTab.tsx

import { DataGrid } from "@mui/x-data-grid";
import { useTheme } from "@mui/material";

import type { GridColDef } from "@mui/x-data-grid";

const COLUMNS: GridColDef[] = [
  {
    field: "date",
    headerName: "Дата",
    width: 200,
    sortable: false,
  },
  {
    field: "time",
    headerName: "Время",
    width: 180,
    sortable: false,
  },
  {
    field: "product",
    headerName: "Товар",
    width: 280,
    sortable: false,
  },
  {
    field: "amount",
    headerName: "Кол-во",
    width: 70,
    sortable: false,
  },
];

const ROWS = [
  {
    id: "row_1",
    date: "19.02.2023",
    time: "17:01",
    product: "Шаблонизатор",
    amount: "1 шт.",
  },
  {
    id: "row_2",
    date: "28.02.2023",
    time: "10:43",
    product: "Шаблонизатор",
    amount: "1 шт.",
  },
  {
    id: "row_3",
    date: "04.03.2023",
    time: "21:09",
    product: "Сокращатель ссылок",
    amount: "2 шт.",
  },
];

export const PurchaseTab = () => {
  const theme = useTheme();

  return (
    <DataGrid
      rows={ROWS}
      columns={COLUMNS}
      pageSize={5}
      rowsPerPageOptions={[5]}
      hideFooter
      disableColumnMenu
      disableSelectionOnClick
      rowHeight={50}
      headerHeight={50}
      experimentalFeatures={{ newEditingApi: true }}
      sx={{
        borderRadius: "0",
        border: "none",
        "& .MuiDataGrid-columnHeaders": {
          padding: "0 25px",
          background: "#F2F3F7",
          borderBottom: "none",
        },
        "& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
          outline: "none",
        },
        "& .MuiDataGrid-columnHeaderTitle": {
          fontWeight: "bold",
          userSelect: "none",
        },
        "& .MuiDataGrid-virtualScrollerRenderZone": {
          width: "100%",
        },
        "& .MuiDataGrid-iconSeparator": { display: "none" },
        "& .MuiDataGrid-main .MuiDataGrid-cell": {
          outline: "none",
          border: "none",
          justifyContent: "flex-start",
        },
        "& .MuiDataGrid-row": {
          padding: "0 25px",
          width: "100%",
          "&:hover": {
            background: "#F2F3F7",
          },
        },
      }}
    />
  );
};