テーブル作成の処理を切り出し

1 files changed, 44 insertions, 0 deletions

diff --git a/src/app/_components/tableElements.tsx b/src/app/_components/tableElements.tsx
new file mode 100644
index 0000000..1051048
--- /dev/null
+++ b/src/app/_components/tableElements.tsx
@@ -0,0 +1,44 @@
+type MainOption = {
+  header: {
+    label: string,
+  }[]
+};
+export function TableElement(mainOption: MainOption, bodyList: { element: JSX.Element }[][]) {
+  if (mainOption.header.length <= 0) {
+    throw new Error(`カラムの数は1以上にして下さい`);
+  }
+  const headerElementList: JSX.Element[] = [];
+  for (const h of mainOption.header) {
+    const index = mainOption.header.indexOf(h);
+    headerElementList.push(
+      <th scope="col" className="px-6 py-4 text-left" key={`th-${index}`}>{h.label}</th>
+    );
+  }
+  const bodyElementList: JSX.Element[] = [];
+  let trIndex = 0;
+  for (const body of bodyList) {
+    const tdElementList: JSX.Element[] = [];
+    for (let i = 0; i < mainOption.header.length; i++) {
+      const tdBody: { element: JSX.Element } = body[i];
+      tdElementList.push(<td className="px-1 py-1" key={`td-${i}`}>{tdBody.element}</td>);
+    }
+    bodyElementList.push(
+      <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 text-sm text-gray-900 font-light" key={`tr-${trIndex}`}>
+        {tdElementList}
+      </tr>
+    );
+    trIndex += 1;
+  }
+  return (
+    <table className="w-full">
+      <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
+        <tr>
+          {headerElementList}
+        </tr>
+      </thead>
+      <tbody className="">
+        {bodyElementList}
+      </tbody>
+    </table>
+  );
+}