Components

Table

A table with a header row and plain-text cells.

Table block

Signal	What it measures	What you control
Relevance	Does the page answer this query?	Topic and structure
Quality	Is it trustworthy and original?	Sources and depth
Usability	Does it load and read well?	Your templates

The block

As the API returns it, from the example article:

json

{  "type": "table",  "headers": [    "Signal",    "What it measures",    "What you control"  ],  "rows": [    [      "Relevance",      "Does the page answer this query?",      "Topic and structure"    ],    [      "Quality",      "Is it trustworthy and original?",      "Sources and depth"    ],    [      "Usability",      "Does it load and read well?",      "Your templates"    ]  ],  "id": "table-10"}

Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

tsx

import { Article, defaultComponents } from "@/components/seoforsaas/article";import type { TableBlock } from "@/lib/seoforsaas/types";const DefaultTable = defaultComponents.table;function MyTable({ block }: { block: TableBlock }) {  return (    <div className="my-table">      <DefaultTable block={block} />    </div>  );}<Article blocks={article.blocks} components={{ table: MyTable }} />

Notes

Wrapped in a scrolling container, so wide tables never break a mobile layout.