make table layout with react js

Description

I want to make table with the table data like this.

Let's look at the switch. In the first row or "Dashboard" have two form switch. and the rest have four form switch.

Problem

I've been tried to find best and effective solution but the result end like this :

Here's the code of the table :

import React from "react";
import { Table, Form } from "react-bootstrap";
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],
];
const FormCreateRole = () => {
return (
<Table>
<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) => (
<div key={subIdx} className="mb-3 text-center">
<Form.Check type="switch" />
</div>
))}
{cell}
</td>
);
})}
</tr>
</React.Fragment>
))}
</tbody>
</Table>
);
};
export default FormCreateRole;

Question

1. How to fix the problem efficiently. So, the table react can match with the UI mockup ?

Any help will be appreciated, thank you

In this block

{row.slice(3).map((cell, idx) => {
return (
<td key={idx}>
{row[2] &&
row[2].map((subIdx) => (
<div key={subIdx} className="mb-3 text-center">
<Form.Check type="switch" />
</div>
))}
{cell}
</td>
);
})}

You are saying: "For each element in my row array, starting from index 3, create a new table cell containing a toggle switch, IF row2 is truthy". What you want to say is "For each element in my row array, starting from index 3, create a new table cell containing a toggle switch, IF the current element (cell) is truthy". I believe something like the following will work, although I didn't test it so it may have some syntax errors or something of the like.

{row.slice(3).map((cell, idx) => {
return (
<td key={idx}>
{row[2] &&
row[2].map((subIdx) => (cell !== null) && (
<div key={subIdx} className="mb-3 text-center">
<Form.Check type="switch" />
</div>
))}
{cell}
</td>
);
})}