Table Layer

Table layers bring structured, grid-based data organization to Component.Studio. Perfect for stat blocks, item lists, ability tables, scoreboards, and any design that needs organized rows and columns of information, table layers combine the power of spreadsheet-like organization with the visual flexibility of Component.Studio's design system. With intelligent sizing, customizable borders, cell backgrounds, and full integration with template variables, tables transform complex data into clear, readable layouts.

Understanding Table Structure

Tables are grids of cells organized in rows and columns. Think of them like mini spreadsheets embedded in your design. Each cell can contain text (including template variables and inline icons), and you have precise control over how the table divides its space among rows and columns.

Position and Size

Tables use standard layer positioning, but their internal structure is where things get interesting.

Table Cells

The Table Cells section is where you define your table's grid structure and populate it with content.

Grid Dimensions

Column Sizing

Row Sizing

Cell Content Grid

The Table Cells section displays a visual grid of all your cells. Click any cell to open an editor where you can enter content. Each cell is a text field that supports:

• Plain text: Type directly into cells
• Template variables: Use {{row.variableName}} to pull data from your dataset
• Inline markup: Use styles like <bold>bold</bold> for emphasis
• Inline icons: Insert <icon/> to embed images inline with text
• Formulas and calculations: Any expression that works in text layers works in table cells

Quick Fill for Rows

The Quick Fill feature provides a fast way to populate an entire row at once. Click the three dots next to any row to open the Quick Fill dialog.

Reordering Columns and Rows

You can reorganize your table by dragging column headers or using row movement controls. This moves the cell content, not just visual layout.

• Drag columns: Click and drag column letter headers (A, B, C) to reorder columns left-to-right
• Move rows: Click the arrow icons next to row numbers to shift row content up or down
• Content moves, not labels: The column letters and row numbers stay in place - it's the cell values that relocate

Table Formatting

Table formatting controls the visual presentation: spacing, colors, borders, and separators that define the table's appearance.

Cell Spacing

Cell Backgrounds

Borders and Separators

Text Formatting

Table layers share all the text formatting properties of text layers. These settings apply to all text within the table cells.

Advanced Cells

Advanced Cells is a powerful feature that lets you overlay any layer type on top of specific table cells. This enables complex designs where different cells have different backgrounds, custom text formatting, images, or even nested layers.

How Advanced Cells Work

When you enable advanced cells for a specific cell, you can attach a layer to that cell. The layer automatically positions and sizes itself to match the cell's dimensions, and moves with the cell if you reorganize the table.

Table Functions

Table functions are special template functions that let you reference table cell dimensions and positions. These are primarily used with Advanced Cells but can be used anywhere in your design.

Working with Table Layers

Common Use Cases

Design Tips

• Start with equal sizing: Use equal column and row sizing initially, then switch to manual only when you need specific proportions
• Use 0 for flexibility: In manual sizing, use 0 for columns/rows that should adapt to available space
• Padding for readability: Cell padding of 8-15px usually creates readable tables without wasting too much space
• Consider alignment: Numbers often look better right-aligned, labels left-aligned, and titles center-aligned
• Leverage styles: Define a "table-header" and "table-body" style for consistent table formatting across your game
• Border minimalism: Sometimes fewer borders create cleaner designs - try row separators only
• Advanced cells for headers: Use Advanced Cells to give header rows colored backgrounds that distinguish them from data rows

Performance Considerations

Tables are rendered efficiently, with text caching for cells. However, very large tables (approaching 10×10) with complex cell content can impact rendering speed. For optimal performance:

• Keep tables to the size you actually need (don't create 10×10 if you only use 4×6)
• Minimize use of advanced cells where possible - they add layer complexity
• Simple text content renders faster than cells with many inline icons or complex markup

Troubleshooting

My column widths don't work

• Check that Column Sizing is set to "Manual" (not "Equal")
• Verify your Column Widths list has values for each column (or at least one value)
• Ensure fixed widths don't sum to more than your table width
• Remember: 0 means "flexible" not "zero pixels"
• Check for typos or non-numeric values in the comma-separated list

Text is cut off or overflowing cells

• Increase Cell Padding to give text more room
• Make columns wider (increase table width or adjust Column Widths)
• Reduce font size or enable Fit To Size to auto-shrink text
• Check if long words are forcing overflow - consider shorter content or text wrapping
• Verify vertical alignment isn't pushing text out of view

I can't see cell backgrounds

• Ensure "Color Cells" is enabled (true)
• Check that Cell Background Opacity isn't set to 0
• Verify Cell Background Color isn't the same as your background
• Cell Margin creates gaps where background won't show - that's normal

Borders are missing or look wrong

• Check that the appropriate Draw options are enabled (Row Separators, Column Separators, etc.)
• Verify Stroke Width isn't 0
• Ensure Stroke Color isn't transparent or matching your background
• If borders overlap strangely, it's because multiple border types are enabled - disable some for cleaner results

Quick Fill isn't working as expected

• Remember to include commas for every column, even if skipping cells (use double commas: ,,)
• Trailing commas create empty cells at the end
• Extra values beyond your column count are silently ignored
• Quick Fill replaces all specified cells - it doesn't merge with existing content

Advanced Cell layer isn't positioned correctly

• Verify you're using the correct table function syntax: cellLeft('TableName:CellName', true)
• Check that table layer name matches exactly (case-sensitive)
• Ensure cell reference uses correct column letter and row number (like 'B2', not 'B02' or '2B')
• Try excludePadding = true for most layouts (positions within content area, not including padding)
• Make sure the overlaid layer's anchor point is set to top-left for predictable positioning

Table functions return errors

• Check table layer name spelling and case
• Verify cell reference format: 'LayerName:A1' with quotes
• Ensure the cell exists (column letter and row number are within your table dimensions)
• Table functions only work after the table layer is created - you can't reference tables that don't exist yet

Table layers bring order to complex data, transforming rows and columns of information into clear, readable layouts. Master sizing for perfect proportions, leverage borders and backgrounds for visual structure, use template variables for dynamic data, and explore Advanced Cells for sophisticated designs. With tables, organized data becomes organized design!