RecordsTable

A CRM-style AI spreadsheet of firm records with coloured tags, last-interaction dates, connection strength and links, plus property popovers and an AI column that fills row by row.

When to use

• Show a list of firms, accounts or contacts that people scan, sort and select, with relationship health at a glance.
• Demonstrate AI enrichment: adding a property from the + header runs a calculation that resolves cell by cell.
• Not for a short status-filtered task list — use FilterTable. Not for generic tabular data with your own columns — use SortableDataTable.

Usage

import RecordsTable from "@/components/iris/records-table/records-table";

h(RecordsTable, {
  rows: [
    {
      id: "halcyon-ridge",
      name: "Halcyon Ridge Ventures — Berlin",
      tags: ["Seed", "SaaS"],
      last: "2 days ago",
      strength: "strong",
      website: "halcyonridge.example",
    },
    {
      id: "northlight",
      name: "Northlight Angels — Copenhagen",
      tags: ["Pre-seed", "Climate"],
      last: "3 weeks ago",
      strength: "weak",
    },
  ],
});

// Fill a flex parent instead of using the fixed 438px scroll height:
h("div", { style: { height: 600, display: "flex", flexDirection: "column" } }, h(RecordsTable, { fill: true }));

Props

Prop	Type	Default	Description
rows	{ id: string; name: string; tags: string[]; last: string; strength: "strong" | "weak" | "veryweak" | "none"; website?: string }[]	24 demo firms from a FundDaddy register	Table rows. strength maps to Very strong / Weak / Very weak / No communication with a coloured dot. website fills Links.
fill	boolean	false	Drops the outer border and the max height so the table fills its parent's height.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• Tag colours come from a fixed map of stages and focus areas: Pre-seed, Seed, Series A, Series B+, Growth, SaaS, B2B, Marketplaces, Deep tech, Climate, Energy, Fintech, AI/ML, DevTools, Mobility and Generalist. Any other tag falls back to a neutral --ink-3 tint.
• The columns (Firm, Focus, Last interaction, Connection strength, Links), the property popover options and the AI column ("Similar firms", filled from a fixed list of fictional names) are built in.
• Sorting by "Last interaction" compares the last strings alphabetically, not by date.
• The scroll area is a focusable, labelled section. A header's label opens its property popover and the arrow beside it sorts; columns resize by dragging header edges, and rows show their number until hovered or selected, when a checkbox takes its place. The header holds a select-all checkbox.
• Popovers render with fixed positioning and close when the table scrolls.
• Reads --surface, --line, --hover, --accent-tint, --accent-ink, --green, --orange, --red and the ink tokens. Tag chips derive their colours with color-mix against theme tokens, so they work in both themes.