Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Report Builder CRUD Block for Svelte

An ops team's report builder in a window: saved reports at the start, then columns, period and schedule for the open one over a sample table that gains and loses columns, with a template picker for new reports.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Design a recurring report and see its shape before it runs with this report builder for Svelte with Ark UI. The window lists the saved reports at the start (a Native Select on a phone) and the open one at the end: a name, its columns as a group of Toggle Group buttons (Orders, Revenue, Refunds, New customers, at least one always on), a period and a schedule. The schedule shows its next run, worked out for a fixed day: "Next: Mon 19 Oct, 08:00". Below, a five-row sample table gains and loses columns as you press them and scales its numbers with the period. New report opens a Dialog to pick a template first (Weekly sales, Churn watch or Blank). Save report is the one Shine Button and waits for a change; Delete report leaves a line in the foot with Undo. For ops reports, digests and any saved query with a schedule.

FAQ

How do I use my own columns and rows?

Edit COLUMNS, the ROWS of the sample table (one value per column) and TEMPLATES. The table is generated from the columns pressed, so a new column is one entry in COLUMNS, one field in ROWS and one branch in cellOf.

Why do the numbers change with the period?

The sample rows are for seven days; factorOf multiplies them by 1, 4 or 12 for last 7 days, last 30 days and this quarter. It is only there to show that the table follows the report. In your app the same controls would query your data.

How is the next run worked out?

For a schedule such as Mondays at 08:00 the next run is written for the fixed day Sunday 18 October 2026, so the page reads the same on every load. In your app derive it from the real clock and the schedule rule, on the server, in the viewer's time zone.

What does Save report do?

Each report keeps what was last saved and what you are working on. Edits change the working copy and the report is marked "Unsaved changes" until Save report copies it across. Save leaves a line with Undo, and it stays aria-disabled while nothing differs.

What stays local, and how do I wire it?

The reports live in state in this tab and a reload brings the first three back; nothing is scheduled or sent. In your app call your API from save, create and remove, and keep the schedule as data your job runner reads.

How does it look on a phone?

One pane at a time: the report list becomes a select at the top of the report pane, which scrolls as a whole, and the sample table scrolls sideways inside its own frame. The window keeps its height in every state.

All 100 crud blocks