diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 6770df8d942407ffa9c82b8e361057ce358d5fda..d9c4d2cd23e1d8dd4dd3233004be3eb7cdc8c4a5 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -1,4 +1,5 @@ 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 diff --git a/src/contents/results.tsx b/src/contents/results.tsx index 9f6248cb87fe22cbc816bd8377ebf80d164e45dc..2882e97a45b6bc8518fc891d7f086c75bf02c2fb 100644 --- a/src/contents/results.tsx +++ b/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() { ); } + + + diff --git a/src/data/results-table.tsx b/src/data/results-table.tsx new file mode 100644 index 0000000000000000000000000000000000000000..3e070305f9c19e2181568a15750a9307fd12d846 --- /dev/null +++ b/src/data/results-table.tsx @@ -0,0 +1,37 @@ +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