Table - remark-gfm is rendering an empty `<td />` element instead of not rendering it

[Gili Shohat]

Subject of the issue

I have some css for my tables, and one of my users had a space after some row in the table.
In Github it renders well. However, using react-markdown it looks weird (image below). Turns out that while Github ignores this space, in remark-gfm there's an added td element which makes the UI look weird in my case...
I think it's a bug since it doesn't align with how Github is rendering the table.

Your environment

• Packages: react-markdown (version 5)

Steps to reproduce

Example in codesandbox.io:
https://codesandbox.io/s/react-markdown-forked-4hj01

Expected behavior

Should render the ordered list exactly like in Github:

hello...	hi...
first cell	second cell and last
first cell	second cell and last

Notice the number of <td /> elements in the first row - it's two elements in Github, whereas in react-markdown with remark-gfm it's three.

Actual behavior

There's an excessive <td /> element which is empty.
This is the UI:

These are the HTML elements (the marked element is the redundant element):

[Titus]

Your codesandbox does not display the screenshot you shared here?

[Titus]

I cannot reproduce:

| a |
| - |
| b |SP

in micromark. I can reproduce:

| a |SP 
| - |

there

[Gili Shohat]

I'm not sure I understand. The sandbox does reproduce this.
Maybe I got confused in the beginning but now it should appear ok.

This is the code in sandbox link:

import React from "react";
import "./styles.scss";
import ReactMarkdown from "react-markdown";
import gfm from "remark-gfm";

const markdown = `
| hello... | hi... |
| :----   | :----     |
| first cell | second cell and last |  
| first cell | second cell and last |

`;

export default function App() {
  return <ReactMarkdown plugins={[gfm]} children={markdown} />;
}

[Titus]

Should be fixed. Your example worked fine now!

[Gili Shohat]

Funny question but I still see the same UI in sandbox. What should I be doing to get the updated version?

[Titus]

npm update

[Gili Shohat]

Sorry but I still don't understand. 😅
How can I see it working properly live on codesandbox? All the packages are updated to the latest version there.

[Christian Murphy]

@wooorm's instructions are for testing locally.

How can I see it working properly live on codesandbox? All the packages are updated to the latest version there.

That is a question for CodeSandbox support [e-mail]