Retool Horizontal List View: How to Build One

If you've ever tried to build a Retool horizontal list view — something that scrolls left-to-right instead of top-to-bottom — you've probably hit the same wall. The ListView component defaults to vertical stacking, and there's no obvious toggle to change that. Whether you're building a user comparison tool, a product card carousel, or a dashboard with many side-by-side columns, here's everything you need to know to get horizontal scrolling working in Retool.

Why Retool's ListView Is Vertical by Default

The ListView component in Retool was originally designed to render repeating rows of data — think a list of records where each row shares the same layout. This is perfect for vertical scrolling use cases like user directories or order histories. But it creates friction the moment you want to compare items side-by-side, or display data in a column-per-item layout rather than a row-per-item layout.

This was a highly requested feature in Retool's community for a long time. Users wanted to build things like:

• A user comparison view where each user is a column and their attributes stack vertically beneath them
• A horizontal card scroller for products, tickets, or entities
• A wide dashboard with many single-column items that users scroll across to explore

The good news: Retool eventually shipped support for horizontal scrolling in the ListView component. Here's how to use it.

How to Enable Horizontal Scrolling in a Retool ListView

Once you've added a ListView component to your Retool canvas, follow these steps to make it scroll horizontally:

• Step 1: Select your ListView component on the canvas to open its settings panel on the right.
• Step 2: In the Layout or Appearance section of the component settings, look for a scroll direction or orientation option. Toggle it from vertical to horizontal.
• Step 3: Resize your ListView to span the full width of your app canvas. Give it a fixed height that accommodates the content inside each list item.
• Step 4: Design a single list item template. Each item will repeat horizontally. Lay out the item's content vertically inside it — for example, a user avatar at the top, name below, then attributes further down.
• Step 5: Bind your data source to the ListView using the data property. Use {{currentItem.fieldName}} syntax inside the template to reference each record's values dynamically.

Once configured, the ListView will render one item per column, and users can scroll left and right across all items.

Building a Side-by-Side Comparison View in Retool

One of the most powerful uses for a horizontal ListView is a comparison layout — where each column represents an object (a user, a product, a proposal) and the rows within each column show that object's attributes.

To build this:

• Set your ListView data to the array of objects you want to compare (e.g., results from a getUsers query).
• Inside the list item template, stack the attribute fields vertically using Text components or a Key Value component.
• Use {{currentItem.name}}, {{currentItem.email}}, {{currentItem.role}} etc. to populate each column dynamically.
• Add a fixed-width to each list item so columns are uniform across the scroll.

This approach works for an arbitrary number of items — you don't need to know in advance how many columns there will be. As long as your query returns records, the ListView will generate a column for each one.

Handling Arbitrarily Wide Layouts with Horizontal Scroll

If you're building something like a multi-column tracker where users need to scroll across dozens of items, there are a few things to keep in mind:

• Set a fixed item width: In the list item settings, define a consistent width (e.g., 200px) so each column stays predictable as new items are added.
• Avoid percentage widths inside items: Percentage-based widths inside a horizontally scrolling container can behave unpredictably. Use fixed pixel values instead.
• Use a container background: Wrapping your ListView in a Container component with a visible border or background helps users understand they're in a scrollable region.
• Test on smaller screens: Horizontal scroll works well on desktop but can feel awkward on tablet. If your internal tool is used on both, consider a responsive fallback or a toggle between views.

When to Use a Key/Value Component Instead

If you don't need a repeating list and just want to display a single record's properties horizontally, the Key Value component might be a simpler choice. By default it also renders vertically, but you can lay multiple Text or Statistic components side-by-side in a Container to achieve a horizontal key-value-style display without using a ListView at all.

This is a good pattern for a detail panel at the top of a page — for example, showing a selected user's key stats (name, email, plan, join date) in a single horizontal row before a table of their activity below.

Summary

Retool now supports horizontal scrolling in the ListView component, making it possible to build side-by-side comparison views, card scrollers, and wide column-based layouts without hacking together custom CSS. The key steps are: enable horizontal orientation in the ListView settings, design a fixed-width item template, bind your data with {{currentItem}} syntax, and let the component handle the rest. For single-record horizontal displays, a row of Statistic or Text components inside a Container is often the faster path.