AI Agents Fancy Stable
AiDataTable
Compact comparison table for a model's structured answer: real table semantics, tabular numeric columns, check-or-dash booleans, and one tintable column — rendered in the order it arrived, with no sorting
Preview
svelte
<script lang="ts">
import { AiDataTable } from "fancy-ui-svelte";
import type { AiDataTableColumn, AiDataTableRow } from "fancy-ui-svelte";
// Exactly the shape a model hands back when asked to compare things: five
// criteria, four kinds of value, and one cell it could not fill.
const columns: AiDataTableColumn[] = [
{ key: "option", label: "Deployment" },
{ key: "latency", label: "p95 latency (ms)", numeric: true },
{ key: "cost", label: "Cost / 1M req", numeric: true },
{ key: "selfHosted", label: "Self-hosted", align: "center" },
{ key: "sla", label: "SLA" },
{ key: "effort", label: "Ops effort" },
];
const rows: AiDataTableRow[] = [
{
option: "Managed cluster",
latency: 42,
cost: 18.4,
selfHosted: false,
sla: "99.95%",
effort: "Low",
},
{
option: "Serverless pool",
latency: 88,
cost: 6.2,
selfHosted: false,
sla: "99.9%",
effort: "None",
},
{
option: "Self-run nodes",
latency: 31,
cost: 24.9,
selfHosted: true,
sla: null,
effort: "High",
},
];
</script>
<div class="flex w-full max-w-2xl flex-col gap-2 p-6">
<AiDataTable
{columns}
{rows}
caption="Inference deployments compared on cost, latency and operational load"
captionVisible
highlightColumn="cost"
/>
<p class="text-muted-foreground mt-2 text-xs">
The tinted column is the one the answer turned on. Nothing here sorts or filters — the order is
the order the model chose, and changing it would be editing the answer.
</p>
</div>Installation
pnpm add fancy-ui-svelte
import { AiDataTable } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { AiDataTable } from 'fancy-ui-svelte';
</script>
<AiDataTable />Examples
Basic Usage
svelte
<script lang="ts">
import { AiDataTable } from "$lib/fancy-ui/ai-data-table";
import type { AiDataTableColumn, AiDataTableRow } from "$lib/fancy-ui/ai-data-table";
// Exactly the shape a model hands back when asked to compare things: five
// criteria, four kinds of value, and one cell it could not fill.
const columns: AiDataTableColumn[] = [
{ key: "option", label: "Deployment" },
{ key: "latency", label: "p95 latency (ms)", numeric: true },
{ key: "cost", label: "Cost / 1M req", numeric: true },
{ key: "selfHosted", label: "Self-hosted", align: "center" },
{ key: "sla", label: "SLA" },
{ key: "effort", label: "Ops effort" },
];
const rows: AiDataTableRow[] = [
{
option: "Managed cluster",
latency: 42,
cost: 18.4,
selfHosted: false,
sla: "99.95%",
effort: "Low",
},
{
option: "Serverless pool",
latency: 88,
cost: 6.2,
selfHosted: false,
sla: "99.9%",
effort: "None",
},
{
option: "Self-run nodes",
latency: 31,
cost: 24.9,
selfHosted: true,
sla: null,
effort: "High",
},
];
</script>
<div class="flex w-full max-w-2xl flex-col gap-2 p-6">
<AiDataTable
{columns}
{rows}
caption="Inference deployments compared on cost, latency and operational load"
captionVisible
highlightColumn="cost"
/>
<p class="text-muted-foreground mt-2 text-xs">
The tinted column is the one the answer turned on. Nothing here sorts or filters — the order is
the order the model chose, and changing it would be editing the answer.
</p>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns * | AiDataTableColumn[] | - | Columns in render order: key, label, and optional align / numeric. A numeric column gets tabular figures and right alignment |
rows * | AiDataTableRow[] | - | Rows keyed by column key, in the order the model produced them; a missing key renders as empty |
caption | string | - | Names the table for assistive tech; rendered in a visually-hidden <caption> unless captionVisible |
captionVisible | boolean | false | Also shows the caption, as a muted line above the table |
dense | boolean | false | Tighter rows, for a table read at a glance rather than studied |
highlightColumn | string | - | Key of the column to tint — the recommendation, or whichever criterion decided it |
Slots
| Slot | Description |
|---|---|
cell | Replaces the default rendering of every cell; receives the raw value and { row, key } |
Links
Related components
Ag
AgentPlan
Glanceable checklist of an agent's plan: a done/total count and completion bar over one row per step, with a status glyph, an optional detail line, and substeps indented under a rail
AI Agents Stable
Ap
ApprovalCard
A human-in-the-loop gate before a side effect: the agent states what it is about to do, and the footer swaps its approve and deny buttons for a one-line verdict once someone decides
AI Agents Stable
Ar
ArtifactCard
A generated document as a tangible object: title, kind, a version navigator, and the first six lines of the text itself streaming in behind a fade
AI Agents Stable