How to add tables to React Markdown

Example of a table in React Markdown

Table of Contents

• Tables not supported natively in React Markdown

Tables not supported natively in React Markdown

Recently I was writing an article in React Markdown, and I wanted to add a
table. However, it did not render! I didn't realize until I further researched
the issue that React Markdown does not support adding tables in Markdown
natively. According to an
issues thread in the
React Markdown Github repository from December 22, 2020,

Tables, and all other GFM have moved to a plugin. You can see an example of
usage with tables here: https://github.com/remarkjs/react-markdown#use and the
note in the release notes here:
https://github.com/remarkjs/react-markdown/blob/main/changelog.md#500---2020-10-19

The website accurately reflects that by default, react-markdown follows the
CommonMark standard, which does not have Tables. --
ChristianMurphy commented on Dec 22, 2020

I looked at the example of usage with tables, and it seemed pretty
straightforward. I followed the example and imported the remark-gfm npm
package into my post-content.js file after installing it. Then I added it to
the ReactMarkdown component. But it didn't work. I kept on getting
TypeError Cannot set properties of undefined (setting 'inTable'). I did a
Google Search and came up with a thread on stackoverflow entitled
ReactMarkdown + remarkGfm: everything renders as expected, EXCEPT tables - typeError?.

First I found out that it was only with React Markdown 9.0 that I could use the
latest version of remark-gfm. I however, am using React Markdown 8.0.7.
According to the answer that solved my issue, React Markdown 8.0.7 works with
remark-gfm version 3.0.1.

So I uninstalled my current version of remark-gfm with npm uninstall
remark-gfm (gfm stands for Github Flavored Markdown) and then re-installed
it with npm i remark-gfm@3.0.1 -S. Then I did the following inside my
post-content.js file which is the component that renders the markdown content of
my posts on this site:

import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
;<ReactMarkdown
    components={customRenderers}
    rehypePlugins={[rehypeRaw]}
    remarkPlugins={[remarkGfm]}
    remarkRehypeOptions={{ passThrough: ['link'] }}
>
    {post.content}
</ReactMarkdown>

I also installed and imported the rehype-raw npm package, and passed
options to remarkRehypeOptions because in the same thread, another user
stated:

Helping hand - I discovered using the remarkGfm had a knock-on effect when
using custom components in react-markdown. Though remarkGfm fixed the table
layout, it stripped content (e.g. class names) from html tags when used in
markdown (which is valid). As such applying remarkRehypeOptions > passThrough
allowed both the tables to render correctly and links to use custom
components. -- Chris GW Green answered Mar 13 at 13:39

Then he added a code snippet of how he added the two packages to
React Markdown:

<Markdown
   remarkPlugins={[remarkGfm]}
   rehypePlugins={[rehypeRaw]}
   remarkRehypeOptions={{ passThrough: ['link'] }}
    ...

Basically the same as the snippet I shared, and his snippet is where
I also got guidance.

I also added some simple styling for my tables in my
post-content.module.scss file:

/* Markdown table styling */
.content table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    border-color: inherit !important;
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
}

.content tbody,
.content td,
.content tfoot,
.content th,
.content thead,
.content tr {
    border-color: inherit !important;
    border-style: solid !important;
    border-width: 2px !important;
    padding: 0.5rem;
}

if you are a next.js and tailwind.css user, I also added a bit of
styling for dark mode in my (global) post-content.scss file:

.dark .content table {
    color: $white;
}

This is what the table I created looks like:

Screenshot of table used in
How to create a fullstack application using Django and Python part 7

Related Resources

• Tables not working on website #526: react-markdown Github repository
• remarkjs/react-markdown example usage: remarkjs/react-markdown Github repository
• ReactMarkdown + remarkGfm: everything renders as expected, EXCEPT tables - typeError?; stackoverflow