📊 Table

Overview

Tables in Yappy provide a powerful way to display structured data on your canvas. They support features like sortable columns, resizable columns and rows, text alignment, custom styling, and clipboard integration with spreadsheet applications.

Creating a Table

Using the Toolbar

1. Select the Table tool from the shapes menu in the toolbar
2. Click and drag on the canvas to define the table size
3. Release to create the table with default 3×3 dimensions

Using the API

// Create a basic 3x3 table
const tableId = Yappy.createTable(100, 100, 400, 200);

// Create a 5x4 table with custom styling
const tableId = Yappy.createTable(100, 100, 500, 300, 5, 4, {
    tableHeaderColor: '#3b82f6',
    tableHeaderTextColor: '#ffffff',
    tableRowColor: '#f0f9ff',
    tableAltRowColor: '#e0f2fe'
});

Editing Cells

Interactive Editing

• Double-click a cell or press Enter/F2 to start editing
• Type your content - text will wrap automatically
• Press Tab to save and move to the next cell, Shift+Tab to go back
• Press Enter to save and move down, Shift+Enter for newline
• Use Arrow keys to navigate between cells when not editing
• Just start typing to replace cell content
• Press Delete to clear cell(s), Escape to cancel editing

Moving Tables

When a table is selected, a move handle (blue circle with arrows) appears at the top-left corner. Drag this handle to reposition the table. You can also click and drag from any cell area to move the table — a short click selects the cell, while a longer drag moves the table.

Using the API

// Set cell value (row 0 is header when headers enabled)
Yappy.setTableCell(tableId, 0, 0, 'Name');    // Header row
Yappy.setTableCell(tableId, 1, 0, 'Alice');   // First data row
Yappy.setTableCell(tableId, 1, 1, '30');

// Get cell value
const value = Yappy.getTableCell(tableId, 1, 0);  // Returns 'Alice'

// Set all data at once
Yappy.setTableData(tableId, [
    ['Product', 'Price', 'Stock'],
    ['Apple', '$1.00', '150'],
    ['Banana', '$0.50', '200'],
    ['Orange', '$0.75', '100']
]);

Row & Column Operations

Context Menu

Right-click on a table cell to access these operations:

• Insert Row Above/Below - Add a new row at the clicked position
• Delete Row - Remove the current row (minimum 1 row required)
• Insert Column Left/Right - Add a new column
• Delete Column - Remove the current column (minimum 1 column required)

Using the API

// Insert row at index (0-based, includes header)
Yappy.insertTableRow(tableId, 2);    // Insert at position 2

// Delete row at index
Yappy.deleteTableRow(tableId, 2);

// Insert column at index
Yappy.insertTableColumn(tableId, 1); // Insert at position 1

// Delete column
Yappy.deleteTableColumn(tableId, 1);

Resizing Columns & Rows

Manual Resize

• Hover over a column edge (between headers) - cursor changes to resize indicator
• Click and drag to resize the column
• Row edges can be resized the same way

Auto-fit Column Width

Double-click on a column edge to automatically fit the column width to its content. This measures all cell content and sets the optimal width.

Using the API

// Set column width as fraction (0-1, all columns must sum to 1)
Yappy.setTableColumnWidth(tableId, 0, 0.5);  // First column = 50%

// Widths are automatically redistributed to maintain total = 1

Sorting Data

Interactive Sorting

• Click on any header cell to sort by that column
• Click again to toggle between ascending and descending
• Sort indicator (▲/▼) appears in the active column header
• Sorting is numeric-aware - numbers sort correctly (3, 20, 100 not 100, 20, 3)

Using the API

// Sort by column index
Yappy.sortTableColumn(tableId, 0, 'asc');   // Sort by first column, ascending
Yappy.sortTableColumn(tableId, 1, 'desc');  // Sort by second column, descending

Column Alignment

Context Menu

Right-click on a table cell → Align Column submenu:

• Left - Align text to the left
• Center - Center text (default)
• Right - Align text to the right (useful for numbers)

A checkmark (✓) indicates the current alignment.

Using the API

// Set column alignment
Yappy.setTableColumnAlignment(tableId, 0, 'left');
Yappy.setTableColumnAlignment(tableId, 1, 'center');
Yappy.setTableColumnAlignment(tableId, 2, 'right');

Table Styling

Available Style Options

Using the API

// Apply custom styling
Yappy.setTableStyle(tableId, {
    headerColor: '#3b82f6',
    headerTextColor: '#ffffff',
    rowColor: '#f0f9ff',
    altRowColor: '#e0f2fe'
});

Clipboard Operations

Paste from Spreadsheet

1. Copy data from Excel, Google Sheets, or any spreadsheet
2. Select a table in Yappy
3. Press Ctrl+V to paste
4. Or right-click → Table → Paste Table Data

Copy to Clipboard

Right-click on a table cell → Table → Copy Table Data

Data is copied as TSV (tab-separated values), compatible with all spreadsheet applications.

Using the API

// Copy table data to clipboard
await Yappy.copyTableToClipboard(tableId);

// Paste clipboard data into table
await Yappy.pasteIntoTable(tableId);

// Export as CSV string
const csv = Yappy.exportTableAsCSV(tableId);

// Import from CSV/TSV string
Yappy.importTableFromCSV(tableId, csvString);

Column Reordering

Drag and drop columns to reorder them:

1. Click and hold on a column header
2. Drag sideways — the target column highlights and a blue insertion line shows exactly where the column will land
3. Release to drop the column in its new position

Merging Cells

Combine multiple cells into a single larger cell:

Interactive Merge

1. Hold Shift or Ctrl and click on the first cell
2. While still holding the modifier key, click on the last cell of the range (or drag to select)
3. Right-click to open the context menu
4. Select Table → Merge Cells

Unmerge Cells

To split a merged cell back into individual cells:

1. Right-click on any merged cell
2. Select Table → Unmerge Cells

Using the API

// Merge cells from (row 1, col 0) to (row 2, col 1)
Yappy.mergeCells(tableId, 1, 0, 2, 1);

// Unmerge a merged cell at position (row 1, col 0)
Yappy.unmergeCells(tableId, 1, 0);

// Get all merged regions in a table
const merges = Yappy.getMergedCells(tableId);
// Returns: [{ startRow: 1, startCol: 0, endRow: 2, endCol: 1 }, ...]

Cell Formatting

Format cell values as numbers, currencies, percentages, or dates:

Format Types

Applying Formats

You can format an entire column or specific cells:

Format Entire Column

1. Right-click on any cell in the column
2. Navigate to Table → Format Cells
3. Choose a format type with (Column) suffix (e.g., "Currency (Column)")
4. This applies the format to all body cells in that column (excluding headers)

Format Specific Cells

1. Select a cell or range of cells (using Shift+Click)
2. Right-click to open the context menu
3. Navigate to Table → Format Cells
4. Choose a format type with (Cell) suffix (e.g., "Currency (Cell)")

Custom Cell Borders

Apply custom border styles and colors to cells:

Border Positions

• All Borders - Border on all four sides
• Outside Borders - Border only on the outer edges of selected range
• Inside Borders - Border only on internal grid lines
• Top/Bottom/Left/Right - Single edge borders
• No Borders - Remove all borders

Border Styles

• Thin - 1px line width
• Medium - 2px line width
• Thick - 3px line width

Applying Borders

1. Select a cell or range of cells
2. Right-click to open the context menu
3. Navigate to Table → Cell Borders
4. Choose border position, then optionally select style or color

Scripting (API)

Every table can be built and driven from code. The API is exposed on the global window.Yappy object, so you can call these methods from the browser console, a script element, or the in-app scripting panel. The Using the API snippets throughout this page all use these methods; the table below is the full reference.

Keyboard Shortcuts

Table Animations

Tables have 12 dedicated animation presets that leverage their internal structure. These are available in the Animation Panel when a table is selected.