What is the recommendation for drawing tables with colspan and rowspan?

[Ouch1978]

Docusaurus supports GitHub-Flavored Markdown.

However, it is hard to avoid using tables with colspan and rowspan in documents.

For example, there's MultiMarkdown and jekyll-spaceship in jekyll.

May I know what is the best practice to handle tables gracefully in Docusaurus?

Thank you.

[slorber]

Docusaurus use MDX, so everything working in MDX should work in Docusaurus => try the playgrund https://mdxjs.com/playground/

This also means:

• you can use React components and JSX to create your tables (including colspan/rowspan in JSX), giving you a lot of freedom for composability and building your own convenient abstraction for a given use-case
• you can add a remark plugin to support additional non-std markdown table syntax. This one might work: https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-grid-tables

It's outside the scope of Docusaurus so we can't really provide support for all this.

[Ouch1978]

Thank you.

I will have a try with it.

[Ouch1978]

I've tried remark-grid-tables, it's working well.

Thank you.

[slorber]

Thanks for the feedback

One limit of such plugin might be if you want to embed a MDX React component inside a table cell: this probably wouldn't work but can't tell for sure

[BPowell76]

I tried to use the playground linked just now in searching something not related to Docusaurus and it didn't even render a basic markdown table (see below)

item 1	item 2
1	2

[Airkro]

Many people use remark-extended-table to do that, but it doesn't compatible with docusaurus.

In the docusaurus project, try rehype-extended-table, it can do the same without knowns bugs.

The most important thing is: the *-extended-table syntax is supported by many Markdown formatter, which the *-grid-tables syntax is not.

[slorber]

Maybe try the first package with a canary of Docusaurus (using mdx v2), maybe it will work better 🤷‍♂️ didn't try so can't be sure.

[damageboy]

As someone who just tried both, I'll point out that there is a substantial difference between rehype-extended-table and remark-grid-tables:

• The former allows for colspan/rowspan in some basic way, but does include some vscode preview support depending on the markdown rendering engine
• The latter allows for both colspan/rowspan, but also allows for paragraphs inside a cell (e.g. multiline text), including lists, code blocks other markdwon "features". Unfortunately, no vs-code support exists.

[damageboy]

As an example, here's what I managed to achieve with docusaurus and remark-grid-tables:

"markdown":

+--------------------+--------------------------------+--------------------------------------------------+
| Policy             |Decription                      | When to Use                                      |
+====================+================================+==================================================+
| Something          | Lorem ipsum is                 | ```cpp                                           |
|                    | placeholder text<br/>          | if (something > crazy)                           |
|                    | commonly used                  |     wow();                                       |
|                    | in the graphic                 | ```                                              |
+--------------------+--------------------------------+--------------------------------------------------+
| Something else     | Lorem ipsum is                 | ```mermaid                                       |
|                    | placeholder text<br/>          | flowchart LR                                     |
|                    | commonly used                  |     Start --> Stop                               |
|                    | in the graphic                 | ```                                              |
+--------------------+--------------------------------+--------------------------------------------------+
| Completely<br/>    | Lorem ipsum is                 | Occasional use of lists in table cells:          |
| Different          | placeholder text<br/>          | - Can be done rather easily                      |
|                    | commonly used                  | - I can't believe this isn't butter              |
+--------------------+--------------------------------+--------------------------------------------------+
|Totally<br/>        | Lorem ipsum is                 | ### Heading in table cells, GTFO                 |
|Insanely<br/>       | placeholder text<br/>          | While not clear who would want this, why not?    |
|Crazy               | commonly used                  | After all, consenting adults, are adults!        |
+--------------------+--------------------------------+--------------------------------------------------+

Rendering: