Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
interface Cell {
data: string
colspan: number
rowspan: number
}
function cell(data?: string) {
return {
data: data || "",
colspan: 1,
rowspan: 1,
}
}
const ROWSPAN_TOKEN = "#rowspan#"
function parseTable(table: string[][]): Cell[][] {
const resultTable: Cell[][] = []
table.forEach((row, r) => {
const resultRow: Cell[] = []
row.forEach((data, c) => {
if (data === ROWSPAN_TOKEN) {
let i = r - 1
while (i >= 0 && table[i][c] === ROWSPAN_TOKEN) {
i--
}
if (i >= 0) {
resultTable[i][c].rowspan++
} else {
resultRow.push(cell())
}
} else {
resultRow.push(cell(data))
}
})
resultTable.push(resultRow)
})
return resultTable
}
export default function Tablepress(props: { data: string[][] }) {
const { data } = props
const table = parseTable(data)
const [headerRow, ...body] = table
return (
<table className="tablepress">
<thead>
<tr>
{headerRow.map((cell, i) => (
<th
key={i}
dangerouslySetInnerHTML={{ __html: cell.data }}
/>
))}
</tr>
</thead>
<tbody className="row-hover">
{body.map((row, i) => (
<tr key={i}>
{row.map((cell, j) => (
<td
key={j}
colSpan={cell.colspan}
rowSpan={cell.rowspan}
dangerouslySetInnerHTML={{ __html: cell.data }}
/>
))}
</tr>
))}
</tbody>
</table>
)
}
|