Table markdown not rendered as table

[blackr1234]

Your environment

• OS: macOS 10.15.5
• Packages: react-markdown@5.0.0, react@17.0.0
• Env: node 12.18.4, npm 6.14.8

---

Steps to reproduce

Consider the following code (please read the comments):

// import
import ReactMarkdown from "react-markdown";

// declare the source somewhere
	const md = `
## hello world

|header|header|
|--|--|
|cell|cell|
	`;

// put this in your component's return (of the `render()` method for class components)
<ReactMarkdown source={md} />

---

Expected behavior

I expect tables to render correctly as <table> nodes. version 4.3.1 behaves correctly and renders a styleless <table> (without border).

I can get the following with version 4.3.1:

---

Actual behavior

Since version 5.0.0, tables no longer render correctly as a <table> nodes but <p> instead. Probably the markdown parser no longer recognizes table markdown syntax.

Now I am getting with version 5.0.0:

[wooorm]

This is documented in the readme, several times: e.g., see here: https://github.com/remarkjs/react-markdown#use

[wooorm]

(and in the changelog: https://github.com/remarkjs/react-markdown/blob/main/changelog.md#upgrade-remark-parse)

[rkuang9]

First example in https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-a-plugin includes a simple table. Table cell borders are not rendered.

[wooorm]

that example works perfectly! if things don’t work for you, ask a new question and provide info!

[rkuang9]

For those who run into this issue, you have create a css file from https://github.com/micromark/micromark-extension-gfm-table#css and import it to your component. This adds styling to the otherwise bare rendered th/tr/td. I wish the demo included this information.