How to generate table in storybook .mdx files

[JohnVersus]

I have table added in the .md format like below

| Prop         | CSS Property |
| ------------ | ------------ |
| `boxShadow`  | box-shadow   |
| `textShadow` | text-shadow  |

But storybook is not rendering the table. This is how it is rendered.

| Prop | CSS Property | | ------------ | ------------ | | boxShadow | box-shadow | | textShadow | text-shadow |

Any suggestions for adding a table?

Thank you

[f3bw]

You could try a more complex one (extra styling etc), something like this:

jsx

import React from 'react';

const Table = ({ headers, rows }) => (
  <table>
    <thead>
      <tr>
        {headers.map((header, index) => (
          <th key={index}>{header}</th>
        ))}
      </tr>
    </thead>
    <tbody>
      {rows.map((row, rowIndex) => (
        <tr key={rowIndex}>
          {row.map((cell, cellIndex) => (
            <td key={cellIndex}>{cell}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
);

export default Table;

Markdown:

import Table from './Table';

# My Storybook Documentation

Here's an example table:

<Table
  headers={['Header 1', 'Header 2']}
  rows={[
    ['Cell 1', 'Cell 2'],
    ['Cell 3', 'Cell 4'],
  ]}
/>

And then of course change it to your liking.

[JohnVersus]

Thanks, @fabricewerger

This trick made my code much cleaner.

[MrXwq]

Do I have to write it myself? Why no longer support the old way of writing md

[BHerbulot]

You can import Markdown from '@storybook/blocks' and put your table inside

<Markdown>
{`
| Prop         | CSS Property |
| ------------ | ------------ |
| `boxShadow` | box-shadow   |
| `textShadow` | text-shadow  |
`}
</Markdown>

[terrymun]

@BHerbulot Thanks for the reply! This is the solution that currently works for us: for some reason we simply cannot get remarkGfm to work with our storybook: it keeps complaining about an ESM import issue.

[olivierr91]

Cannot get this to work, I get a Could not parse expression with acorn error.

[AnsonH]

Storybook officially recommends enabling the remark-gfm plugin in the configuration file:

1. Install remark-gfm as dev dependency
2. Follow this guide