# Rexui Scroll Lists And Tables

> 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.

- Skill: `rexrainbow/rexui-scroll-lists-and-tables` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add rexrainbow/rexui-scroll-lists-and-tables`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rexrainbow/rexui-scroll-lists-and-tables/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: rexrainbow (https://skillmd.com/u/rexrainbow)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rexrainbow/rexui-scroll-lists-and-tables

---


# 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.