Built a Vertical Progress Timeline Custom Component for Retool

🤝 Community Show & Tell
1

Hi everyone! I wanted to share a custom Retool component I built: Vertical Progress Timeline.

I created this to solve a common UI gap in internal tools: teams have milestone/status data in tables, but it’s hard to communicate progress clearly in a timeline format for stakeholders and operators.

What problem does this solve?

In many Retool apps, milestone tracking is usually shown as a plain table or list. That makes it difficult to quickly answer:

  • What’s already done?

  • What’s currently in progress?

  • What’s next?

  • How far along are we overall?

This component turns those rows into a clean, visual, vertical timeline with progress fill and status badges.

Vertical Progress Timeline Component
Vertical Progress Timeline Component684Ă—709 27.4 KB

Key features are:

  • Dynamic milestone input via milestones

  • Flexible schema support using fieldMapping (map any query column names)

  • Dynamic status system via statusConfig (value, label, color)

  • Progress calculation controlled by doneStatuses (single source of truth)

  • Sorting controls: sortBy (none, date, title, status) + sortDirection

  • Date formatting tokens: YYYY, MMMM, MMM, MM, DD, D

  • Theming controls in inspector:

    • colors (background/card/title/text/border/track/line gradient)

    • borderRadius

    • title/description/date/status font sizes

  • Accessibility + interaction

    • card selection by click, Enter, or Space

    • updates selectedMilestone

    • triggers milestoneClick event

Field Settings
Field Settings487Ă—1847 73.6 KB

How it works (technical details)

At render time, milestone rows are normalized into a consistent internal shape:

  • fallback IDs are generated when missing

  • unknown statuses fall back safely

  • dates are parsed from common formats / timestamps

Then the component:

  1. Applies fieldMapping to transform incoming query rows

  2. Normalizes/validates statusConfig

  3. Computes completion from doneStatuses

  4. Applies optional sorting

  5. Renders milestone cards and computes segment-based progress fill to avoid visual gaps near nodes

Here is the Demo link: Vertical Progress Timeline Component Demo

5 Likes
3

@Snehal_Parate This is amazing, thanks for sharing! :clap:

1 Like