# 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.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: AI Agents
- Tags: ai, agents, table, comparison, structured-output
- Docs: https://fancy-ui.rama.app/docs/components/ai-data-table
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/ai-data-table

## Import

```svelte
<script lang="ts">
  import { AiDataTable } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { AiDataTable } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` (required) | `AiDataTableColumn[]` | — | Columns in render order: key, label, and optional align / numeric. A numeric column gets tabular figures and right alignment |
| `rows` (required) | `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 |

## Snippets

| Snippet | Description |
| --- | --- |
| `cell` | Replaces the default rendering of every cell; receives the raw value and { row, key } |

## Examples

### Basic Usage

```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>
```