sprõut
ComponentsData display

SQL Viewer

Shows TulipFarm tables as SQL: one card per table, one row per column, and a line for each join. Hover or click a table or a foreign key to light up its joins. Up to four tables show at once; the rest wait behind a "+N tables" card.

Sales and billing tablesHover a table or a foreign key to trace its joins. Click to pin.

Arrow keys pan, plus and minus zoom, and 0 fits the diagram. Tab moves between tables; Enter pins a table's joins.

  • Deals.customer_id joins Customers.id, many to one
  • Deals.owner_id joins Employees.id, many to one
  • Invoices.deal_id joins Deals.id, many to one
  • Invoices.line_ids joins Line items.id, many to many
  • Line items.product_id joins Products.id, many to one
  • Employees.manager_id joins Employees.id, many to one
  • Payments.invoice_id joins Invoices.id, many to one

Usage

Show a team's tablesTSX
import { SqlViewer } from "@tulipfarm/sprout/sql-viewer";

// Table documents straight from TulipFarm.
<SqlViewer
  tables={tableDocuments}
  groups={{ [salesTeamId]: "Sales", [billingTeamId]: "Billing" }}
  label="Tables in Sales"
/>

The viewer fills its parent and is at least 24rem tall. Give the parent a height, such as h-160, to show more.

Columns and types

Every table starts with id uuid, its primary key. Text shows as varchar(n), numbers as numeric(p,s), and timestamps as timestamptz. Selects show as enumand list their options on hover. Relationships show as uuidor uuid[] with a link icon. Optional columns end in?. Single-column unique keys show a fingerprint; keys over several columns are listed under "Unique keys".

Layouts

layout="auto" uses columns from 768px up and a stack below it. Columns place each joined table one step right of the table that points to it. Pass horizontal or vertical to fix the layout.

ColumnsJoined tables sit one column right. Teams sit side by side.

Arrow keys pan, plus and minus zoom, and 0 fits the diagram. Tab moves between tables; Enter pins a table's joins.

  • Deals.customer_id joins Customers.id, many to one
  • Invoices.deal_id joins Deals.id, many to one
StackedPhones stack teams and fit the first one to the width.

Arrow keys pan, plus and minus zoom, and 0 fits the diagram. Tab moves between tables; Enter pins a table's joins.

  • Deals.customer_id joins Customers.id, many to one
  • Invoices.deal_id joins Deals.id, many to one

Props

  • tables: TulipFarm table definitions or documents withid, label, owningTeamId,fields, and uniqueKeys. A relationship to a table that is not passed is not drawn.
  • label: the accessible name of the viewer.
  • groups: team names by owningTeamId. Each named team gets its own tinted frame.
  • maxVisible: tables shown before the rest collapse. Default 4.
  • layout: auto (default), horizontal, or vertical.

Keyboard and accessibility

Tab moves to the viewer, then to each table, then to the zoom controls. Focus on a table lights its joins; Enter pins them andEsc clears. The arrow keys pan, + and -zoom, and 0 fits everything. Every join is also listed for screen readers, such as "Deals.customer_id joins Customers.id, many to one".

Theme tokens

Uses --sprout-surface, --sprout-canvas,--sprout-line, --sprout-text,--sprout-muted, and --sprout-primary. Team frames cycle through --sprout-chart-1 to--sprout-chart-5.