How to Add Custom Sorting Options to Sanity CMS Document Lists

I have quite busy content scheduling. Since I post once a day, I often schedule posts in advance in bulk. Recently, I wanted to have a way to see when posts are scheduled to be published and sort them by publication date in my Sanity Studio. After digging through Sanity's structure API documentation, I discovered exactly how to customize document list sorting. This guide shows you how to add custom sorting options to any document type in your Sanity CMS.

Understanding Sanity's Default Structure

By default, Sanity provides basic sorting options like "Sort by title," "Sort by last edited," and "Sort by created." These work fine for simple workflows, but when you're managing scheduled content or need domain-specific sorting, you quickly hit limitations.

The key insight is that Sanity's structureTool allows you to completely customize how document lists behave through the structure configuration. Instead of using the simple documentTypeListItem, you can create custom list items with specific ordering options.

Setting Up Custom Structure Configuration

First, you need a custom structure file. If you don't already have one, create it at src/lib/sanity/structure.ts:

// File: src/lib/sanity/structure.ts
import type {StructureResolver} from 'sanity/structure'

export const structure: StructureResolver = (S) =>
  S.list()
    .title('Blog')
    .items([
      S.documentTypeListItem('post').title('Posts'),
      S.documentTypeListItem('category').title('Categories'),
      S.documentTypeListItem('author').title('Authors'),
    ])

This basic structure gives you the default Sanity behavior. The magic happens when you replace the simple documentTypeListItem with a custom listItem that has specific ordering configuration.

Adding Custom Sorting Options

Here's where the real customization begins. Replace the basic Posts list item with a fully customized version:

// File: src/lib/sanity/structure.ts
import type {StructureResolver} from 'sanity/structure'

export const structure: StructureResolver = (S) =>
  S.list()
    .title('Blog')
    .items([
      S.listItem()
        .title('Posts')
        .child(
          S.documentTypeList('post')
            .title('Posts')
            .defaultOrdering([{field: 'publishedAt', direction: 'desc'}])
            .menuItems([
              S.orderingMenuItem({
                title: 'Published Date (Newest First)',
                by: [{field: 'publishedAt', direction: 'desc'}]
              }),
              S.orderingMenuItem({
                title: 'Published Date (Oldest First)', 
                by: [{field: 'publishedAt', direction: 'asc'}]
              }),
              S.orderingMenuItem({
                title: 'Title A-Z',
                by: [{field: 'title', direction: 'asc'}]
              }),
              S.orderingMenuItem({
                title: 'Last Edited',
                by: [{field: '_updatedAt', direction: 'desc'}]
              }),
              S.orderingMenuItem({
                title: 'Created Date',
                by: [{field: '_createdAt', direction: 'desc'}]
              })
            ])
        ),
      S.documentTypeListItem('category').title('Categories'),
      S.documentTypeListItem('author').title('Authors'),
    ])

This configuration does several important things. The defaultOrdering sets what users see when they first load the Posts list. In this case, posts appear sorted by publication date with the newest first. The menuItems array defines all the sorting options available in the dropdown menu, giving users complete control over how they view their content.

Each orderingMenuItem accepts a title that appears in the UI and a by array that defines the actual sorting logic. You can sort by any field in your document schema, and you can even sort by multiple fields by adding more objects to the by array.

Sorting by Custom Fields

The real power of this approach becomes clear when you need to sort by fields specific to your content model. Let's say you have a priority field for posts:

S.orderingMenuItem({
  title: 'Priority (High to Low)',
  by: [{field: 'priority', direction: 'desc'}]
}),
S.orderingMenuItem({
  title: 'Estimated Reading Time',
  by: [{field: 'estimatedReadingTime', direction: 'asc'}]
})

You can sort by reference fields too. If you want to sort posts by author name:

S.orderingMenuItem({
  title: 'Author Name',
  by: [{field: 'author.name', direction: 'asc'}]
})

The dot notation works for any nested field or reference relationship in your schema.

Multi-Field Sorting

Sometimes you need to sort by multiple criteria. Sanity supports this by accepting multiple objects in the by array:

S.orderingMenuItem({
  title: 'Category, then Date',
  by: [
    {field: 'category.title', direction: 'asc'},
    {field: 'publishedAt', direction: 'desc'}
  ]
})

This sorts posts first by category title alphabetically, then by publication date within each category.

Applying to Other Document Types

This pattern works for any document type, not just posts. Here's how you might customize a product list in an e-commerce site:

S.listItem()
  .title('Products')
  .child(
    S.documentTypeList('product')
      .title('Products')
      .defaultOrdering([{field: 'createdAt', direction: 'desc'}])
      .menuItems([
        S.orderingMenuItem({
          title: 'Price (Low to High)',
          by: [{field: 'price', direction: 'asc'}]
        }),
        S.orderingMenuItem({
          title: 'Price (High to Low)',
          by: [{field: 'price', direction: 'desc'}]
        }),
        S.orderingMenuItem({
          title: 'Stock Level',
          by: [{field: 'inventory', direction: 'asc'}]
        }),
        S.orderingMenuItem({
          title: 'Category, then Name',
          by: [
            {field: 'category.title', direction: 'asc'},
            {field: 'title', direction: 'asc'}
          ]
        })
      ])
  )

Configuring Your Sanity Studio

Make sure your sanity.config.ts file includes the structure configuration:

// File: sanity.config.ts
import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {structure} from './src/lib/sanity/structure'

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

Once you save these changes and restart your Sanity Studio, you'll see your custom sorting options in the dropdown menu. The default ordering will be applied automatically when users first visit the Posts list.

Conclusion

Custom sorting transforms how content creators interact with their Sanity Studio. Instead of being limited to generic options like "last edited," you can provide sorting that matches your specific content workflows. Whether you're managing scheduled blog posts, prioritizing tasks, or organizing products by price, this approach gives you complete control over document list presentation.

The key insight is replacing simple documentTypeListItem calls with custom listItem configurations that include defaultOrdering and menuItems. This pattern works for any document type and any field in your schema.

To make your document lists even more informative, you might want to customize what information appears for each document. Check out my companion guide on customizing document previews in Sanity Studio to show publication dates, status indicators, and other key details directly in your lists.

Let me know in the comments if you have questions about implementing custom sorting for your specific use case, and subscribe for more practical Sanity CMS guides.

Thanks, Matija