Unlocking Multi‑Dimensional Table Rendering: From Data Prep to Interactive Canvas UI

Yesterday we shared the design part of “The Multidimensional World of Tables”. Today AntV engineer Yinying presents the technical side from SEE Conf 2022, covering data preparation, layout calculation, rendering, interaction and cell merging for high‑performance multidimensional tables.

Data Preparation

The first step is to express the relationships between rows, columns and metrics using a data structure. Row and column headers are built as tree structures because they naturally form hierarchies. The raw data is a flat one‑dimensional array; we need to map each cell to its row‑column path for fast lookup.

A naïve O(n·m) traversal is too slow for large tables, so we encode dimension values. For example, metric [0, 0] has a row path [0, 0], a column path [0], and a combined path [0, 0, 0]. This enables O(1) cell retrieval during rendering.

Layout Calculation

In this stage we compute each cell’s width, height and coordinates. Row header width is the sum of leaf node widths at each level; column header width follows the same rule. Heights are derived similarly. Three common layout strategies are supported:

Compact layout : sample column widths from a subset of cells and use the maximum to maximize visible metrics.

Equal‑width layout : distribute available canvas width evenly among columns when the metric count is modest.

Mixed layout : keep row headers compact while evenly spreading remaining column width.

Rendering

Rendering uses Canvas for performance. Only cells inside the viewport are drawn (on‑demand rendering). As the user scrolls, rows and columns outside the view are dynamically removed and new ones added, preventing frame drops even with a million‑cell table (1000 × 1000).

Interaction & Theme

A dedicated interaction module handles hover highlighting, cross‑hair display, and state‑machine‑driven callbacks. The theme module separates style logic from rendering, allowing custom cell background colors, embedded bar charts, or bullet graphs via simple configuration.

Cell Merging

Irregular cell merging (T‑, F‑, L‑shapes) is achieved by converting selected cells into a polygon. We collect each rectangle’s edges in clockwise order, discard overlapping edges, and then stitch the remaining edges into a closed path, producing the desired merged shape without complex geometry checks.

Overall Architecture

The solution consists of four logical modules:

Data processing – builds dimension‑metric relationships.

Layout – calculates sizes, positions, and handles cell merging.

UI – combines a theme sub‑module and the rendering engine, exposing lifecycle hooks for custom drawing.

Interaction – manages hover, selection, and state transitions.

With this architecture, developers can quickly implement a wide range of multidimensional tables using AntV’s S2 solution.