Отрисовка таблиц

GFM синтаксис

В markdown предподчительней описывать таблицы через GFM синтаксис (opens in a new tab).

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

данный код отрисует на странице:

HTML теги для таблиц

Если вы попытаетесь отобразить таблицу с помощью HTML тега <table />:

<table>
  <thead>
    <tr>
      <th>left</th>
      <th align="center">center</th>
      <th align="right">right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td>
      <td align="center">bar</td>
      <td align="right">baz</td>
    </tr>
    <tr>
      <td>banana</td>
      <td align="center">apple</td>
      <td align="right">kiwi</td>
    </tr>
  </tbody>
</table>

то результат вас разочарует:

Динамические таблицы

Как писать код

Хотите отрисовать динамическую таблицу? Для этого вы можете использовать встроенные в вашу таблицу выражения JavaScript:

<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Flag</th>
    </tr>
  </thead>
  <tbody>
    {[
      { country: 'France', flag: '🇫🇷' },
      { country: 'Ukraine', flag: '🇺🇦' }
    ].map(item => (
      <tr key={item.country}>
        <td>{item.country}</td>
        <td>{item.flag}</td>
      </tr>
    ))}
  </tbody>
</table>

Данный код выведет на страницу:

Неожиданный результат

Таблица отличается от своего аналога в GFM синтаксисе:

1. только дочерние элементы тела таблицы <tbody /> имеют стили;

2. заголовок таблицы стилей не имеет;

3. таблица не имеет параметр margin: top.

Почему так происходит

MDX2 не заменяет HTML теги на <MDXProvider />.

Адам Уотон (Adam Wathan), создатель Tailwind CSS, объяснил проблему (opens in a new tab) в MDX2, чтобы создать аварийный люк:

please only transform markdown tags, not literal HTML tags

Заголовок таблицы выглядит нестилизованным поскольку не заменяется Nextra's MDX компонентами <tr />, <th /> and <td />. По этой же причине литерал <table /> также не заменяется и не имеет margin-top как mt-6.

Как это исправить

Одноразовые исправления

Просто оберните вашу таблицу в фигурные скобки { and }, например:

{<table>
  ...
</table>}

Изменение поведения по умолчанию

Если это все еще сбивает вас с толку, и вы хотите использовать обычные HTML-элементы для ваших таблиц, выполните следующие действия:

npm i 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()