# Tables and layout

> Tables, columns, tabs and synced blocks.

Each example below is a real Notion block, rendered by notionic's built-in components, followed by a recipe to change it.

# Table

**In Notion:** type `/table`. Turn on a header row or column from the table's menu.

| Block | Built-in | Registry |
| --- | --- | --- |
| code | `<pre>` | Code Block |
| toggle | `<details>` | Collapsible |

**Renders as:** a `<table>` with its headers, which scrolls sideways when it's wider than the page. See [Supported blocks](https://notionic.dev/docs/supported-blocks).

```typescript
// Customize · table.tsx
import { NotionTable } from "@/components/notion-table"

// shadcn/ui's Table, from the registry.
<NotionRenderer blocks={blocks} components={{ table: NotionTable }} />
```

# Columns

**In Notion:** drag a block to the side of another, or type `/2 columns`.

A narrower column, 40% wide.

A wider column, 60% wide.

- With a list

**Renders as:** columns side by side at Notion's widths when their container has room, and stacked when it doesn't.

```typescript
// Customize · columns.tsx
import type { BlockProps } from "notionic"

// Equal columns from the md breakpoint, stacked below it.
export function ColumnList({ children }: BlockProps<"column_list">) {
  return <div className="flex flex-col gap-6 md:flex-row">{children}</div>
}

<NotionRenderer blocks={blocks} components={{ column_list: ColumnList }} />
```

# Tabs

**In Notion:** type `/tabs`.

**First tab**

Content of the first tab.

**Second tab**

Content of the second tab.

**Renders as:** a row of tabs and one panel at a time, without JavaScript. The row scrolls sideways when it doesn't fit.

```typescript
// Customize · tabs.tsx
import { NotionTabs } from "@/components/notion-tabs"

// shadcn/ui's Tabs, from the registry.
<NotionRenderer blocks={blocks} components={{ tab: NotionTabs }} />
```

# Synced block

**In Notion:** type `/synced block`, then copy and paste it to other pages.

This paragraph is inside a synced block. Edit it on any page and every copy changes.

**Renders as:** its content, with no wrapper, wherever it's placed. There's nothing to customize; style the blocks inside it instead.