result tabelle

src/components/Table.tsx

 import { Part } from "../data/parts";
+import { Res } from "../data/results-table";
 
 export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}){
     let list: JSX.Element[]  = [];
@@ -37,4 +38,45 @@ export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}
      </div>
    </div>
     )
+}
+
+
+
+export function ResTable({data, cols}: {data: Array<Res>, cols: Array<string>}){
+  let list: JSX.Element[]  = [];
+  for (let index = 0; index < data.length; index++) {
+      list.push(
+          <tr>
+              <td>{data[index].nr}</td>
+              <td>{data[index].silent}</td>
+              <td>{data[index].pbs}</td>
+              <td>{data[index].att}</td>
+              <td>{data[index].q1}</td>
+          </tr>
+      )
+  }
+  let heads: JSX.Element[]  = []; 
+  for (let index = 0; index < cols.length; index++) {
+      heads.push(<td><b>{cols[index]}</b></td>)
+  }
+  return(
+      <div className="flex flex-col">
+   <div className="min-w-full overflow-x-auto">
+     <div className="inline-block min-w-full py-4">
+       <div className="overflow-hidden p-2">
+         <table className="text-center restable">
+           <thead className="bg-d">
+              <tr>
+                  {heads}
+              </tr>
+           </thead>
+           <tbody>
+              {list}
+           </tbody>
+         </table>
+       </div>
+     </div>
+   </div>
+ </div>
+  )
 }
\ No newline at end of file

src/contents/results.tsx

@@ -7,6 +7,8 @@ import { H5 } from "../components/Headings";
 import { useNavigation } from "../utils";
 import { DownloadLink } from "../components/Buttons";
 import { ThreeVertical, TwoHorizontal, TwoVertical } from "../components/Figures";
+import { ResTable } from "../components/Table";
+import { headercols, resultdata } from "../data/results-table";
 
 
 export function Results() {
@@ -110,7 +112,7 @@ export function Results() {
           <p>Cotransfection of pPEAR_CFTR and PE2 and also 1 of the 14 pegRNAs to compare the transfection efficiency of all of our designed pegRNAs.</p> 
           <H5 text="Conclusion"/>
           <p>The pegRNAs lead to differing amounts of cells showing fluorescence, which, assuming comparable transfection efficiencies, indicates varying prime editing efficiency. The pegRNA7 showed the highest transfection efficiency (see Figure 9).</p>
-          <p>HIER BITTE EINE TABELLE (15 ZEILEN & 5 SPALTEN)</p>
+          <ResTable cols={headercols} data={resultdata}/>
           <div className="figure-wrapper">
               <figure>
                     <img src="https://static.igem.wiki/teams/5247/photos/facs-results-mechanism/bild9.png" style={{height: "10%", width: "auto"}}/>
@@ -416,3 +418,6 @@ export function Results() {
   );
 }
 
+
+
+

src/data/results-table.tsx

+export interface Res{
+    nr: string, 
+    silent: string, 
+    att: string, 
+    pbs: string, 
+    q1: string,
+}
+
+export const headercols = [
+    "Nr.", "Silent Edits", "ATT-Lengths", "PBS-Length", "trevopreQ1"
+]
+
+export const resultdata: Res[] = [
+
+    {
+        nr: "", 
+        silent: "", 
+        att: "", 
+        pbs: "", 
+        q1: "",
+    },
+    {
+        nr: "", 
+        silent: "", 
+        att: "", 
+        pbs: "", 
+        q1: "",
+    },
+    {
+        nr: "", 
+        silent: "", 
+        att: "", 
+        pbs: "", 
+        q1: "",
+    }
+
+]
\ No newline at end of file