2 minute read

Tags: ,

GitHub

我要學50音

  • 實作後的成果
  • 隨著每天的更新都會變化唷唷~~

GitHub

我要學50音

  • 實作後的成果
  • 隨著每天的更新都會變化唷唷~~

katakanaList


export const katakanaList = [
  {
    name: "",
    roots: "a",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "k",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "s",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "t",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "n",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "h",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "m",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "y",
    : "",
    : " ",
    : "",
    : " ",
    : "",
    words: ["", " ", "", " ", "", ""],
  },
  {
    name: "",
    roots: "r",
    : "",
    : "",
    : "",
    : "",
    : "",
    words: ["", "", "", "", "", ""],
  },
  {
    name: "",
    roots: "w",
    : "",
    : " ",
    : " ",
    : " ",
    : "",
    words: ["", " ", " ", " ", "", ""],
  },
  {
    name: "",
    roots: "n",
    : "",
    : " ",
    : " ",
    : " ",
    : " ",
    words: [" ", " ", " ", " ", " ", ""],
  },
];

Day11.js

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { Box, Grid } from "@mui/material";
import { katakanaList } from "../../shared/model/aiueoObj";

//
// IMPORT ZONE
//

const Day11 = () => {
  const katakanaRow = [...katakanaList].map((d, idx) =>
    Object.assign(d, { id: idx })
  );
  const katakanaColumns = [
    {
      field: "name",
      headerName: "",
      width: 50,
    },
    {
      field: "",
      headerName: "あ段",
      width: 50,
    },
    {
      field: "",
      headerName: "い段",
      width: 50,
    },
    {
      field: "",
      headerName: "う段",
      width: 50,
    },
    {
      field: "",
      headerName: "え段",
      width: 50,
    },
    {
      field: "",
      headerName: "お段",
      width: 50,
    },
  ];

  console.log(katakanaRow);

  return (
    <Grid container direction={"column"} alignContent={"center"}>
      <Box>
        <DataGrid columns={katakanaColumns} rows={katakanaRow} />
      </Box>
    </Grid>
  );
};

export default Day11;

Reference