Customizing previews-list in Sanity headless CMS

In order to customize the document list in sanity studio, need to add preview key in Schema type.

Preview

Our user schema has an avatar url field and what we want is to place two column row, the avatar in the left and user name on the right.

Lets add the preview key to the end of the field definition.

export default {
    name:'user',
    type:'document',
    title:'User',
    icon:FcBusinesswoman,
    fields:[
    ...
    ],
    preview:{
        select:{
            title:'name',
            imageUrl:  'avatar' 

In the preview we selected the name field as title and imageUrl ad avatar field. To use the selected title and ImageUrl we need a component. Using prepare function Sanity let us define a component.

 preview:{
        select:{
            title:'name',
            imageUrl:  'avatar' 
        },prepare(selection){
            const {title,imageUrl} =selection;
            return{
                title:title,
                media:<img src={imageUrl} alt=''/>
            }
        }
    }

We first destructure the selection props and use media key to provide the avatar.