Testar hur man gör tabeller i MDX ...

2020-03-22 — gatsby, test — 1 min read

Tabeller i MDX

Förutsättningar

Variant 1: som `remark-grid-tables` säger att det ska se ut:

1+-------+----------+------+
2| Table Headings   | Here |
3+-------+----------+------+
4| Sub   | Headings | Too  |
5+=======+==========+======+
6| cell  | column spanning |
7+ spans +----------+------+
8| rows  | normal   | cell |
9+-------+----------+------+
10| multi | cells can be    |
11| line  | *formatted*     |
12|       | **paragraphs**  |
13| cells |                 |
14| too   |                 |
15+-------+-----------------+

+-------+----------+------+ | Table Headings | Here | +-------+----------+------+ | Sub | Headings | Too | +=======+==========+======+ | cell | column spanning |

spans +----------+------+ | rows | normal | cell | +-------+----------+------+ | multi | cells can be | | line | formatted | | | paragraphs | | cells | | | too | | +-------+-----------------+

... och det funkar ju inte ...

Variant 2: som Tables Generator säger de ska se ut

En förenklad variant av den ovan:

1| Table  | Headings  | Here  |
2|---|---|---|
3| cell  | cell  | cell  |
4| cell  | cell  | cell  |

Table	Headings	Here
cell	cell	cell
cell	cell	cell

... och det funkar! Prova att tweaka exemplet:

1| Table Headings   | Here |
2| Sub   | Headings | Too  |
3|-------|----------|------|
4| cell  | column spanning |
5| spans |----------|------|
6| rows  | normal   | cell |
7|-------|----------|------|
8| multi | cells can be    |
9| line  | *formatted*     |
10|       | **paragraphs**  |
11| cells |                 |
12| too   |                 |
13|-------|-----------------|

| Table Headings | Here | | Sub | Headings | Too | |-------|----------|------| | cell | column spanning | | spans |----------|------| | rows | normal | cell | |-------|----------|------| | multi | cells can be | | line | formatted | | | paragraphs | | cells | | | too | | |-------|-----------------|

... det funkar ju inte ...

Kolla hur det funkar utan remark-grid-tables.

1npm uninstall --save remark-grid-tables

och titta här ovan -- och vi har samma resultat. Så Gatsby-plugin-en hade ingen effekt, och MDX-pluginen har stöd för bara för enkla tabeller.

html

1<table>
2<tbody>
3<tr><th colspan="2">Table Headings</th><th>Here</th></tr>
4<tr><th>Sub</th><th>Headings</th><th>Too</th></tr>
5<tr><td rowspan="2">cell spans rows</td><td colspan="2">column spanning</td></tr>
6<tr><td>normal</td><td>cell</td></tr>
7<tr><td>
8multi<br/>
9line<br/>
10<br/>
11cells<br/>
12too
13</td><td>
14<p>cells can be <em>formatted</em> <strong>paragraphs</strong></p></td></tr>
15</tbody>
16</table>

Table Headings		Here
Sub	Headings	Too
cell spans rows	column spanning
cell spans rows	normal	cell
multi line cells too	cells can be formatted paragraphs

Och det är ju inte så bekvämt :(

OK, så några corner cases utan html

utan headings

1|---|---|---|
2| cell  | cell  | cell  |
3| cell  | cell  | cell  |

|---|---|---| | cell | cell | cell | | cell | cell | cell |

eller

1| cell  | cell  | cell  |
2| cell  | cell  | cell  |

... funkar inte :(. Testa med tom huvudtext:

1| | |
2|---|---|---|
3| cell  | cell  | cell  |
4| cell  | cell  | cell  |


cell	cell	cell
cell	cell	cell

... et voilà, det ser ju lite bättre ut ... För att det ska funka behövs också en tom rad före och efter, eller möjligen något annat som bryter (<hr> ovan). Vad händer om man försöker få till en "separator"-linje i slutet också?

1| | |
2|---|---|---|
3| cell  | cell  | cell  |
4| cell  | cell  | cell  |
5|---|---|---|


cell	cell	cell
cell	cell	cell
---	---	---

... funkar inte.