Discussion about building a custom table in Sanity and implementing custom functionality with buttons.

34 replies
Last updated: Aug 24, 2021
Can anyone help me on how to build Table in sanity i have done some R&D and found sanity-react-table library will this be right approach?
AI Update

There are actually official table plugins for Sanity Studio that are better maintained than sanity-react-table. Here's what you should know:

For Sanity Studio v3 (and v4), use one of these official/well-maintained plugins:

@sanity/table - The official Sanity table plugin:

npm install @sanity/table

sanity-plugin-another-table - Another solid option for v3:

npm install sanity-plugin-another-table

Both of these are actively maintained and work with modern Sanity Studio versions. The official @sanity/table plugin is generally the safest bet since it's maintained by the Sanity team.

Why Not sanity-react-table?

The sanity-react-table library you found is likely outdated and may not be compatible with Sanity Studio v3/v4. The Sanity ecosystem has evolved significantly, and older community plugins may not work with the current architecture.

Installation & Usage

After installing, add the plugin to your sanity.config.ts:

import {defineConfig} from 'sanity'
import {table} from '@sanity/table'

export default defineConfig({
  // ... other config
  plugins: [
    table(),
    // ... other plugins
  ],
})

Then use it in your schema:

import {defineType} from 'sanity'

export default defineType({
  name: 'myDocument',
  type: 'document',
  fields: [
    {
      name: 'myTable',
      type: 'table', // The type added by the plugin
    },
  ],
})

Alternative: Structured Approach

That said, the official documentation suggests that approaching your schemas in a more structured manner (using arrays of objects instead of tables) can often pay dividends down the line. Tables can sometimes be an anti-pattern in structured content - consider whether your data might be better represented as an array of objects, which gives you more flexibility for querying and rendering on the frontend.

Custom Input Components (Advanced)

If the existing table plugins don't meet your needs, you can build a custom input component. For Sanity v3+, you'll import PatchEvent, set, and unset directly from the 'sanity' package rather than the old v2 locations. However, I'd recommend starting with one of the official plugins first before going the custom route.

If you need help implementing either approach or have specific table requirements, feel free to share more about your use case!

I need to create something like this.
here, activation code will be image , Date will be date at which it is published, used count will be maintained from backend it will be number field , action consist of 2 buttons with functionality of each , above i have create button for which i should generate image . I have gone through sanity-plugin-table can you help me on how i should configure according to my situation.
I am thinking of building custom react component for table i am not able to figure out how sanity-plugin-table will help me?
The usual way to structure these fields would be as an
array
type with an
object
field inside, and in that would be
activationCode
,
date
, etc.
You could then
display this data as a table in your frontend.
Is there a reason you need this to be
editable as a table in the Studio?
No i dont need this table as editable just i want the buttons in action to be functional .
You’ll need to build out a Custom Input if you need UI elements with custom functionality.
It’s completely possible to make something as complex as what you’re illustrating, but will be quite a piece of work!


https://www.sanity.io/docs/custom-input-widgets
Yes I need to build custom input Component first.
user T
i have build the table using simple css but i want to use tailwind css to customize my table can you guide me in installlation.
can you recommend some resource for it?
Hey!
The only way to get Tailwind compiling into the Studio is
very hacky so I can’t really “recommend” it sorry.
You can inject raw, global CSS into the Studio –
https://www.sanity.io/docs/styling#22b29fe9dcd4
I’ve previously configured this command line interface Tailbuild –
https://github.com/calebporzio/tailbuild to generate purged Tailwind CSS on the fly outside of the Studio.
It “works” but I 100% do not recommend it or could support it … but if you’d like to have a go, I won’t stop you!
😄
Thanks i will try this
I am stuck on implementing delete functionality i have created the array of object as you mentioned and then i want that on clicking deactivating button the isActive field which is boolean ,which displays active on true and inactive on false. i want to change the value of field on clicking on deactivate button
can you help me on how to set the value of the field?
can you help me on how to set the value of the field?
You’d need to look more at how the
PatchEvent
works in Custom Inputs:
https://www.sanity.io/docs/custom-input-widgets

import PatchEvent, {set, unset} from '@sanity/form-builder/PatchEvent'
I want to mutate the array of object i guess set and unset will be use for input fields
const handleDelete= (index)=>{      console.log(index);
      // onChange(PatchEvent.from(props.value[index].isActive ? set(false) : set(true)))
      console.log(props.value[index].isActive);
    }
Here the index is value of index of which row the delete button is clicked so i get that so i want to change that items field of array isActive field to false
I have created this mutation {  "mutations": [
    {
      "patch": {
        "id": "d1850463-00df-45e2-8df2-9ee48b605efa",
        "set": {
          "qrCode[0].isActive": 
true        }
      }
    }
  ]
}
I have created this mutation {  "mutations": [
    {
      "patch": {
        "id": "d1850463-00df-45e2-8df2-9ee48b605efa",
        "set": {
          "qrCode[0].isActive": 
true        }
      }
    }
  ]
}
can you guide me how to add this when dectivate button is clicked
If you wanted to go down that route, you can import the
sanityClient
and perform a patch that way.

https://www.sanity.io/docs/js-client#patch-update-a-document
If you wanted to go down that route, you can import the
sanityClient
and perform a patch that way.

https://www.sanity.io/docs/js-client#patch-update-a-document
so i have to write mutation inside client.fetch??
See the example under “Patch/update a document”
See the example under “Patch/update a document”
Okay will go through it
See the example under “Patch/update a document”
Can you help me on how to set the field? Here i have array of object in which i have isActive field which is true or false so i want to set it to false. My Props looks like document>qrCode>arrayof field like>activationCode,isActive,count,etc>so i want to set isActive field of [index ] to false.client
    .patch(props.document._id) // Document ID to patch
    //.set({"props.document.qrCode[1].isActive": true}) // Shallow merge
    // .inc({numSold: 1}) // Increment field by count
    .commit() // Perform the patch and return a promise
    .then((updatedBike) => {
      console.log('Hurray, the bike is updated! New document:')
      console.log(updatedBike)
    })
When i do this it crash my studio due to type mismatch i guess its due to i am giving object instead of array right?
My data structure looks like this :{
        name: 'qrCode',
        title: 'QR code',
        initalValue:[],
        type: "array",
        
      of: [{
        title: 'Activation',
        type: 'object',
        fields: [
          {
            title: 'Activation No',
            name: 'activationCode',
            type: 'number',
          },
          {
            title: 'Date',
            name: 'date',
            type: 'date',
          },
          {
            title: 'Used Count',
            name: 'usedCount',
            type: 'number',
          },
          {
            title: 'status',
            name: 'isActive',
            type: 'boolean',
          },
          {
              name: "qrImage",
              title: "QR Image",
              type: "image",   
          },
        ]
      }],
       
        inputComponent:tableField,
      //   // options: {
      //   //   // Simple conditional based on top-level document value
      //   //   hide: ({ document }) => !document.partner, // hide if internal article
      //   // },
      }
Can you help me i got stuck on how to add download functionality i want that image url (QR) and activation code both gets downloaded in a single image. can you suggest me any library or package?
Sorry not sure about that. Where are the images coming from? You may need some other service to combine these images into one.
Hey
user T
thanks for the help in sanity i did it i created the table in sanity as we discussed above . Thanks sanity community for support!!!
Hey
user T
thanks for the help in sanity i did it i created the table in sanity as we discussed above . Thanks sanity community for support!!!
Great stuff~!

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?