Usage

This is legacy and no longer maintained. The rich-text editor now supports tables natively.

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.