Table tag is not highlighting or rendering in react markdown

Question

I am using React Markdown library and markdown text have table format like below

## onPositive()

| Parameter             | Type       | Default Value |
| --------------------- | ---------- | ------------- |
| text                  | String     | Empty String  |
| buttonBackgroundColor | Int        | Default Color |
| action                | () -> Unit | Empty         |

<ReactMarkdown
      className="markdown"
      escapeHtml={false}
      transformImageUri={(uri) => checkURI(uri, gitLink)}
      source={markDown}
      renderers={{ code: CodeBlock }}
      plugins={[toc]}
    />

Current code: code

So to render table I am using plugin toc but this is not rendering or showing table.

current output (https://i.sstatic.net/tiAaU.png)

required output (https://i.sstatic.net/SSctI.png)

Thanks for helping.

Answer 1

I had the same issue to try render table, there is my solution:

1. You have to render the ReactMarkdown component with the following plugin:

    $ yarn add remark-gfm

By the documentation remark-gfm

2. You can customize the CSS style of the table like this:

Markdown.module.scss

@import 'mixins';

.markdown {
  table {
    border-collapse: collapse;
  }

  th,
  td {
    padding: 6px 13px;
    border: 1px solid black;
  }

  p {
    line-height: 1.5;
  }
}

The entire code is this:

/* eslint-disable react/no-children-prop */
import type { NextPage } from "next";
import { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import styles from "../styles/Markdown.module.scss";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";


const Documentacion: NextPage = () => {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch("./Documentation.md")
      .then((res) => res.text())
      .then((text) => setContent(text));
  }, []);

  return (
    <Layout home title="Documentación">
      <Box
        display="flex"
        flexDirection={{ xs: "column", sm: "row" }}
        gap="20px"
        mb="20px"
      >
        <Box>
          <ReactMarkdown
            className={styles.markdown}
            remarkPlugins={[remarkGfm]}
          >
            {content}
          </ReactMarkdown>
        </Box>
      </Box>
    </Layout>
  );
};

export default Documentacion;

Where Documentation.md is:

**Reponse**

| Caso                  | Status | Respuesta                                          |
| --------------------- | ------ | -------------------------------------------------- |
| Success               | 200    | {payload}                                          |
| Bad Request           | 400    | { "status": 400, "message": "Bad Request" }        |
| Invalid Credentials   | 401    | { "status": 401,"message": "Invalid redentials"}   |
| Not Found Exception   | 404    | { "status": 404,"message": "Resource not Found"}   |
| Method Not Allowed    | 405    | { "status": 405, "message": "Method Not Allowed" } |
| Conflict Exception    | 409    | { "status": 409, "message": Conflict Exception" }  |
| Internar Server Error | 500    | { "status": 500,"message": Internar Server Error"} |

And the result is:

Answer 2

Adding in css file or style tag will solve this problem.

tr {
  border-top: 1px solid #c6cbd1;
  background: #fff;
}

th,
td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

table tr:nth-child(2n) {
  background: #f6f8fa;
}