Table cell formatting options in Sanity plugins

15 replies
Last updated: Mar 23, 2021
Hi! I have to build a table component, I'm aware of https://github.com/rdunk/sanity-plugin-table and https://www.sanity.io/plugins/sanity-plugin-datatable but I do not see an option of having simple formatting options for the cells content. Do you know if there's a way of doing that? I need to be able to add bullet points and am looking for ways to solve it.
AI Update

Unfortunately, the current table plugins for Sanity (including both the rdunk/sanity-plugin-table and the official @sanity/table plugin) only support plain strings in table cells—they don't support rich text formatting like bullet points, bold, italics, or other Portable Text features.

This is a well-known limitation mentioned in the Sanity documentation: table cells themselves don't support rich text.

Alternative Solutions

Since you need bullet points in table cells, here are some workarounds:

1. Use an Array of Objects Instead

The most common approach is to model your data as an array of objects rather than a table, then render it as a table on your frontend. This gives you full control over cell content:

{
  name: 'comparisonTable',
  title: 'Comparison Table',
  type: 'array',
  of: [{
    type: 'object',
    fields: [
      {
        name: 'feature',
        type: 'string',
        title: 'Feature'
      },
      {
        name: 'description',
        type: 'array',
        title: 'Description',
        of: [{type: 'block'}] // Full Portable Text support with bullet points!
      }
    ]
  }]
}

2. Build a Custom Table Input Component

You could create a custom input component that combines the table UI with Portable Text fields for each cell. This requires more development work but gives you exactly what you need. Check out the Sanity documentation on custom inputs for guidance.

3. Use Markdown in Cells

As a simpler workaround, you could use the plain string cells and adopt a markdown convention (like - bullet point), then parse and render the markdown on your frontend.

The array-of-objects approach is generally recommended because it's easier to query, validate, and maintain. Tables in CMSs often become problematic for editors as content grows more complex—structured data tends to scale better.

Show original thread
15 replies
Another person asked recently and the maintainer of sanity-plugin-table thought it would be a good idea to look at in the future. Feels like it’s achievable to allow the cells to be custom types and if the cell is a formatted text then to also open the editor in a new modal. Would also mean you didn’t need to write a completely new component.
Also forgot about this one https://www.npmjs.com/package/sanity-plugin-power-table In the bigger example that creates a block type cell which is probably what you are looking for.
Thank you!I just installed power-table a moment ago and I keep getting error in the studio

Cannot read property 'sanity' of undefined

😞 goes away as soon as I remove it.
Hey Weronika! I’ve seen this issue come up before. Have you tried removing and then reinstalling
node_modules
?
Yes, thank you, I removed node modules and yarn-lock, someone suggested logout and login - did that as well. No luck.
Where do you get this error? Is there no other info with it?
well, there's :
Cannot read property 'sanity' of undefined

Stack:

TypeError: 
    at <http://localhost:3333/static/js/app.bundle.js:321593:21>
    at Ne (<http://localhost:3333/static/js/app.bundle.js:51915:14863>)
    at Ne (<http://localhost:3333/static/js/app.bundle.js:51915:14636>)
    at e.t.createStyles (<http://localhost:3333/static/js/app.bundle.js:51915:23025>)
    at e.t.renderStyles (<http://localhost:3333/static/js/app.bundle.js:51915:23264>)
    at h (<http://localhost:3333/static/js/app.bundle.js:51915:24607>)
    at <http://localhost:3333/static/js/app.bundle.js:51915:24423>
    at commitHookEffectListMount (<http://localhost:3333/static/js/vendor.bundle.js:22873:26>)
    at commitLifeCycles (<http://localhost:3333/static/js/vendor.bundle.js:22929:9>)
    at commitLayoutEffects (<http://localhost:3333/static/js/vendor.bundle.js:25945:7>)

(Your browsers Developer Tools may contain more info)
And console says:

GlobalStyle.js:20 Uncaught TypeError: Cannot read property 'sanity' of undefined
    at GlobalStyle.js:20
    at Ne (styled-components.browser.esm.js:1)
    at Ne (styled-components.browser.esm.js:1)
    at e.t.createStyles (styled-components.browser.esm.js:1)
    at e.t.renderStyles (styled-components.browser.esm.js:1)
    at h (styled-components.browser.esm.js:1)
    at styled-components.browser.esm.js:1
    at commitHookEffectListMount (react-dom.development.js:19732)
    at commitLifeCycles (react-dom.development.js:19788)
    at commitLayoutEffects (react-dom.development.js:22804)

react-dom.development.js:7608 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChildFromContainer (<http://localhost:3333/static/js/vendor.bundle.js:10749:15>)
    at unmountHostComponents (<http://localhost:3333/static/js/vendor.bundle.js:23589:9>)
    at commitDeletion (<http://localhost:3333/static/js/vendor.bundle.js:23642:5>)
    at commitMutationEffects (<http://localhost:3333/static/js/vendor.bundle.js:25924:11>)
    at HTMLUnknownElement.callCallback (<http://localhost:3333/static/js/vendor.bundle.js:3330:14>)
    at Object.invokeGuardedCallbackDev (<http://localhost:3333/static/js/vendor.bundle.js:3379:16>)
    at invokeGuardedCallback (<http://localhost:3333/static/js/vendor.bundle.js:3434:31>)
    at commitRootImpl (<http://localhost:3333/static/js/vendor.bundle.js:25651:9>)
    at unstable_runWithPriority (<http://localhost:3333/static/js/vendor.bundle.js:28900:12>)
    at runWithPriority$1 (<http://localhost:3333/static/js/vendor.bundle.js:14181:10>)

react_devtools_backend.js:2430 The above error occurred in the <l> component:
    in l (created by AppProvider)
    in Ge (created by ThemeProvider)
    in ThemeProvider (created by ThemeColorProvider)
    in ThemeColorProvider (created by AppProvider)
    in SnackbarProvider (created by AppProvider)
    in ToastProvider (created by AppProvider)
    in LayerProvider (created by AppProvider)
    in PortalProvider (created by AppProvider)
    in UserColorManagerProvider (created by AppProvider)
    in AppProvider (created by SanityRoot)
    in Ge (created by ThemeProvider)
    in ThemeProvider (created by SanityRoot)
    in SanityRoot
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
Error is in the studio.
Doesn't occur without power-table.
What version of sanity are you using? must be the latest now?
2.5.0 atm
Will try with the latest, thanks
2.5 isn’t crazy old, but might be the reason.
It helped, thank you!
Could have been the use of sanity-ui in the power plugin.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?