rexui-scroll-lists-and-tables

name	rexui-scroll-lists-and-tables
description	Use this skill when building RexUI scrollable lists, gridTable, scrollablePanel, scrollbar, textArea scrolling, trees, folder, pages, tabPages, inventory UI, item grids, virtualized list cells, or multi-page panels. Triggers on: RexUI list, RexUI scrollablePanel, RexUI gridTable, RexUI scrollbar, RexUI tree, RexUI folder, RexUI pages, RexUI tabPages, inventory UI.

RexUI Scroll Lists And Tables

Use this skill for RexUI UI that presents many items, scrolls content, virtualizes cells, expands tree-like sections, or swaps between pages.

Use This First

Choose the component:

Need	Use
Many repeated data items, large inventory, level select, message list	gridTable
Scroll a composed RexUI child such as sizer, fixWidthSizer, or a form	scrollablePanel
Scroll only text content	textArea
Standalone normalized scrollbar control	scrollBar
Collapsible title + child section	folder
Tree with nested nodes	trees
Programmatic page stack	pages
Tabs controlling page stack	tabPages

Prefer gridTable for large or data-backed lists because it can reuse visible cell containers. Prefer scrollablePanel when each child is already a real UI object and the item count is modest.

Required Setup

This skill assumes RexUI is available as this.rexUI. If not, use rexui-setup-and-factory.

References

Read these only when needed:

• references/gridtable-config.md: virtualized table setup, cell callbacks, events, updates, scrolling.
• references/scrollablepanel-config.md: panel child setup, slider/scroller config, scroll methods.
• references/pages-trees-and-events.md: pages, tabPages, folder, trees, and event names.
• references/list-recipes.md: reduced recipes for common list/table/panel/page/tree patterns.

Core Rules

• Call .layout() after creating or mutating gridTable, scrollablePanel, textArea, folder, trees, pages, or tabPages.
• In gridTable, assume createCellContainerCallback(cell, cellContainer, gridTable) may receive a reused cellContainer; update all item-dependent state every time.
• Do not close over a stale item inside reused grid cells. Read cell.item inside the callback and event handlers should use cellIndex to look up current data.
• Enable table.reuseCellContainer: true for large lists, unless each cell owns state that is hard to reset.
• Use scrollablePanel.panel.child for exactly one child object; put multiple objects inside a sizer, gridSizer, or fixWidthSizer first.
• Create an opaque scrollablePanel background before creating panel.child; otherwise Phaser display-list order can draw the background over the content.
• Use scrollMode: 0 or 'vertical' for vertical lists, 1 or 'horizontal' for horizontal lists, and 2 or 'xy' for both axes.
• Use mouseWheelScroller: { focus: true } when wheel scrolling should only work while the pointer is over the component.
• Use package imports only in full setup examples; local templates/ui/... paths are source-map paths.

Source File Map

• templates/ui/gridtable/GridTable.d.ts
• templates/ui/scrollablepanel/ScrollablePanel.d.ts
• templates/ui/scrollbar/ScrollBar.d.ts
• templates/ui/textarea/TextArea.d.ts
• templates/ui/pages/Pages.d.ts
• templates/ui/tabpages/TabPages.d.ts
• templates/ui/folder/Folder.d.ts
• templates/ui/trees/Trees.d.ts
• templates/ui/trees/tree/Tree.d.ts
• templates/ui/utils/scrollable/Scrollable.d.ts

Related Skills

• rexui-setup-and-factory: plugin setup and factory discovery.
• rexui-components-catalog: choose the correct component family.
• rexui-layout-sizers: panel children and cell container layout.
• rexui-basic-widgets: labels, buttons, tabs, and controls inside cells.
• rexui-dialogs-and-popups: modal list selection or popup lists.
• rexui-text-and-input: rich text and input-specific text area behavior.