
Tables and Column Layouts
Sometimes plain text is not enough to convey information clearly. Tables and column layouts help you present structured data and organize content visually.
Tables
#Tables are perfect for comparing features, displaying data, or creating reference sheets. The library supports both column headers and row headers.
Feature Comparison
#Here is a comparison of popular frontend frameworks:
| Framework | Language | SSR Support | Learning Curve |
|---|---|---|---|
| Next.js | TypeScript | Built-in | Moderate |
| Nuxt | TypeScript | Built-in | Moderate |
| Gatsby | JavaScript | Static only | Steep |
| Remix | TypeScript | Built-in | Moderate |
| Astro | TypeScript | Built-in | Easy |
Notion Block Support Matrix
#This table shows which blocks are supported by notion-to-jsx:
| Block Type | Supported | Notes |
|---|---|---|
| Paragraph | Yes | Full rich text support |
| Heading 1-3 | Yes | Used for table of contents |
| Bulleted List | Yes | Supports nesting |
| Numbered List | Yes | Supports nesting |
| Toggle | Yes | Collapsible with children |
| Quote | Yes | Blockquote styling |
| Code | Yes | PrismJS syntax highlighting |
| Image | Yes | Lazy loading and captions |
| Video | Yes | YouTube embed support |
| Bookmark | Yes | OpenGraph metadata |
| Embed | Yes | CodeSandbox and CodePen |
| Table | Yes | Column and row headers |
| Column Layout | Yes | Side-by-side content |
Column Layouts
#Columns let you place content side by side. This is useful for comparing concepts, showing before-and-after examples, or creating visual variety in your posts.
Columns are created using the column list and column blocks in Notion. Each column can contain any type of block including text, images, code, and lists.
When to Use Columns
#- Comparisons: Show two approaches side by side
- Visual Balance: Break up long vertical content
- Related Content: Group related items together
When to Avoid Columns
#- Mobile Readers: Columns may stack on small screens
- Long Content: Columns work best with short, parallel content
- Code Blocks: Wide code blocks may overflow narrow columns
Combining Tables and Columns
#You can use tables inside columns for compact data presentation, or place a table after a descriptive paragraph to provide supporting data for your narrative.
The key is to choose the right layout for your content. Use tables for structured data with multiple attributes, and columns for visual side-by-side comparisons.