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()¹.

Usage

<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Flag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>France</td>
      <td>🇫🇷</td>
    </tr>
    <tr>
      <td>Ukraine</td>
      <td>🇺🇦</td>
    </tr>
  </tbody>
</table>

Example

Changing Default Behaviour

If you want to use standard HTML elements for your tables but have them styled with components provided by useMDXComponents()¹, you can do this by configuring Nextra.

To achieve this, pass the whiteListTagsStyling option to the Nextra function, including an array of tags you want to replace.

Here’s an example configuration in your next.config.mjs file:

import nextra from 'nextra'
 
const withNextra = nextra({
  whiteListTagsStyling: ['table', 'thead', 'tbody', 'tr', 'th', 'td']
})
 
export default withNextra()

In this example, the tags <table>, <thead>, <tbody>, <tr>, <th>, and <td> will be replaced with corresponding MDX components, allowing for customized styling.