How to add table headers in sanity-table plugin?

The @sanity/table plugin doesn't have built-in support for designated table headers with <thead> and <th> elements. By default, it stores table data as rows and cells without distinguishing headers from regular content.

The common approach is to treat the first row as headers when rendering the table on your frontend. This is exactly what you'd need to handle yourself.

Here's how you can render the table with proper <thead> and <th> support for accessibility when using the @sanity/table plugin with @portabletext/react:

function BlockTable(props) {
  const [head, ...rows] = props.value.rows
  const isBiDirectional = head.cells[0].length === 0

  return (
    <table>
      <thead>
        <tr>
          {head.cells.map(cell => (
            <th key={cell}>{cell}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, index) => (
          <tr key={index}>
            {row.cells.map((cell, index) => {
              const Component = isBiDirectional && index === 0 ? 'th' : 'td'
              return <Component key={index}>{cell}</Component>
            })}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

Then add this to your PortableText components:

const components = {
  types: {
    table: BlockTable,
    // other types...
  },
}

<PortableText components={components} value={_rawField} />

This approach:

• Treats the first row as headers (<thead> with <th> elements)
• Handles bi-directional tables (where the first column might also be headers)
• Makes the table accessible for screen readers

As noted in this community discussion, proper header support is important for accessibility, so make sure you're using <th> elements rather than just <td> for all cells.