Rendering Tables

This guide covers different ways to render tables in MDX, including GFM syntax and literal HTML tag.

GFM syntax

In Markdown, it is preferable to write tables via GFM syntax.

| left   | center | right |
| :----- | :----: | ----: |
| foo    |  bar   |   baz |
| banana | apple  |  kiwi |

will be rendered as:

Literal HTML Tables

If you try to render table with literal HTML elements <table>, <thead>, <tbody>, <tr>, <th> and <td> – your table will be unstyled because MDX doesn’t replace literal HTML elements with components provided by useMDXComponents().

Changing Default Behaviour

If this thing is still confusing for you, and you want to use regular literal HTML elements for your tables, do the following:

npm i remark-mdx-disable-explicit-jsx

pnpm add remark-mdx-disable-explicit-jsx

yarn add remark-mdx-disable-explicit-jsx

bun add remark-mdx-disable-explicit-jsx

import nextra from 'nextra'
import remarkMdxDisableExplicitJsx from 'remark-mdx-disable-explicit-jsx'
 
const withNextra = nextra({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
  mdxOptions: {
    remarkPlugins: [
      [
        remarkMdxDisableExplicitJsx,
        { whiteList: ['table', 'thead', 'tbody', 'tr', 'th', 'td'] }
      ]
    ]
  }
})
 
export default withNextra()