# Table

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



## The block

As the API returns it, from the [example article](https://api.seoforsaas.dev/public/v1/fixtures/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.