How to display data in tabular form in Sanity Studio preview pane

You can create a custom table view in the preview section of Sanity Studio that displays all published documents of a specific type, with each row being clickable to open the document in edit mode. Here's how to approach this:

Using Structure Builder with a Custom Component

Based on a solution from the Sanity community, you can use the Structure Builder API with a custom component by serializing a documentList and overriding it with your component:

S.listItem()
  .title("Customers")
  .child(
    Object.assign(
      S.documentList()
        .filter('_type == "customer"')
        .title("Customers")
        .serialize(), 
      {
        __preserveInstance: true,
        key: 'customersTable',
        id: 'customersTable',
        type: 'component',
        component: CustomersTableView,
      }
    ),
  )

This approach maintains the internal document list behavior (so the pane router works correctly) while rendering your custom table component.

Building Your Custom Table Component

In your CustomersTableView component, you can:

1. Query all published documents using a GROQ query with the Sanity client
2. Display them in a table with the fields you want to show
3. Make rows clickable using the router to navigate to edit mode

For navigation, you have a few options:

• Use the usePaneRouter hook from Sanity to programmatically navigate
• Use IntentLink component from sanity/router to create links that open documents in new panes
• Reference the orderable-document-list plugin which implements similar functionality

Alternative: Bulk Actions Table Plugin

If you want a ready-made solution, check out the Sanity Bulk Actions Table plugin. This plugin provides a table view with bulk actions, column selection, and document management capabilities that might meet your needs without custom development.

The key insight is that you can override the default documentList component while preserving its internal structure, which ensures the pane router behaves correctly when clicking rows to open documents for editing.