Skip to content
BFiles

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

gatsby, test1 min read

Tabeller i MDX

Förutsättningar

Installerat remark-grid-tables.

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 |

TableHeadingsHere
cellcellcell
cellcellcell

... 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 HeadingsHere
SubHeadingsToo
cell spans rowscolumn spanning
normalcell
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 |

| cell | cell | cell | | cell | cell | cell |


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

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

cellcellcell
cellcellcell

... 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|---|---|---|

cellcellcell
cellcellcell
---------

... funkar inte.

© 2021 av festerman. Använd gärna uppgifterna
men tala om var dom kom ifrån.
Byggd med GatsbyJS
Theme av LekoArts