How to add a table in Sanity block content?

Yes, you can add tables to block content in Sanity using the official @sanity/table plugin.

This is the officially maintained version for Sanity Studio v3 (and v4). The plugin was originally created by community members and has been adopted by Sanity.io for ongoing maintenance.

Installation

Install the plugin via npm:

npm install @sanity/table

Usage

First, add the plugin to your Sanity configuration:

// sanity.config.ts
import { defineConfig } from 'sanity'
import { table } from '@sanity/table'

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

Then use it in your schema by adding the table type to your block content array:

defineField({
  name: 'body',
  type: 'array',
  of: [
    { type: 'block' },
    { type: 'table' }, // Add the table type here
    // other custom block types
  ]
})

Important Limitations

The @sanity/table plugin has one significant limitation: table cells only support plain strings and do not support rich text. This means you can't add formatting like bold, italic, links, or other rich text features within table cells.

Alternative Approaches

Because of this limitation, many developers consider alternative approaches:

1. Structured arrays: Create an array of objects to represent tabular data, then handle the table rendering on your frontend. This gives you more flexibility with data types and validation.

2. Custom serializers: When you do use the table plugin, you'll need custom serializers to properly render the table data in your frontend (using @portabletext/react or similar).

A Word of Caution

The plugin documentation itself notes: "Sometimes a table is just what you need. However, before using the Table plugin, consider if there are other ways to model your data that are easier to edit, validate, and query." A more structured schema approach often pays off in the long run with better content management and querying capabilities.