How to put a Table in Block Content

14 replies

Last updated: Dec 23, 2021

user S

user Y

is there a way to put a table in block content?

AI Update

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
  ]
})

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:

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.
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.

Similar to this

There is this table plugin that you can use to add tables to the Portable Text Editor, but the drawback is that the cells themselves don't support rich text (I.e. you'll only be able to input a plain string).

What is defined as "rich text"? I only plan on putting content like the screenshot above shows

Also, how would you add that to the

blockContent

type?

Adding custom blocks is pretty simple. Just add the type to your existing block content array. More on that here . If you want to add color/bold/italics or things along those lines that plugin does not support it.

Might be a stupid question but what is the difference between

type: "block"

and

type: "blockContent"

When I have

{
      name: "body",
      title: "Body",
      type: "array",
      of: [
        {
          type: "blockContent",
        },
        {
          type: "table",
        },
      ],
      validation: (Rule) => Rule.required(),
    },

I get this in my local for an item that I haven't added any content to

And then for a post that I already had

blockContent

in, it looks like this

No, that's a super common question!

blockContent

is a reusable type that people define themselves that contains your array of blocks. Something like this:

export default {
  name: 'blockContent',
  title: 'Block Content',
  type: 'array',
  of: [
    {
      type: 'block'
    }
  ]
}

The

block

schema type is the basic type that comes in the Studio. It's the type that you add to an array, like in the example above.

You may have to wrap your table in an object to get it to behave properly with block content.

I didn't even realize I had this 😅

Ok, just tested it. I had to wrap my table in an object:

{
      name: 'table',
      title: 'Table',
      type: 'object',
      fields: [
        {name: 'table', type: 'table'}
      ]
    },

Buuuut: it looks like you have to
customize the preview of the table object to get it to show as a table outside of the edit modal.

I'll play around with it this afternoon to see if I can hack one together.

No worries, I decided not to go the table route as that plugin does not support header rows nor does copy and paste work in it... I put together a table that is 3 columns by 36 rows and did not want to type that all out again 😢

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo