Table styling is highly inconsistent

[ChristianIvicevic]

I am currently using the Beta 24 and run into the following issues that are really confusing:

1. HTML tables are almost fully unstyled. Only the th elements appear in bold per default:

<table>
  <thead>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
  </tr>
  </tbody>
</table>

2. However tables with bodies that are the result of dynamic generation (or just wrapped with curlies) are correctly styled while the header is still almost completely unstyled:

<table>
  <thead>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  </thead>
  <tbody>
  {[...Array(2)].map((__, index) => <tr key={index}>
    <td>C</td>
    <td>D</td>
  </tr>)}
  {<tr><td>C</td><td>D</td></tr>}
  </tbody>
</table>

3. GFM tables are corrrectly styled in their entirety:

| A | B |
|---|---|
|  C|  D|
|  C|  D|
|  C|  D|

I'd like to ask whether you already have a plan whether or not custom tables will be styled or not in the final release of v2. I wasn't personally looking forward to writing custom styles (especially since I didn't get Tailwind working correctly) and would've liked to get the components automatically styled by nextra-theme-docs per default.

[dimaMachina]

Hi! Does there are some way replace HTML table / tr / th / th tags with MDX components?
Because currently only GFM tables are replaced

[ChristianIvicevic]

Creating a table via a React component embedded into the MDX has the same behavior of being unstyled. My use-cases are that I dynamically want to generate tables at build time based on external data which is why GFM isn't an option for anything that is not hard-coded.

[dimaMachina]

@ChristianIvicevic I don't know why this happens and why table is not replaced with MDX components table,
wrapping <table/> with {} temporarily fix it

Investigation into fixing this problem is welcome!

[nihgwu]

If your table is rendered in React, then MDX will treat it as React component and won't be replaced with mdxComponents, as it's under your control, not MDX

[dimaMachina]

@nihgwu I guess there are some issue since <table /> tag is placed in mdx and not in react imported component

[dimaMachina]

Thanks for everyone, I made some investigation and wrote a docs page for it to explain why this happens and how to fix it if you still want to use literal elements in your Nextra app https://nextra-v2-ggyzxlq24-shuding1.vercel.app/docs/guide/advanced/table

[ChristianIvicevic]

Sorry to necro this issue of mine but I am currently trying to refactor my code and have been running into this issue again. As implied in my initial post I use Nextra as a wiki with dozens of pages that show tables such as the one attached

Unfortunately I cannot easily dynamically create those tables as custom React components (which I'd prefer to use and simplify my pages tremendously) because they aren't styled automatically by MDX as discussed in this issue.

I was wondering if there is some way of referencing the CSS classes used for automatically styled table elements when MDX gets parsed in order to use them in my own tables created via React component.

[dimaMachina]

Please create a new issue