import { Callout, Steps, Table, Td, Th, Tr } from 'nextra/components'

# 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](https://github.github.com/gfm/#tables-extension-).

```mdx filename="MDX"
| left   | center | right |
| :----- | :----: | ----: |
| foo    |  bar   |   baz |
| banana | apple  |  kiwi |
```

will be rendered as:

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

## Literal HTML Tables

If you try to render table with literal HTML elements `<table>{:js}`,
`<thead>{:js}`, `<tbody>{:js}`, `<tr>{:js}`, `<th>{:js}` and `<td>{:js}` – your
table will be unstyled because
[MDX](https://mdxjs.com/docs/using-mdx/#components) doesn't replace literal HTML
elements with
[components provided by `useMDXComponents(){:js}`](https://mdxjs.com/packages/vue/#usemdxcomponentscomponents).

<Callout>
  Instead, use the [built-in `<Table>`, `<Th>`, `<Tr>`, and `<Td>` components](/docs/guide/built-ins/table)
  available via `nextra/components`.
</Callout>

## 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:

<Steps>
### Install `remark-mdx-disable-explicit-jsx` package

```sh npm2yarn
npm i remark-mdx-disable-explicit-jsx
```

### Setup

Configure plugin in `nextra` function inside `next.config.mjs` file

```js filename="next.config.mjs" {2,8-13}
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()
```

</Steps>
