DataGridで行選択できないようにする

解説

disableRowSelectionOnClick

この設定をすればOK

実装

"use client";
import * as React from "react";
import Box from "@mui/material/Box";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

interface RowInterface {
  id: number;
  lastName: string | null;
  firstName: string | null;
  age: number | null;
  sex: string | null;
}

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "firstName",
    headerName: "名字",
    width: 600,
    editable: true,
  },
  {
    field: "lastName",
    headerName: "名前",
    width: 300,
    editable: true,
  },
  {
    field: "age",
    headerName: "年齢",
    type: "number",
    width: 300,
    editable: true,
  },
  {
    field: "sex",
    headerName: "性別", //radioでもCRUD処理したいため追加
    sortable: false,
    width: 300,
    // valueGetter: (value, row) => `${row.firstName || ""} ${row.lastName || ""}`,
  },
  {
    field: "fullName",
    headerName: "氏名",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    width: 160,
    valueGetter: (value, row) => `${row.firstName || ""} ${row.lastName || ""}`,
  },
];

const rows = [
  {
    id: 1,
    lastName:
      "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
    firstName: "桜木",
    age: 16,
    sex: "男",
  },
  { id: 2, lastName: "晴子", firstName: "赤城", age: 15, sex: "女" },
  { id: 3, lastName: "光義", firstName: "安西", age: 65, sex: "男" },
  { id: 4, lastName: "リョータ", firstName: "宮城", age: 16, sex: "男" },
  { id: 5, lastName: "寿", firstName: "三井", age: 18, sex: "男" },
  { id: 6, lastName: "徳男", firstName: "堀田", age: null, sex: "男" },
  { id: 7, lastName: "楓", firstName: "流川", age: 15, sex: "男" },
  { id: 8, lastName: "洋平", firstName: "水戸", age: 18, sex: "男" },
  { id: 9, lastName: "公延", firstName: "小暮", age: 18, sex: "男" },
];

export default function DataGridDemo() {
  const [selectionModel, setSelectionModel] = React.useState<RowInterface[]>(
    []
  );
  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        sx={{ overflowX: "scroll" }}
        disableRowSelectionOnClick
        initialState={{
          columns: {
            columnVisibilityModel: {
              id: false,
            },
          },
        }}
        hideFooter
      />
    </Box>
  );
}