Tonkers Table Topia (Unity UGUI)

Simple UGUI tables that behave like stretchable layout tables.

• Created for designing quick, fast, stretchable layouts in seconds, that adapt to any resolution with minimum input from the designer.
• Use the nested tables feature often, to easily get the look you desire.

Tonkers Table Topia is a runtime and editor table system for Unity UGUI. It gives you real rows, columns, merges, nested tables, styling, alignment tools, and a WYSIWYG editing workflow that feels like working with an actual table instead of wrestling random RectTransforms into submission.

You can click cells, drag resize handles, merge and unmerge, move contents between cells, drop hierarchy objects directly into the table, style rows and columns, and keep the whole thing working in edit mode and play mode without building your UI out of desperation and loose anchors.

Quick video:
[FYI: Outdated Early Version in Video]
[Feel free to make an updated tutorial and I will link it here]

• https://youtu.be/Ax740NRROhc

The game this editor was built for and used in:

• https://store.steampowered.com/app/3844910/

What This Does

Tonkers Table Topia gives UGUI a real table model with a matching editor workflow:

• Rows and columns with mixed sizing rules.
• Merge and unmerge support.
• Insert and delete rows, columns, and cells.
• Nested tables inside cells.
• Table, row, column, and cell background styling.
• Runtime-safe movement and adoption of foreign UI content.
• Alignment helpers for cells, selections, rows, columns, and whole tables.
• A WYSIWYG table editor with headers, selection tools, resize handles, zoom, scrolling, context menus, and scene highlighting.
• Dedicated runtime row, column, and cell components for direct scripting access.

This is still plain UGUI. No external package is required.

Key Features and Benefits

WYSIWYG editor workflow

• WYSIWYG preview with row and column headers.
• Click to select a cell.
• Shift-click and drag to extend the selection rectangle.
• Drag to paint a rectangular cell selection.
• Row header and column header selection.
• Top-left header selection for the whole table.
• Double-click a cell with a nested table to jump into it.
• Unified editor modes:
  • Highlight
  • Resize
  • Select
  • Move
• Mode-specific editor panels for structure, merge, resize, alignment, selection, and move workflows.
• Scrollable preview canvas for larger tables.
• Zoom slider with Fit and 1:1 buttons.
• Ctrl or Cmd + mouse wheel zoom in the preview.
• Persistent Preview and Scene toggles in the toolbar.
• Scene highlight for selected cells.
• Per-cell badges showing detected UI content and nested tables.
• Toggle for showing or hiding preview badges.
• Right-click context menus on:
  • cells
  • row headers
  • column headers
  • table header corner
  • resize split handles

Table structure editing

• Insert row above or below selection.
• Insert column left or right of selection.
• Delete single or multiple selected rows.
• Delete single or multiple selected columns.
• Delete a cell through the cell inspector.
• Merge rectangular selections.
• Unmerge a single merged cell.
• Unmerge everything inside a selected rectangle.
• Bulk delete safety checks for merges and minimum row or column limits.
• Smart handling of foreign children and nested tables during structure edits.
• Optional preservation of current resolved row heights when inserting or deleting rows.
• Optional preservation of current resolved column widths when inserting or deleting columns.

Sizing and layout

• Mixed row and column sizing:
  • positive values = fixed pixels
  • negative values = percent of inner available size
  • zero = flexible share of remaining space
• Blueprint-style scaling for positive fixed row and column values.
• Per-table design size capture and reuse.
• One-click capture of the current RectTransform size as the table design size.
• Inspector editing of fixed values using live resolved pixels.
• Inspector editing of percent values using live computed percentages.
• Drag resize handles in the WYSIWYG preview.
• Live resize HUD showing starting value, new value, and percent delta for the two affected rows or columns.
• Distribute all rows evenly.
• Distribute all columns evenly.
• Split two adjacent columns evenly.
• Split two adjacent rows evenly.
• Make last row flexible.
• Make last column flexible.
• Table container size controls:
  • size by anchored percent
  • size by fixed pixels
• Automatic conversion helpers when switching sizing workflows.
• Row and column spacing controls.
• Table padding support.
• Per-cell inner padding support for hosted content.
• Optional auto hug width.
• Optional auto hug height.
• Optional auto-add ContentSizeFitter to each cell.
• Horizontal and vertical extra-space alignment for the whole table.

Visual styling

• Table background image and tint.
• Table background simple or sliced rendering.
• Per-row background sprites and tints.
• Per-row simple or sliced rendering.
• Per-column background sprites and tints.
• Per-column simple or sliced rendering.
• Column backdrop modes:
  • repeated across cell spans
  • one stretched backdrop for the whole column
• Per-cell background sprite and tint.
• Per-cell simple or sliced rendering.
• Zebra striping by rows.
• Zebra striping by columns.
• Row and column zebra stripes can be combined.
• Editor-wide WYSIWYG preview colors saved in EditorPrefs.
• WYSIWYG preview draws real resolved row, column, and cell backdrops instead of only placeholder bands.

Alignment tools

• Cell-level alignment:
  • Left
  • Center
  • Right
  • Top
  • Middle
  • Bottom
  • Full stretch
• Selection-level alignment.
• Row-level alignment.
• Column-level alignment.
• Table-level alignment.
• Detection helpers so editor buttons can reflect current alignment state.
• Alignment helpers also work for foreign content hosted inside cells.
• Full-stretch content and cell padding are respected by the alignment helpers.

Content helpers and UI spawning

• Drag external hierarchy objects into table cells from the editor.
• Add common UGUI controls to cells from context menus.
• Editor quick-add menu also includes an Empty Panel helper.
• Add arbitrary prefab content to a cell, row, column, or table through runtime helpers.
• Supported runtime standard content helpers include:
  • Button
  • Image
  • RawImage
  • Text
  • Toggle
  • Slider
  • Scrollbar
  • ScrollRect
  • InputField
  • Dropdown
• Runtime content factory enum for standard content creation.
• Content counting, clearing, listing, and type classification helpers.
• Direct row, column, and cell component APIs for adding content and nested tables.

Nested tables

• Create a child table inside a cell.
• Select a nested child table from the inspector or context menu.
• Delete a nested child table from the inspector or context menu.
• Double-click a cell with a nested table in the preview to enter it.
• “Up to Parent Tonkers Table” navigation in the layout inspector.
• Parent table lookup helper at runtime.

Runtime behavior and safety

• Runtime-safe layout refresh in edit mode and play mode.
• Queued play mode refresh using Canvas.willRenderCanvases.
• Pooling for managed row and cell scaffold objects.
• Dedicated managed column backdrop objects.
• Cached row, column, and cell component access.
• Cached background image access on managed nodes.
• Centralized hierarchy and object utility helpers.
• Centralized foreign content movement and restore helpers.
• Centralized editor-safe deferred actions.
• Better undo coverage for structure and style edits in the editor.
• Cleaner managed hierarchy naming than the original version.
• Editor guard that rejects invalid multiple TableTopia components on the same GameObject.

Installation

Copy the runtime scripts into your project, for example:

Assets/UI/TonkersTableTopia/

Copy the editor scripts into your project, for example:

Assets/Editor/TonkersTableTopia/

The package includes the main layout, row, column, and cell components plus supporting runtime extensions, utilities, content helpers, sizing helpers, alignment helpers, editor extensions, inspectors, and context menu tooling.

Add Tonkers Table Topia to a RectTransform under a Canvas:

• Add Component
• Layout
• Tonkers Table Topia

Usage

1. Add Ux_TonkersTableTopiaLayout to a RectTransform.
2. Set row and column counts.
3. Use the WYSIWYG preview to select cells, rows, or columns.
4. Insert, delete, merge, unmerge, distribute, and align directly from the inspector or context menus.
5. Switch to Resize mode and drag split handles to resize rows and columns.
6. Use the design-size controls if you want fixed pixel specs to scale relative to an authored table size.
7. Choose whether row and column sizes should be preserved when inserting or deleting structure.
8. Style the table using row, column, cell, and table background settings.
9. Enable zebra stripes, spacing, padding, and cell inner padding where needed.
10. Use Move mode to move foreign content or nested tables between cells.
11. Drag hierarchy objects directly into cells in the preview.
12. Add nested child tables to cells where needed.
13. Use runtime helpers to add content, inspect cells, merge ranges, or rebuild layout during play.

Core Concepts

1. Row and column size specs

Each row and column uses one of three sizing modes:

• > 0f: fixed pixels
• < 0f: percent of inner available size, for example -0.25f
• == 0f: flexible share of the remaining space

Percent sizing is resolved after padding and row or column spacing are removed.

2. Blueprint scaling for fixed sizes

Positive fixed specs can scale relative to a saved design size:

• scaleFixedSizesWithResolutionLikeBlueprint
• designSizeForThisTableLikeBlueprint

When enabled, stored fixed val