Is there a Fumadocs table component?

[KamilDev]

I see there's a Fumadocs table component for types, but is there a generic Fumadocs table component available?

[fuma-nama]

It's just HTML table

[KamilDev]

The differences seem to be with the way table overflow-x is handled.

• HTML table will cause the entire page to overflow
• Markdown tables have a div with className of relative overflow-auto
• Fumadocs type table have a div with className of prose my-6 overflow-auto prose-no-margin

While Markdown tables handle overflow-x, the horizontal scrollbar is not properly aligned to the table. For this reason, I decided to copy the div classes that Fumadocs type table uses and use them for all HTML tables.

Perhaps it would be useful just for this reason, because I was unaware of the table overflow issues until testing on mobile.

---
title: Fumadocs Table Test
---

MD table

| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 |
| -------- | -------- | -------- | -------- | -------- | -------- |
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 | Row 1, Column 4 | Row 1, Column 5 | Row 1, Column 6 |

HTML table

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
      <td>Row 1, Column 4</td>
      <td>Row 1, Column 5</td>
      <td>Row 1, Column 6</td>
    </tr>
  </tbody>
</table>

HTML table with MD container

<div className="relative overflow-auto">
 <table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
      <td>Row 1, Column 4</td>
      <td>Row 1, Column 5</td>
      <td>Row 1, Column 6</td>
    </tr>
  </tbody>
</table>
</div>

HTML table with "type table" container

<div className="prose my-6 overflow-auto prose-no-margin">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        <td>Row 1, Column 4</td>
        <td>Row 1, Column 5</td>
        <td>Row 1, Column 6</td>
      </tr>
    </tbody>
  </table>
</div>