Markdown Tables

Table of Contents

Usage
Showcase
Known Issues

Usage

This is an experimental feature, and the API is subject to change. Have any thoughts? Let us know in the chat or through one of our community channels.

For further development work on Markdown Tables, engage with the related GitHub issue or contribute.

Tables are supported through a custom template which is exported from tinacms. To use it, import it and provide it as a template for your rich-text field:

import { tinaTableTemplate } from 'tinacms'

{
  type: 'rich-text',
  label: 'Body',
  name: '_body',
  templates: [
    tinaTableTemplate,
  ]
}

Render it with the table component in <TinaMarkdown>. Note that the table cell's value is a rich-text element so should be rendered with a nested <TinaMarkdown> component:

const MyTable = props => <table>
    {props.tableRows?.map((tableRow, i) => (
      <tbody key={i}>
        <tr>
          {tableRow.tableCells?.map((tableCell, j) => (
            <td key={j}>
              <TinaMarkdown content={tableCell.value} />
            </td>
          ))}
        </tr>
      </tbody>
    ))}
  </table>

<TinaMarkdown content={data.page._body} components={{ table: (props) => <MyTable {...props} /> }} />

Showcase

Known Issues

The table can only be saved if added with cell data immediately after creation, before leaving the CMS subwindow. This issue only occurs on initial creation of the table.

Last Edited: September 17, 2024