Skip to content
Get help on Slack

Discussion about building a table component with formatting options in Sanity

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.
Mar 23, 2021, 5:03 PM
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.
Mar 23, 2021, 5:54 PM
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.
Mar 23, 2021, 5:55 PM
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.
Mar 23, 2021, 5:57 PM
Hey Weronika! I’ve seen this issue come up before. Have you tried removing and then reinstalling 
node_modules
?
Mar 23, 2021, 6:02 PM
Yes, thank you, I removed node modules and yarn-lock, someone suggested logout and login - did that as well. No luck.
Mar 23, 2021, 6:04 PM
Where do you get this error? Is there no other info with it?
Mar 23, 2021, 6:06 PM
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.
Mar 23, 2021, 6:09 PM
Error is in the studio.
Mar 23, 2021, 6:09 PM
Doesn't occur without power-table.
Mar 23, 2021, 6:09 PM
What version of sanity are you using? must be the latest now?
Mar 23, 2021, 6:10 PM
2.5.0 atm
Mar 23, 2021, 6:11 PM
Will try with the latest, thanks
Mar 23, 2021, 6:12 PM
2.5 isn’t crazy old, but might be the reason.
Mar 23, 2021, 6:14 PM
It helped, thank you!
Mar 23, 2021, 6:15 PM
Could have been the use of sanity-ui in the power plugin.
Mar 23, 2021, 6:16 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?