Markdown tables in <TabItem></TabItem>

[ErikQQY]

Hello, I am migrating docusaurus v1 website to v2, I want to know how can we put a table in Tabs.

For example,

In v1 docusaurus, we can successfully put a table in a tab.

However, in v2 docusaurus, it doesn't work.

[slorber]

Hi,

You can interleave markdown inside MDX JSX elements (<TabItem>) by using line breaks:

<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple', value: 'apple'},
    {label: 'Orange', value: 'orange'},
    {label: 'Banana', value: 'banana'},
  ]}>
  <TabItem value="apple">

  | foo | bar |
  | :-- | :-: |
  | baz | qux |

  </TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>

[slorber]

Note, this is something coming with our MDX parser, so all the docs of MDX can be helpful to solve the edge cases

Also, the MDX playground is useful to debug either something is a bug of Docusaurus or MDX: https://mdxjs.com/playground/

[ErikQQY]

I think I should first study more about MDX. Thanks a lot!!!!!