How to Build a Fully Frozen Table with Dynamic Panels in Axure

Freeze Overview

Freezing is a common table feature that can lock the first row (header), the first column (e.g., order number), the last column (usually an operation column), or any combination of these.

Freeze first row: The header stays fixed when scrolling vertically, but moves horizontally with the table.

Freeze first column: The column remains visible when scrolling horizontally, while it scrolls vertically with the data.

Freeze last column: The operation column stays fixed during horizontal scrolling.

Styling Steps

2.1 Prepare a regular table

Create a standard table with a border color #F2F2F2 and center it horizontally.

2.2 Split the table into six independent parts

Divide the complete table into six separate tables, each representing a distinct scrolling or fixed region:

Fully fixed header (e.g., sequence number, order ID).

Scrollable first‑column data area (sequence number, order ID, data columns).

Scrollable middle header (e.g., user … payment time).

Fixed operation‑column header.

Scrollable main data area.

Scrollable operation‑column data area.

Copy each table and adjust the 1‑pixel gap so that they visually form a single table.

2.3 Convert tables to dynamic panels

For the four tables that require scrolling, convert each to a dynamic panel and set the property Scroll when needed.

2.4 Nest dynamic panels (key step)

Enter state 1 of each outer dynamic panel, then convert its content into an inner dynamic panel. Do not change the inner panel’s “Do not scroll” setting.

2.5 Adjust panel width and height

The example contains only nine rows and six columns. To enable scrolling, either add more data or shrink the dynamic panel. In this guide the panel is sized to display five rows and four columns.

ScrollX & ScrollY

Drag a table onto the canvas, convert it to a dynamic panel, enable Scroll when needed, and shrink the panel so scrollbars appear. Add text widgets that bind to the panel’s scrollX and scrollY properties to display real‑time values.

scrollX: Starts at 0; increases when scrolling right, decreases when scrolling left.

scrollY: Starts at 0; increases when scrolling down, decreases when scrolling up.

Interaction Steps

4.1 Main data area interaction

When the main data area scrolls vertically, the left‑most and right‑most tables move vertically in sync (x‑axis remains 0, y‑axis changes using negative values for consistency). When the main area scrolls horizontally, the header row scrolls horizontally (x changes, y stays 0).

4.2 First‑column area interaction

When the middle header in the first‑column area scrolls horizontally, the main data area follows the same horizontal movement.

When the first‑column area scrolls vertically, both the main data area and the operation column scroll vertically in sync.

4.3 Operation (last column) interaction

When the operation column scrolls vertically, the main data area and the first‑column area also scroll vertically in sync.

After completing the above steps, a fully functional frozen table is achieved. Minor gaps caused by scrollbar width can be eliminated by slightly widening the header and shifting the operation area.