MarzipanTable Plugins
Marzipan provides three powerful table plugins for different use cases, from simple markdown tables to interactive grid editors.
Overview
| Plugin | Best For | Features |
|---|---|---|
| tablePlugin | Basic table creation | Toolbar button, configurable defaults |
| tableGridPlugin | Visual table creation | Interactive grid overlay |
| tableGeneratorPlugin | Quick table insertion | Prompt-based sizing |
All plugins generate GitHub-flavored markdown tables:
markdown
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Table Plugin
Basic table creation with toolbar integration.
Installation
ts
import { Marzipan } from '@pinkpixel/marzipan';
import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';
new Marzipan('#editor', {
toolbar: true,
plugins: [tablePlugin()]
});
Options
ts
interface TablePluginOptions {
defaultColumns?: number; // Default: 3
defaultRows?: number; // Default: 3
}
Usage Example
ts
import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';
new Marzipan('#editor', {
plugins: [
tablePlugin({
defaultColumns: 4,
defaultRows: 5
})
]
});
Features
- ✅ Adds toolbar button for table insertion
- ✅ Configurable default dimensions
- ✅ Generates properly formatted markdown
- ✅ Includes header row with separators
- ✅ Empty cells ready for content
Generated Output
With defaultColumns: 3 and defaultRows: 3:
markdown
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| | | |
| | | |
| | | |
Table Grid Plugin
Interactive visual grid for table creation.
Installation
ts
import { tableGridPlugin } from '@pinkpixel/marzipan/plugins/tableGridPlugin';
new Marzipan('#editor', {
plugins: [tableGridPlugin()]
});
Options
ts
interface TableGridPluginOptions {
maxColumns?: number; // Default: 10 (alias: maxCols)
maxRows?: number; // Default: 10
}
Usage Example
ts
import { tableGridPlugin } from '@pinkpixel/marzipan/plugins/tableGridPlugin';
new Marzipan('#editor', {
plugins: [
tableGridPlugin({
maxColumns: 8,
maxRows: 8
})
]
});
Features
- ✅ Visual grid overlay for size selection
- ✅ Hover to preview table size
- ✅ Click to insert table
- ✅ Configurable maximum dimensions
- ✅ Intuitive UI similar to Word/Excel
How It Works
- Click the table grid button in toolbar
- Hover over the grid to select size
- See live preview (e.g., "3x4 table")
- Click to insert the table
Styling
The plugin exports tableGridStyles for custom styling:
ts
import { tableGridPlugin, tableGridStyles } from '@pinkpixel/marzipan/plugins/tableGridPlugin';
// Inject custom styles
const styleElement = document.createElement('style');
styleElement.textContent = tableGridStyles;
document.head.appendChild(styleElement);
new Marzipan('#editor', {
plugins: [tableGridPlugin()]
});
Table Generator Plugin
Quick table insertion with prompts.
Installation
ts
import { tableGeneratorPlugin } from '@pinkpixel/marzipan/plugins/tableGenerator';
new Marzipan('#editor', {
plugins: [tableGeneratorPlugin()]
});
Usage Example
ts
import { tableGeneratorPlugin } from '@pinkpixel/marzipan/plugins/tableGenerator';
new Marzipan('#editor', {
plugins: [tableGeneratorPlugin()]
});
Features
- ✅ Prompts user for table dimensions
- ✅ Fast keyboard-driven workflow
- ✅ Validates input
- ✅ Generates table immediately
How It Works
- Click the table generator button
- Enter number of columns (prompt)
- Enter number of rows (prompt)
- Table is inserted at cursor position
User Experience
Prompt 1: "How many columns?"
Input: 4
Prompt 2: "How many rows?"
Input: 3
Result:
| Column 1 | Column 2 | Column 3 | Column 4 |
|----------|----------|----------|----------|
| | | | |
| | | | |
Using Multiple Table Plugins
You can use multiple table plugins together:
ts
import {
tablePlugin,
tableGridPlugin,
tableGeneratorPlugin
} from '@pinkpixel/marzipan/plugins';
new Marzipan('#editor', {
toolbar: true,
plugins: [
tablePlugin({ defaultColumns: 3, defaultRows: 3 }),
tableGridPlugin({ maxColumns: 10, maxRows: 10 }),
tableGeneratorPlugin()
]
});
Each plugin adds its own toolbar button, giving users multiple ways to create tables.
Complete Example
ts
import { Marzipan } from '@pinkpixel/marzipan';
import {
tablePlugin,
tableGridPlugin
} from '@pinkpixel/marzipan/plugins';
const [editor] = new Marzipan('#editor', {
// Enable toolbar
toolbar: true,
// Add table plugins
plugins: [
// Basic table with defaults
tablePlugin({
defaultColumns: 3,
defaultRows: 4
}),
// Interactive grid picker
tableGridPlugin({
maxColumns: 8,
maxRows: 8
})
],
// Callback when tables are created
onChange: (value, instance) => {
const tableCount = (value.match(/\|/g) || []).length;
console.log('Tables in document:', Math.floor(tableCount / 3));
}
});
Markdown Table Syntax
All plugins generate GitHub-flavored markdown tables:
Basic Table
markdown
| Header 1 | Header 2 |
|----------|----------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Alignment
You can manually adjust column alignment after insertion:
markdown
| Left | Center | Right |
|:--------|:-------:|--------:|
| L1 | C1 | R1 |
| L2 | C2 | R2 |
:---- Left-aligned:---:- Center-aligned---:- Right-aligned
Tips for Tables
Best Practices
- Keep tables simple - Complex tables don't render well in markdown
- Use pipe alignment - Makes raw markdown more readable
- Consider CSV - For large data sets, link to CSV files instead
- Test rendering - Preview your tables before publishing
Cell Content
- Avoid using pipe characters
|inside cells - Escape pipes if needed:
\| - Keep cell content concise
Browser Compatibility
All table plugins work in:
- Chrome/Edge 60+
- Firefox 55+
- Safari 11+
See Also
- Plugin Overview - All available plugins
- Configuration - Configuring plugins
- Actions API - Custom table manipulation
- Bakeshop Demo - Live examples