Timeline: every table with a date becomes a timeline.
This timeline reads the same 52 sales from the sample app. They appear in date order, grouped by day, each with the salesperson and payment method.
The most recent sales, grouped by day
You don't write a query. You point to the table and say which field is the title, which is the body and which is the date. The page sorts the records, groups them by day and draws the rail.

One tag builds the whole page
In the generated code, the page fits in a single tag. The same format works for order history, inventory movement, auditing and support.
<mad-timelinemodel="Venda"title_field="titulo_timeline" {{-- accessor: customer + amount --}}body_field="resumo_timeline" {{-- accessor: salesperson · payment · items --}}date_field="data_venda"color_field="status"date_format="m/d/Y":limit="14"cards /> When to use the timeline
The timeline is for telling the story of something: what happened, in what order and on which day. It is made to be read top to bottom, with no columns or day grid.
- Customer history. Orders, contacts and tickets in date order, so whoever picks up the customer knows what already happened.
- Inventory movement. A product's stock in and out, each with its own color.
- Auditing. Who changed what and when, with the changes grouped by day.
- Order tracking. Paid, picked, shipped: each step with its date and its icon.
If the person needs to filter, sort by other columns or export, the list view is the right type. If they need to see the week and the month on a grid, or change the date by dragging, use the calendar. You can also describe the timeline in plain English and ask the AI agent, which builds the page with the PHP and Blade.
What you configure
It all lives in the same tag. These are the example's attributes and what each one changes.
- Table
model - Where the entries come from. Here, the sales table.
- Title and body
title_field - The field that becomes each entry's title. The text right below comes from
body_field. - Date
date_field - The field that sorts the entries and decides which day each is grouped under. The badge format goes in
date_format. - Color
color_field - The field that gives each entry its color. Here, the sale's status.
- Amount
limit - How many entries the page shows. The example stops at 14.
- Cards
cards - Shows each entry in a card. Without it, the entry is a simple row.
What goes into the Laravel project
The timeline is a class in app/Control with the <mad-timeline> view. Items can come from three places:
- Title and body in model accessors. In the example,
titulo_timelineandresumo_timelineare accessors on theVendamodel. One combines customer and amount, the other combines salesperson, payment and items. - Items built in PHP. With no table, the list comes from a method on the screen (
:items="$that->timelineItems()"), with the date, title, body, icon and color of each item. - Items written in the view. For a fixed timeline, each entry is a
<mad-timeline-item>tag, with title, date and icon.
Like every MadBuilder screen, these files open in your editor, go into your Git and accept hand-written code in protected blocks, which stay there when the screen is regenerated. See how the code is generated.
Questions about the timeline
Does any table become a timeline?
Any table with a date field. You point to that field, the title field and the body field, and the page sorts the entries and groups them by day.
Does the timeline load all the records at once?
It doesn't have to. You limit how many entries appear, and the page can load more when the person asks. In this example, it is the 14 most recent sales.
What is the difference between a timeline and a calendar?
The calendar shows events on a day grid, with day, week, month and list views, and lets you drag to change the date. The timeline is a list in date order, grouped by day, made for reading history.
And more
See also the Calendar or the page types.
Create an account, build a screen, download the project.
No scheduled demo, no discovery call. If the Laravel that comes out doesn’t pass your team’s review, you lost an afternoon.
- Create an accountOpen beta, no credit card.
- Build a screenVisually, in code, or by asking the AI.
- Download the .zipA Laravel project that runs wherever you want.