Timeline Table
Project schedule table with an inline proportional bar per row showing each project span within a defined date window.
Project schedule table with an inline proportional bar per row showing each project span within a defined date window.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Timeline Table lists six projects across an Apr 1 through Aug 31 window, each row showing project name, owner, a status badge, the date range, and an inline proportional bar in the final column. Brand refresh (Maya Chen, On track) runs Apr 7 to Jul 15; API v2 launch (Avery Stone, At risk) ends Jun 30; Mobile app beta (Riley Parker) is Blocked and clipped to the window edge. Completed bars render at bg-foreground/25, active bars at bg-foreground/50.
Projects are a typed array with start and end date strings. The pct and span helpers compute left offset and width from the window constants so swapping real project dates in is the only wiring step.
Reach for this block on a project management or roadmap page where a table context matters more than a pure Gantt. Wire the projects array to your project API and link project name cells to the detail view.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the cross-team project schedule. Other timeline tables:
Tip: dim completed bars rather than removing them; past projects anchored to their dates give readers the context to judge whether current timelines are realistic.