めも

import * as React from 'react';
import { DataGrid, GridColDef, GridRowsProp, getTreeDataPath } from '@mui/x-data-grid';
import styled from 'styled-components';

// カスタムスタイル
const CustomRow = styled.divborder: ${({ isGrouped, isExpanded }) => { if (isGrouped && isExpanded) { return '1px solid yellow'; } else if (isGrouped) { return '1px solid lightgray'; } else { return 'none'; } }};;

// サンプルデータ
const treeData: GridRowsProp = [
{ id: 1, name: '20世紀フォックス', level: 0 },
{ id: 2, name: 'ジェームズ・キャメロン', parentId: 1, level: 1 },
{ id: 3, name: 'アバター', parentId: 2, level: 2 },
{ id: 4, name: 'タイタニック', parentId: 2, level: 2 },
{ id: 5, name: 'サム・メンデス', parentId: 1, level: 1 },
// ...
];

const columns: GridColDef[] = [
{ field: 'name', headerName: 'タイトル', flex: 1 },
];

export default function CustomDataGrid() {
return (
<DataGrid
rows={treeData}
columns={columns}
treeData
getTreeDataPath={getTreeDataPath}
getRowHeight={() => 25} // 行の高さを調整
renderRow={(params) => {
const { row } = params;
const isGrouped = row.level > 0;
const isExpanded = // 展開状態を取得するロジック (params.api.getRowExpanded?)
return (

{params.renderCell()}

);
}}
/>
);
}