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} /> }} />
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.
© TinaCMS 2019–2025