说明

我想创建这样的表：

不过，我已经做得很好，但我怀疑我的代码，它似乎太复杂，不简单。
下面是我的代码：

const FormCreateRole = ({ switches, onChange }) => {
  // Array for table header and its data
  const tableHeader = [
    "No",
    "Menu",
    "Sub Menu",
    "Lihat",
    "Tambah",
    "Ubah",
    "Hapus",
    "Export",
  ];

  const submenu = [
    ["-"],
    [
      "Akun Pengguna",
      "Grup & Kontrol Hak Akses Akun",
      "Antrian Pasien",
      "Rawat Jalan",
    ],
    ["Pemeriksaan Penunjang", "Rekam Medis", "Admisi Rawat Jalan"],
    ["Status dan Penempatan Kamar", "Transfer Pasien"],
  ];

  let i = 1;

  const tableDataMenu = [
    [i++, "Dashboard", submenu[0], "", null, null, null, ""],
    [i++, "Konfigurasi/Pengaturan", submenu[1], "", "", "", "", null],
    [i++, "Layanan Pasien", submenu[2], "", "", "", "", null],
    [i++, "Rawat Inap", submenu[3], "", "", "", "", null],
  ];
  // end Array data

  return (
    <Table className="table-responsive">
      <thead style={{ backgroundColor: "#ECEFF1" }}>
        <tr>
          {tableHeader.map((header, index) => (
            <th
              key={index}
              className="txt-blue-grey-700 base-md text-bold text-center"
              style={{ padding: "0.75rem" }}
            >
              {header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {tableDataMenu.map((row, idx) => (
          <React.Fragment key={idx}>
            <tr>
              {row.slice(0, 2).map((cell, idx) => (
                <td key={idx} className="text-center">
                  {cell}
                </td>
              ))}
              <td>
                {row[2] && (
                  <div>
                    {row[2].map((sub, idx) => (
                      <div key={idx} className="mb-3">
                        {sub}
                      </div>
                    ))}
                  </div>
                )}
              </td>
              {row.slice(3).map((cell, idx) => {
                return (
                  <td key={idx}>
                    {row[2] &&
                      row[2].map((subIdx) => {
                        if (cell !== null) {
                          return (
                            <div key={subIdx} className="mb-3 text-center">
                              <Form.Check
                                type="switch"
                                id={`${subIdx}-${idx}`}
                                label=""
                                checked={switches[`action${idx}`]}
                                onChange={onChange}
                              />
                            </div>
                          );
                        }
                      })}
                  </td>
                );
              })}
            </tr>
          </React.Fragment>
        ))}
      </tbody>
    </Table>
  );
};

问题

你能帮助我高效，可读和有效地创建代码的表吗？我道歉，我目前正在学习很多，并努力掌握ReactJS。
任何帮助都将不胜感激，谢谢。