Guides

Retool Nested List View: Limitations & Workarounds

OTC Team··5 min read

If you've tried building a Retool nested list view component, you've probably hit the same wall as dozens of developers in the Retool community: the moment you drop a list view inside another list view — or try to embed a table inside a list view — things start breaking in ways that are hard to debug. Actions stop firing, data bindings go stale, and the i index variable becomes ambiguous. This guide explains exactly why it happens and what you can do about it right now.

Why Retool's List View Component Doesn't Support Nesting

The root cause comes down to how Retool handles the i variable — the index that tells each repeated row which record it belongs to. When you have a single list view, i is unambiguous: it maps one-to-one with a row in your data array. The moment you introduce a second list view inside the first, Retool has no built-in mechanism to track two independent i values simultaneously. Which list does i refer to — the outer loop or the inner one? Retool doesn't resolve this gracefully, and the result is broken component behavior.

The same constraint is why embedding a table component inside a list view is unreliable. Table actions — like button clicks, row selection, and inline edits — rely on their own internal indexing that conflicts with the list view's i context. Users in the Retool community have confirmed that actions simply stop working in this setup.

Common Use Cases That Run Into This Problem

This isn't an edge case. These are real, everyday product requirements:

  • E-commerce product catalogs: A list of products where each product has a variable number of color/size variations to display as a nested row.
  • CRM interaction feeds: A list of lead interactions, each of which is associated with one or more sales reps shown in a sub-list.
  • Assortment planners: Bundles grouped by top-level category (size), then sub-grouped by item count, then again by variation (A, B, C, D).
  • Dynamic API-driven layouts: The number of tables or sections in the view depends entirely on the shape of the API response at runtime.

All of these patterns require iterating over a parent array and then iterating again over a child array for each parent record — a basic nested loop that Retool's list view doesn't natively support today.

Workarounds for Building Nested or Dynamic List Views in Retool

Retool hasn't shipped a native fix for this yet, but there are several patterns builders use to get the job done.

1. Flatten your data before binding it. Instead of passing nested arrays directly to a list view, pre-process your API response using a transformer. Flatten the parent-child structure into a single array with denormalized fields. For example, if you have products with color variants, create one row per variant that also carries the parent product fields. This gives you a single i to work with and avoids nesting entirely.

2. Use a custom component with React. If your use case genuinely requires nested iteration — like the three-level bundle planner described above — a Custom Component built with React is the most reliable escape hatch. You get full control over rendering logic and can manage your own index variables without any Retool conflict. Pass your nested data in via the component's model and handle all the looping in JSX.

3. Use a table with expanded row detail. For the common case of a parent list with child records, Retool's Table component with a detail row or linked drawer can replace the outer list view. Clicking a row opens a panel that shows the child records — no nesting required. It's less visually custom, but it's stable and ships fast.

4. Use multiple conditionally visible list views. If the number of nested levels is small and predictable, you can layer multiple list views in your layout and show/hide them based on a selected parent row. Store the selected parent's ID in a variable component and filter each child list view's data against it. Not elegant, but it works without breaking anything.

5. Scope child data using currentSourceRow carefully. In some versions of Retool, the currentSourceRow context inside a list view can be used to reference the current row's nested array directly. Test whether binding a second component's data to {{ listview1.data[i].children }} produces stable output in your Retool version before building on top of it.

What to Tell Your Team While Waiting for a Native Fix

As of the time of writing, Retool has acknowledged the limitation but has no committed timeline for native nested list view support. The official response from the Retool team in the community thread is that it's on the radar but not actively scheduled. If this is a blocker for your project, the custom component approach is your best long-term investment — it solves the problem completely and gives you full rendering control as requirements evolve.

In the meantime, vote for the feature on the Retool community forum and add your specific use case to the thread. The team does use community signal to prioritize the roadmap, and the more concrete examples they see, the faster this moves.

The Bottom Line

The i variable conflict is the core reason Retool's nested list view component breaks, and until Retool ships a scoped index solution, you'll need to work around it. Flatten your data in a transformer, reach for a custom React component for complex layouts, or restructure your UI to avoid nesting altogether. None of these are perfect substitutes for native support, but they'll get your app shipped today.

Ready to build?

We scope, design, and ship your Retool app — fast.

Ready to ship your first tool?