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

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?

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.

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

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 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 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~!