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.tstemplates/ui/scrollablepanel/ScrollablePanel.d.tstemplates/ui/scrollbar/ScrollBar.d.tstemplates/ui/textarea/TextArea.d.tstemplates/ui/pages/Pages.d.tstemplates/ui/tabpages/TabPages.d.tstemplates/ui/folder/Folder.d.tstemplates/ui/trees/Trees.d.tstemplates/ui/trees/tree/Tree.d.tstemplates/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.
1---2name: rexui-scroll-lists-and-tables3description: 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.4---56# RexUI Scroll Lists And Tables78Use this skill for RexUI UI that presents many items, scrolls content, virtualizes cells, expands tree-like sections, or swaps between pages.910## Use This First1112Choose the component:1314| Need | Use |15|---|---|16| Many repeated data items, large inventory, level select, message list | `gridTable` |17| Scroll a composed RexUI child such as `sizer`, `fixWidthSizer`, or a form | `scrollablePanel` |18| Scroll only text content | `textArea` |19| Standalone normalized scrollbar control | `scrollBar` |20| Collapsible title + child section | `folder` |21| Tree with nested nodes | `trees` |22| Programmatic page stack | `pages` |23| Tabs controlling page stack | `tabPages` |2425Prefer `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.2627## Required Setup2829This skill assumes RexUI is available as `this.rexUI`. If not, use `rexui-setup-and-factory`.3031## References3233Read these only when needed:3435- `references/gridtable-config.md`: virtualized table setup, cell callbacks, events, updates, scrolling.36- `references/scrollablepanel-config.md`: panel child setup, slider/scroller config, scroll methods.37- `references/pages-trees-and-events.md`: `pages`, `tabPages`, `folder`, `trees`, and event names.38- `references/list-recipes.md`: reduced recipes for common list/table/panel/page/tree patterns.3940## Core Rules4142- Call `.layout()` after creating or mutating `gridTable`, `scrollablePanel`, `textArea`, `folder`, `trees`, `pages`, or `tabPages`.43- In `gridTable`, assume `createCellContainerCallback(cell, cellContainer, gridTable)` may receive a reused `cellContainer`; update all item-dependent state every time.44- 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.45- Enable `table.reuseCellContainer: true` for large lists, unless each cell owns state that is hard to reset.46- Use `scrollablePanel.panel.child` for exactly one child object; put multiple objects inside a `sizer`, `gridSizer`, or `fixWidthSizer` first.47- Create an opaque `scrollablePanel` background before creating `panel.child`; otherwise Phaser display-list order can draw the background over the content.48- Use `scrollMode: 0` or `'vertical'` for vertical lists, `1` or `'horizontal'` for horizontal lists, and `2` or `'xy'` for both axes.49- Use `mouseWheelScroller: { focus: true }` when wheel scrolling should only work while the pointer is over the component.50- Use package imports only in full setup examples; local `templates/ui/...` paths are source-map paths.5152## Source File Map5354- `templates/ui/gridtable/GridTable.d.ts`55- `templates/ui/scrollablepanel/ScrollablePanel.d.ts`56- `templates/ui/scrollbar/ScrollBar.d.ts`57- `templates/ui/textarea/TextArea.d.ts`58- `templates/ui/pages/Pages.d.ts`59- `templates/ui/tabpages/TabPages.d.ts`60- `templates/ui/folder/Folder.d.ts`61- `templates/ui/trees/Trees.d.ts`62- `templates/ui/trees/tree/Tree.d.ts`63- `templates/ui/utils/scrollable/Scrollable.d.ts`6465## Related Skills6667- `rexui-setup-and-factory`: plugin setup and factory discovery.68- `rexui-components-catalog`: choose the correct component family.69- `rexui-layout-sizers`: panel children and cell container layout.70- `rexui-basic-widgets`: labels, buttons, tabs, and controls inside cells.71- `rexui-dialogs-and-popups`: modal list selection or popup lists.72- `rexui-text-and-input`: rich text and input-specific text area behavior.
rexrainbow