Tree View

mui-tree

import * as React from "react";
import PropTypes from "prop-types";
import SvgIcon from "@mui/material/SvgIcon";
import TreeView from "@mui/lab/TreeView";
import TreeItem, { treeItemClasses } from "@mui/lab/TreeItem";
import JsonData from "../../DB/IED61850.json";

export default function MultiSelectTreeView() {
  function MinusSquare(props) {
    return (
      <SvgIcon fontSize="inherit" style={{ width: 14, height: 14 }} {...props}>
        {/* tslint:disable-next-line: max-line-length */}
        <path d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z" />
      </SvgIcon>
    );
  }

  function PlusSquare(props) {
    return (
      <SvgIcon fontSize="inherit" style={{ width: 14, height: 14 }} {...props}>
        {/* tslint:disable-next-line: max-line-length */}
        <path d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 12.977h-4.923v4.896q0 .401-.281.682t-.682.281v0q-.375 0-.669-.281t-.294-.682v-4.896h-4.923q-.401 0-.682-.294t-.281-.669v0q0-.401.281-.682t.682-.281h4.923v-4.896q0-.401.294-.682t.669-.281v0q.401 0 .682.281t.281.682v4.896h4.923q.401 0 .682.281t.281.682v0q0 .375-.281.669t-.682.294z" />
      </SvgIcon>
    );
  }
    const Data = JsonData.map((info) => {
    return (
      <table>
        <tr>
          <td>{info}</td>
        </tr>
      </table>
    );
  });
return(
<TreeView
      aria-label="multi-select"
      defaultCollapseIcon={<MinusSquare />}
      defaultExpandIcon={<PlusSquare />}
      multiSelect
      sx={{ height: 2000, flexGrow: 1, maxWidth: 400, overflowY: "visible" }}
    >
      <TreeItem nodeId="1" label={Data[0]}>
        <TreeItem nodeId="2" label="CINGGIO1">
          <TreeItem nodeId="3" label="ST">
            <TreeItem nodeId="4" label="NamPlt">
              <TreeItem nodeId="5" label="paramRev" />
              <TreeItem nodeId="6" label="valRev" />
            </TreeItem>

            <TreeItem nodeId="7" label="Health">
              <TreeItem nodeId="8" label="stVal" />
              <TreeItem nodeId="9" label="q" />
              <TreeItem nodeId="10" label="t" />
            </TreeItem>

            <TreeItem nodeId="11" label="Beh">
              <TreeItem nodeId="12" label="stVal" />
              <TreeItem nodeId="13" label="q" />
              <TreeItem nodeId="14" label="t" />
            </TreeItem>
            <TreeItem nodeId="15" label="EEHealth">
              <TreeItem nodeId="16" label="stVal" />
              <TreeItem nodeId="17" label="q" />
              <TreeItem nodeId="18" label="t" />
            </TreeItem>
            <TreeItem nodeId="19" label="LocKey">
              <TreeItem nodeId="20" label="stVal" />
              <TreeItem nodeId="21" label="q" />
              <TreeItem nodeId="22" label="t" />
            </TreeItem>
            <TreeItem nodeId="23" label="Loc">
              <TreeItem nodeId="24" label="stVal" />
              <TreeItem nodeId="25" label="q" />
              <TreeItem nodeId="26" label="t" />
            </TreeItem>
            <TreeItem nodeId="27" label="lnd01">
              <TreeItem nodeId="28" label="stVal" />
              <TreeItem nodeId="29" label="q" />
              <TreeItem nodeId="30" label="t" />
            </TreeItem>
            <TreeItem nodeId="31" label="lnd02">
              <TreeItem nodeId="32" label="stVal" />
              <TreeItem nodeId="33" label="q" />
              <TreeItem nodeId="34" label="t" />
            </TreeItem>
            <TreeItem nodeId="35" label="lnd03">
              <TreeItem nodeId="36" label="stVal" />
              <TreeItem nodeId="37" label="q" />
              <TreeItem nodeId="38" label="t" />
            </TreeItem>
            <TreeItem nodeId="39" label="lnd04">
              <TreeItem nodeId="40" label="stVal" />
              <TreeItem nodeId="41" label="q" />
              <TreeItem nodeId="42" label="t" />
            </TreeItem>
            <TreeItem nodeId="43" label="lnd05">
              <TreeItem nodeId="44" label="stVal" />
              <TreeItem nodeId="45" label="q" />
              <TreeItem nodeId="46" label="t" />
            </TreeItem>
            <TreeItem nodeId="47" label="lnd06">
              <TreeItem nodeId="48" label="stVal" />
              <TreeItem nodeId="49" label="q" />
              <TreeItem nodeId="50" label="t" />
            </TreeItem>
            <TreeItem nodeId="51" label="lnd07">
              <TreeItem nodeId="52" label="stVal" />
              <TreeItem nodeId="53" label="q" />
              <TreeItem nodeId="54" label="t" />
            </TreeItem>
            <TreeItem nodeId="55" label="lnd08">
              <TreeItem nodeId="56" label="stVal" />
              <TreeItem nodeId="57" label="q" />
              <TreeItem nodeId="58" label="t" />
            </TreeItem>
            <TreeItem nodeId="59" label="lnd09">
              <TreeItem nodeId="60" label="stVal" />
              <TreeItem nodeId="61" label="q" />
              <TreeItem nodeId="62" label="t" />
            </TreeItem>
            <TreeItem nodeId="63" label="lnd10">
              <TreeItem nodeId="64" label="stVal" />
              <TreeItem nodeId="65" label="q" />
              <TreeItem nodeId="66" label="t" />
            </TreeItem>
          </TreeItem>
        </TreeItem>
      </TreeItem>
    </TreeView>
  )}

• 이게 뭐게
• 이것이 바로 하드코딩이지
• 어떻게 쓰지 못하는걸 이렇게 티를 낸다. -> 리엑트 베이스 테이블로 재도전해보자.
• css 는 쉽다는데요..? 왜 나는???