Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

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?
Aug 5, 2021, 4:44 AM
I need to create something like this.
Aug 5, 2021, 8:24 AM
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?
Aug 5, 2021, 8:27 AM
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?
Aug 5, 2021, 1:08 PM
No i dont need this table as editable just i want the buttons in action to be functional .
Aug 5, 2021, 1:14 PM
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
Aug 5, 2021, 1:19 PM
Yes I need to build custom input Component first.
Aug 5, 2021, 1:29 PM
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.
Aug 9, 2021, 1:39 PM
can you recommend some resource for it?
Aug 9, 2021, 1:40 PM
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!
😄
Aug 9, 2021, 2:11 PM
Thanks i will try this
Aug 10, 2021, 4:29 AM
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
Aug 10, 2021, 11:16 AM
can you help me on how to set the value of the field?
Aug 10, 2021, 11:45 AM
can you help me on how to set the value of the field?
Aug 10, 2021, 11:45 AM
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'
Aug 10, 2021, 11:47 AM
I want to mutate the array of object i guess set and unset will be use for input fields
Aug 10, 2021, 11:50 AM
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
Aug 10, 2021, 11:52 AM
I have created this mutation {  "mutations": [
    {
      "patch": {
        "id": "d1850463-00df-45e2-8df2-9ee48b605efa",
        "set": {
          "qrCode[0].isActive": 
true        }
      }
    }
  ]
}
Aug 10, 2021, 1:36 PM
I have created this mutation {  "mutations": [
    {
      "patch": {
        "id": "d1850463-00df-45e2-8df2-9ee48b605efa",
        "set": {
          "qrCode[0].isActive": 
true        }
      }
    }
  ]
}
Aug 10, 2021, 1:36 PM
can you guide me how to add this when dectivate button is clicked
Aug 10, 2021, 1:37 PM
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
Aug 10, 2021, 1:41 PM
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
Aug 10, 2021, 1:41 PM
so i have to write mutation inside client.fetch??
Aug 10, 2021, 1:53 PM
See the example under “Patch/update a document”
Aug 10, 2021, 1:57 PM
See the example under “Patch/update a document”
Aug 10, 2021, 1:57 PM
Okay will go through it
Aug 10, 2021, 2:03 PM
See the example under “Patch/update a document”
Aug 10, 2021, 1:57 PM
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)
    })
Aug 12, 2021, 5:30 AM
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?
Aug 12, 2021, 5:33 AM
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
      //   // },
      }
Aug 12, 2021, 5:34 AM
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?
Aug 16, 2021, 4:22 AM
Sorry not sure about that. Where are the images coming from? You may need some other service to combine these images into one.
Aug 17, 2021, 7:22 AM
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!!!
Aug 24, 2021, 11:12 AM
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!!!
Aug 24, 2021, 11:12 AM
Great stuff~!
Aug 24, 2021, 11:48 AM

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.

Was this answer helpful?