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

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;
}