{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "records-table", "type": "registry:component", "title": "Records table", "description": "CRM-style grid with tags, sorting, and relationship status.", "categories": [ "ai-interface" ], "registryDependencies": [ "https://irisui.dev/r/foundation.json", "https://irisui.dev/r/utils.json", "https://irisui.dev/r/glide-menu.json" ], "files": [ { "path": "src/registry/components/records-table/records-table.tsx", "content": "\"use client\";\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport GlideMenu from \"../glide-menu/glide-menu\";\n\n/* ─────────────────────────────────────────────────────────\n * RECORDS TABLE — an AI spreadsheet grid. Columns are\n * *properties*: click a header to open its configuration\n * popover (type, tool, grounding, inputs, prompt, run), add\n * a new AI property from the + header, and watch cells\n * resolve row-by-row while it calculates.\n * ───────────────────────────────────────────────────────── */\n\ntype Strength = \"strong\" | \"weak\" | \"veryweak\" | \"none\";\ntype SortKey = \"name\" | \"last\" | \"strength\";\ntype ColumnKey = \"company\" | \"categories\" | \"last\" | \"strength\" | \"links\" | \"ai\";\n\nconst DEFAULT_COLUMN_WIDTHS: Record = {\n company: 270,\n categories: 275,\n last: 190,\n strength: 210,\n links: 175,\n ai: 240,\n};\n\nconst STRENGTH: Record = {\n strong: { label: \"Very strong\", color: \"var(--green)\", rank: 3 },\n weak: { label: \"Weak\", color: \"var(--orange)\", rank: 2 },\n veryweak: { label: \"Very weak\", color: \"var(--red)\", rank: 1 },\n none: { label: \"No communication\", color: \"var(--ink-3)\", rank: 0 },\n};\n\n// A single mid-lightness base hue per tag. Background, text, and border are\n// derived from this via color-mix() against the theme tokens in Tag,\n// so the chips adapt to light and dark automatically (same pattern as FilterTable).\ntype TagColor = { base: string };\n\nconst TAG_PALETTE: Record = {\n amber: { base: \"oklch(0.76 0.13 70)\" },\n lime: { base: \"oklch(0.77 0.16 122)\" },\n yellow: { base: \"oklch(0.80 0.15 101)\" },\n purple: { base: \"oklch(0.62 0.18 293)\" },\n orange: { base: \"oklch(0.71 0.16 48)\" },\n cyan: { base: \"oklch(0.72 0.10 221)\" },\n red: { base: \"oklch(0.64 0.19 27)\" },\n magenta: { base: \"oklch(0.66 0.21 323)\" },\n green: { base: \"oklch(0.70 0.13 162)\" },\n pink: { base: \"oklch(0.67 0.19 3)\" },\n};\n\nconst TAG_COLORS: Record = {\n \"Pre-seed\": TAG_PALETTE.amber,\n Seed: TAG_PALETTE.lime,\n \"Series A\": TAG_PALETTE.purple,\n \"Series B+\": TAG_PALETTE.magenta,\n Growth: TAG_PALETTE.orange,\n SaaS: TAG_PALETTE.cyan,\n B2B: TAG_PALETTE.yellow,\n Marketplaces: TAG_PALETTE.pink,\n \"Deep tech\": TAG_PALETTE.red,\n Climate: TAG_PALETTE.green,\n Energy: TAG_PALETTE.yellow,\n Fintech: TAG_PALETTE.cyan,\n \"AI/ML\": TAG_PALETTE.purple,\n DevTools: TAG_PALETTE.red,\n Mobility: TAG_PALETTE.orange,\n Generalist: TAG_PALETTE.green,\n};\n\nexport type RecordRow = {\n id: string;\n name: string;\n tags: string[];\n last: string;\n strength: Strength;\n website?: string;\n};\n\n/* a FundDaddy register: fictional investor firms with their stage and focus */\nconst INITIAL_ROWS: RecordRow[] = [\n {\n id: \"halcyon-ridge\",\n name: \"Halcyon Ridge Ventures — Berlin\",\n tags: [\"Seed\", \"SaaS\", \"B2B\"],\n last: \"2 days ago\",\n strength: \"strong\",\n website: \"halcyonridge.example\",\n },\n {\n id: \"aegean-seed\",\n name: \"Aegean Seed Partners — Athens\",\n tags: [\"Seed\", \"B2B\", \"Deep tech\"],\n last: \"9 days ago\",\n strength: \"strong\",\n website: \"aegeanseed.example\",\n },\n {\n id: \"northlight\",\n name: \"Northlight Angels — Copenhagen\",\n tags: [\"Pre-seed\", \"Climate\", \"Energy\"],\n last: \"3 weeks ago\",\n strength: \"weak\",\n website: \"northlight.example\",\n },\n {\n id: \"ferrovia\",\n name: \"Ferrovia Growth — Milan\",\n tags: [\"Growth\", \"Fintech\"],\n last: \"2 months ago\",\n strength: \"veryweak\",\n website: \"ferrovia.example\",\n },\n {\n id: \"kiln-street\",\n name: \"Kiln Street Labs — Amsterdam\",\n tags: [\"Pre-seed\", \"Generalist\"],\n last: \"15 days ago\",\n strength: \"weak\",\n website: \"kilnstreet.example\",\n },\n {\n id: \"morrow\",\n name: \"Morrow Corporate Ventures — Paris\",\n tags: [\"Series A\", \"Mobility\"],\n last: \"No contact\",\n strength: \"none\",\n },\n {\n id: \"quayside\",\n name: \"Quayside Fund — Dublin\",\n tags: [\"Series A\", \"AI/ML\", \"DevTools\"],\n last: \"4 days ago\",\n strength: \"strong\",\n website: \"quayside.example\",\n },\n {\n id: \"tidewater-row\",\n name: \"Tidewater Row Capital — Rotterdam\",\n tags: [\"Seed\", \"Marketplaces\"],\n last: \"5 months ago\",\n strength: \"veryweak\",\n website: \"tidewaterrow.example\",\n },\n {\n id: \"saltmarsh\",\n name: \"Saltmarsh Seed — Lisbon\",\n tags: [\"Pre-seed\", \"Marketplaces\"],\n last: \"about 1 month ago\",\n strength: \"weak\",\n website: \"saltmarsh.example\",\n },\n {\n id: \"orchard-lane\",\n name: \"Orchard Lane Ventures — Vienna\",\n tags: [\"Seed\", \"Fintech\", \"B2B\"],\n last: \"6 days ago\",\n strength: \"strong\",\n website: \"orchardlane.example\",\n },\n {\n id: \"juniper-quay\",\n name: \"Juniper Quay Partners — Oslo\",\n tags: [\"Series A\", \"Climate\"],\n last: \"8 months ago\",\n strength: \"veryweak\",\n },\n {\n id: \"granite-hollow\",\n name: \"Granite Hollow Fund — Zürich\",\n tags: [\"Series B+\", \"Deep tech\"],\n last: \"over 1 year ago\",\n strength: \"veryweak\",\n website: \"granitehollow.example\",\n },\n {\n id: \"lanternfield\",\n name: \"Lanternfield Angels — Kraków\",\n tags: [\"Pre-seed\", \"DevTools\"],\n last: \"18 days ago\",\n strength: \"weak\",\n website: \"lanternfield.example\",\n },\n {\n id: \"olive-terrace\",\n name: \"Olive Terrace Seed — Thessaloniki\",\n tags: [\"Seed\", \"B2B\", \"SaaS\"],\n last: \"3 days ago\",\n strength: \"strong\",\n website: \"oliveterrace.example\",\n },\n {\n id: \"harbourline\",\n name: \"Harbourline Capital — Gothenburg\",\n tags: [\"Growth\", \"Energy\"],\n last: \"No contact\",\n strength: \"none\",\n website: \"harbourline.example\",\n },\n {\n id: \"cobalt-meadow\",\n name: \"Cobalt Meadow Ventures — Madrid\",\n tags: [\"Seed\", \"SaaS\"],\n last: \"2 months ago\",\n strength: \"weak\",\n website: \"cobaltmeadow.example\",\n },\n {\n id: \"ashgrove\",\n name: \"Ashgrove Labs — Brussels\",\n tags: [\"Pre-seed\", \"Generalist\"],\n last: \"almost 2 years ago\",\n strength: \"none\",\n },\n {\n id: \"northpine\",\n name: \"Northpine Seed — Helsinki\",\n tags: [\"Seed\", \"AI/ML\"],\n last: \"11 days ago\",\n strength: \"strong\",\n website: \"northpine.example\",\n },\n {\n id: \"sundial\",\n name: \"Sundial Ventures — Barcelona\",\n tags: [\"Series A\", \"Marketplaces\", \"Fintech\"],\n last: \"5 weeks ago\",\n strength: \"weak\",\n website: \"sundial.example\",\n },\n {\n id: \"pebble-coast\",\n name: \"Pebble Coast Capital — Porto\",\n tags: [\"Seed\", \"Fintech\"],\n last: \"10 months ago\",\n strength: \"veryweak\",\n website: \"pebblecoast.example\",\n },\n {\n id: \"ironleaf\",\n name: \"Ironleaf Partners — Munich\",\n tags: [\"Series A\", \"Mobility\", \"B2B\"],\n last: \"7 days ago\",\n strength: \"strong\",\n website: \"ironleaf.example\",\n },\n {\n id: \"tallow-street\",\n name: \"Tallow Street Angels — Warsaw\",\n tags: [\"Pre-seed\", \"B2B\"],\n last: \"about 1 month ago\",\n strength: \"weak\",\n },\n {\n id: \"kastro\",\n name: \"Kastro Seed — Heraklion\",\n tags: [\"Pre-seed\", \"Deep tech\"],\n last: \"5 days ago\",\n strength: \"strong\",\n website: \"kastroseed.example\",\n },\n {\n id: \"brickfield\",\n name: \"Brickfield Growth — Prague\",\n tags: [\"Growth\", \"SaaS\", \"B2B\"],\n last: \"over 1 year ago\",\n strength: \"veryweak\",\n website: \"brickfield.example\",\n },\n];\n\n/* the AI column resolves to similar firms from the same register */\nconst AI_LABEL = \"Similar firms\";\nconst SIMILAR_POOL = [\n \"Harbourline Capital\",\n \"Ironleaf Partners\",\n \"Olive Terrace Seed\",\n \"Cobalt Meadow Ventures\",\n \"Ashgrove Labs\",\n \"Pebble Coast Capital\",\n \"Sundial Ventures\",\n \"Northpine Seed\",\n];\nconst similarFirmsFor = (index: number) => `${SIMILAR_POOL[index % 8]}, ${SIMILAR_POOL[(index + 3) % 8]}`;\n\n/* ── grid styling ─────────────────────────────────────────\n * One quiet surface, precise rules, colour reserved for meaning. The first column stays an anchor (sticky left) while\n * both axes scroll inside the table viewport; the header sticks to the top and the calculation row to the bottom.\n * Row hover and selection tint every cell of the row; the column whose property is being configured (\"colsel\")\n * carries its own accent tint, one step stronger on hover and selection. */\nconst CELL = \"h-[35px] overflow-hidden px-2 text-ellipsis whitespace-nowrap\";\nconst STICKY_CELL = \"sticky left-0 z-2 bg-surface shadow-[5px_0_8px_-10px_oklch(0_0_0/0.4)]\";\nconst HEADER_CELL = \"sticky top-0 z-5 h-[35px] bg-surface p-0 text-[12.5px] font-medium text-ink-2\";\nconst HEADER_COLSEL = \"bg-[color-mix(in_srgb,var(--accent)_8%,var(--surface))] shadow-[inset_0_2px_0_var(--accent)]\";\nconst FOOTER_CELL = \"sticky bottom-0 z-4 bg-inset text-[14px] leading-none font-medium text-ink-2\";\nconst FOOTER_VALUE = \"inline-flex h-[35px] items-center align-middle\";\nconst STRENGTH_DOT = \"inline-block size-2 flex-[0_0_8px] rounded-full\";\nconst RESIZE_HANDLE =\n \"absolute top-0 -right-1.5 z-12 h-full w-3 cursor-col-resize touch-none after:absolute after:top-[7px] after:bottom-[7px] after:left-[5px] after:w-0.5 after:scale-y-[0.65] after:rounded-full after:bg-accent after:opacity-0 after:content-[''] after:[transition:opacity_120ms_ease-out,scale_150ms_var(--ease-out-strong)] hover:after:scale-y-100 hover:after:opacity-100\";\n\n/** Background tiers for a body cell: plain, row hovered, row selected, each tinted when its column is selected. */\nfunction rowCellClass(selectedRow: boolean, colsel: boolean, extra?: string) {\n return cn(\n CELL,\n extra,\n \"[transition:background-color_120ms_ease-out,color_120ms_ease-out]\",\n colsel && \"bg-[color-mix(in_srgb,var(--accent)_4%,var(--surface))]\",\n selectedRow\n ? colsel\n ? \"bg-[color-mix(in_srgb,var(--accent)_10%,var(--surface))]\"\n : \"bg-[color-mix(in_srgb,var(--accent)_7%,var(--surface))]\"\n : colsel\n ? \"group-hover/row:bg-[color-mix(in_srgb,var(--accent)_8%,var(--surface))]\"\n : \"group-hover/row:bg-hover\",\n );\n}\n\nfunction Icon({\n children,\n size = 14,\n strokeWidth = 1.8,\n}: {\n children: React.ReactNode;\n size?: number;\n strokeWidth?: number;\n}) {\n return (\n \n {children}\n \n );\n}\n\n/* glyph library for property types & tools */\nconst TYPE_GLYPHS: Record = {\n Text: ,\n File: (\n \n \n \n \n ),\n Collection: (\n \n \n \n \n ),\n \"Single select\": (\n \n \n \n \n ),\n \"Multi select\": (\n \n \n \n \n ),\n URL: (\n \n \n \n \n ),\n Reference: ,\n JSON: (\n \n \n \n \n ),\n \"File splitter\": (\n \n \n \n \n ),\n Date: (\n \n \n \n \n ),\n};\n\nconst TOOL_GLYPHS: Record = {\n model: (\n \n ),\n web: (\n \n \n \n \n ),\n user: (\n \n \n \n \n ),\n};\n\n/* per-property configuration shown in the popover */\ntype Prompt = { before: string; chip?: string; after?: string };\ntype ToolKind = \"model\" | \"web\" | \"user\";\ntype ColumnMeta = { type: string; tool: string; toolKind: ToolKind; inputs?: string; prompt?: Prompt };\n\nconst COLUMN_META: Record = {\n Firm: { type: \"Text\", tool: \"User input\", toolKind: \"user\" },\n Focus: {\n type: \"Multi select\",\n tool: \"Large\",\n toolKind: \"model\",\n inputs: \"Firm\",\n prompt: { before: \"Tag each \", chip: \"Firm\", after: \" with its stages and focus.\" },\n },\n \"Last interaction\": { type: \"Date\", tool: \"User input\", toolKind: \"user\" },\n \"Connection strength\": {\n type: \"Single select\",\n tool: \"Large\",\n toolKind: \"model\",\n inputs: \"Last interaction\",\n prompt: { before: \"Score the relationship from \", chip: \"Last interaction\", after: \".\" },\n },\n Links: {\n type: \"URL\",\n tool: \"Web search\",\n toolKind: \"web\",\n inputs: \"Firm\",\n prompt: { before: \"Find the website for \", chip: \"Firm\", after: \".\" },\n },\n [AI_LABEL]: {\n type: \"Text\",\n tool: \"Web search\",\n toolKind: \"web\",\n inputs: \"Firm\",\n prompt: { before: \"Find firms similar to \", chip: \"Firm\" },\n },\n};\n\nconst NEW_PROPERTY_TYPES = [\n \"Text\",\n \"File\",\n \"Collection\",\n \"Single select\",\n \"Multi select\",\n \"URL\",\n \"Reference\",\n \"JSON\",\n \"File splitter\",\n];\nconst MODEL_OPTIONS = [\"Large\", \"Standard\", \"Small\"];\nconst INPUT_OPTIONS = [\"Firm\", \"Focus\", \"Last interaction\", \"Connection strength\", \"Links\"];\n\nfunction Checkbox({\n checked,\n mixed = false,\n onChange,\n label,\n className,\n}: {\n checked: boolean;\n mixed?: boolean;\n onChange: () => void;\n label: string;\n className?: string;\n}) {\n const active = checked || mixed;\n return (\n \n \n \n {mixed ? (\n \n ) : checked ? (\n \n \n \n ) : null}\n \n \n );\n}\n\nfunction Tag({ name }: { name: string }) {\n const color = TAG_COLORS[name] ?? { base: \"var(--ink-3)\" };\n return (\n \n {name}\n \n );\n}\n\nconst MORE_TAG =\n \"inline-flex h-[23px] shrink-0 items-center rounded-chip border border-line-strong bg-inset px-[7px] text-[11px] font-medium text-ink-3\";\n\nfunction TagList({ tags }: { tags: string[] }) {\n const containerRef = useRef(null);\n const measureRef = useRef(null);\n const [visibleCount, setVisibleCount] = useState(tags.length);\n\n useLayoutEffect(() => {\n const container = containerRef.current;\n const measure = measureRef.current;\n if (!container || !measure) return;\n\n const update = () => {\n const available = container.clientWidth;\n const tagWidths = Array.from(\n measure.querySelectorAll(\"[data-tag-measure]\"),\n (tag) => tag.offsetWidth,\n );\n const moreWidth = measure.querySelector(\"[data-more-measure]\")?.offsetWidth ?? 0;\n let used = 0;\n let count = 0;\n\n for (let index = 0; index < tagWidths.length; index += 1) {\n const nextUsed = used + (count > 0 ? 4 : 0) + tagWidths[index];\n const hiddenAfter = tags.length - (index + 1);\n const totalWithOverflow = nextUsed + (hiddenAfter > 0 ? 4 + moreWidth : 0);\n if (totalWithOverflow > available) break;\n used = nextUsed;\n count += 1;\n }\n\n setVisibleCount(count);\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(container);\n return () => observer.disconnect();\n }, [tags]);\n\n const hiddenCount = tags.length - visibleCount;\n\n return (\n \n span]:inline-flex\"\n aria-hidden\n >\n {tags.map((tag) => (\n \n \n \n ))}\n \n +{tags.length}\n \n \n {tags.slice(0, visibleCount).map((tag) => (\n \n ))}\n {hiddenCount > 0 && +{hiddenCount}}\n \n );\n}\n\nfunction CalcCell() {\n return (\n \n Calculating…\n \n \n );\n}\n\nfunction MiniSwitch({ on, onToggle, label }: { on: boolean; onToggle: () => void; label: string }) {\n return (\n \n \n \n );\n}\n\n/** A property header: it opens the property's configuration; the selected column reads in the accent. */\nfunction headerButtonClass(selected: boolean) {\n return cn(\n \"group/header flex h-[35px] w-full items-center gap-2 px-3 text-left [transition:background-color_120ms_ease-out,color_120ms_ease-out] hover:bg-hover\",\n selected ? \"text-accent-ink\" : \"text-ink-2 hover:text-ink\",\n );\n}\n\n/** The drag handle on a header's right edge; its accent bar shows on hover and while dragging. */\nfunction ResizeHandle({\n label,\n resizing,\n onPointerDown,\n}: {\n label: string;\n resizing: boolean;\n onPointerDown: (event: React.PointerEvent) => void;\n}) {\n return (\n \n );\n}\n\nfunction HeaderCell({\n label,\n icon,\n sortKey,\n sort,\n onSort,\n onResizeStart,\n resizing = false,\n className = \"\",\n selected = false,\n onPick,\n}: {\n label: string;\n icon: React.ReactNode;\n sortKey?: SortKey;\n sort: { key: SortKey; dir: 1 | -1 };\n onSort: (key: SortKey) => void;\n onResizeStart: (event: React.PointerEvent) => void;\n resizing?: boolean;\n className?: string;\n selected?: boolean;\n onPick?: (event: React.MouseEvent) => void;\n}) {\n return (\n \n {/* the label opens the property config; the arrow beside it sorts */}\n
\n \n {icon}\n {label}\n \n {sortKey && (\n onSort(sortKey)}\n className={cn(\n \"ml-auto inline-flex shrink-0 opacity-0 [transition:opacity_120ms_ease-out,transform_160ms_var(--ease-out-strong)] group-hover/header:opacity-100 focus-visible:opacity-100\",\n sort.key === sortKey && \"opacity-100\",\n )}\n style={{ transform: sort.key === sortKey && sort.dir === -1 ? \"rotate(180deg)\" : undefined }}\n >\n \n \n \n \n )}\n
\n \n \n );\n}\n\n/* config row inside the property popover */\nfunction ConfigRow({ label, children }: { label: string; children: React.ReactNode }) {\n return (\n
\n {label}\n {children}\n
\n );\n}\n\nfunction ConfigPicker({\n label,\n options,\n selected,\n onSelect,\n}: {\n label: string;\n options: { label: string; icon: React.ReactNode }[];\n selected: string;\n onSelect: (value: string) => void;\n}) {\n return (\n \n
{label}
\n \n {options.map((option) => (\n onSelect(option.label)}\n className=\"relative z-10 flex h-8 w-full items-center gap-1.5 rounded-[8px] px-1.5 text-left text-[13px] font-medium text-ink\"\n >\n {option.icon}\n {option.label}\n \n \n \n \n \n \n ))}\n \n \n );\n}\n\nfunction InputPicker({\n options,\n selected,\n onToggle,\n}: {\n options: string[];\n selected: string[];\n onToggle: (value: string) => void;\n}) {\n return (\n \n
Use values from
\n \n {options.map((option) => {\n const checked = selected.includes(option);\n return (\n onToggle(option)}\n className=\"relative z-10 flex h-8 w-full items-center gap-1.5 rounded-[8px] px-1.5 text-left text-[13px] font-medium text-ink\"\n >\n \n \n \n \n \n {option}\n \n );\n })}\n \n \n );\n}\n\nexport default function RecordsTable({\n rows = INITIAL_ROWS,\n fill = false,\n}: {\n rows?: RecordRow[];\n fill?: boolean;\n variant?: string;\n}) {\n const [selected, setSelected] = useState>(new Set());\n const [sort, setSort] = useState<{ key: SortKey; dir: 1 | -1 }>({ key: \"name\", dir: 1 });\n const [columnWidths, setColumnWidths] = useState(DEFAULT_COLUMN_WIDTHS);\n const [actionColumnWidth, setActionColumnWidth] = useState(100);\n const [columnWidthsLocked, setColumnWidthsLocked] = useState(false);\n const [resizingColumn, setResizingColumn] = useState(null);\n const initialColumnWidthsRef = useRef | null>(null);\n const tableRef = useRef(null);\n\n /* property popover, anchored to the clicked header */\n const [prop, setProp] = useState<{ col: string; x: number; y: number } | null>(null);\n const [grounding, setGrounding] = useState(false);\n const [groundingHelpOpen, setGroundingHelpOpen] = useState(false);\n const [configMenu, setConfigMenu] = useState<\"type\" | \"tool\" | \"inputs\" | null>(null);\n const [columnOverrides, setColumnOverrides] = useState>>({});\n const [inputSelections, setInputSelections] = useState>({});\n const [pinnedColumns, setPinnedColumns] = useState>(new Set());\n const [moreSettingsOpen, setMoreSettingsOpen] = useState(false);\n const [advancedSettings, setAdvancedSettings] = useState({ required: false, allowEmpty: true, confidence: false });\n /* + new-property menu */\n const [addOpen, setAddOpen] = useState<{ x: number; y: number } | null>(null);\n const [tableMenuOpen, setTableMenuOpen] = useState<{ x: number; y: number } | null>(null);\n /* the added AI column and its lifecycle */\n const [aiAdded, setAiAdded] = useState(false);\n const [aiDone, setAiDone] = useState(false);\n const [pendingOpenAi, setPendingOpenAi] = useState(false);\n const aiThRef = useRef(null);\n /* programmatic scrolls (revealing the new column) shouldn't close popovers */\n const ignoreScrollRef = useRef(false);\n /* a running calculation resolves rows one by one */\n const [calc, setCalc] = useState<{ col: string; resolved: number } | null>(null);\n\n /* Let the table fill its available space once, then capture those rendered\n * widths before paint. From that point on every column is explicit, so a\n * resize changes only the dragged column and the table's total width. */\n useLayoutEffect(() => {\n if (columnWidthsLocked || !tableRef.current) return;\n const headers = Array.from(tableRef.current.querySelectorAll(\"thead th\"));\n if (headers.length < 6) return;\n\n const measured: Record = {\n company: headers[0].getBoundingClientRect().width,\n categories: headers[1].getBoundingClientRect().width,\n last: headers[2].getBoundingClientRect().width,\n strength: headers[3].getBoundingClientRect().width,\n links: headers[4].getBoundingClientRect().width,\n ai: DEFAULT_COLUMN_WIDTHS.ai,\n };\n initialColumnWidthsRef.current = measured;\n setColumnWidths(measured);\n setActionColumnWidth(headers[headers.length - 1].getBoundingClientRect().width);\n setColumnWidthsLocked(true);\n }, [columnWidthsLocked]);\n\n const visibleRows = useMemo(() => {\n return rows.toSorted((a, b) => {\n const value =\n sort.key === \"name\"\n ? a.name.localeCompare(b.name)\n : sort.key === \"last\"\n ? a.last.localeCompare(b.last)\n : STRENGTH[a.strength].rank - STRENGTH[b.strength].rank;\n return value * sort.dir;\n });\n }, [rows, sort]);\n\n /* stagger: one row resolves every beat */\n useEffect(() => {\n if (!calc) return;\n const t = setTimeout(() => {\n if (calc.resolved < visibleRows.length) {\n setCalc({ ...calc, resolved: calc.resolved + 1 });\n return;\n }\n if (calc.col === AI_LABEL) setAiDone(true);\n setCalc(null);\n }, 110);\n return () => clearTimeout(t);\n }, [calc, visibleRows.length]);\n\n /* after adding the AI column, scroll it into view and open its config\n * anchored to the new header */\n useEffect(() => {\n if (!pendingOpenAi || !aiThRef.current) return;\n const scroller = aiThRef.current.closest(\"[data-records-scroll]\");\n if (scroller) {\n ignoreScrollRef.current = true;\n scroller.scrollLeft = scroller.scrollWidth;\n }\n const rect = aiThRef.current.getBoundingClientRect();\n setProp({ col: AI_LABEL, x: Math.min(rect.left, window.innerWidth - 336), y: rect.bottom + 6 });\n setPendingOpenAi(false);\n }, [pendingOpenAi, aiAdded]);\n\n /* click anywhere else closes popovers */\n useEffect(() => {\n if (!prop && !addOpen && !tableMenuOpen) return;\n const close = (event: PointerEvent) => {\n if (!(event.target as Element).closest(\"[data-recpop]\")) {\n setProp(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setAddOpen(null);\n setTableMenuOpen(null);\n }\n };\n document.addEventListener(\"pointerdown\", close);\n return () => document.removeEventListener(\"pointerdown\", close);\n }, [prop, addOpen, tableMenuOpen]);\n\n const openProp = (col: string) => (event: React.MouseEvent) => {\n const th = (event.currentTarget as Element).closest(\"th\");\n if (!th) return;\n setAddOpen(null);\n setTableMenuOpen(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setProp((current) => {\n if (current?.col === col) return null;\n const rect = th.getBoundingClientRect();\n return { col, x: Math.min(rect.left, window.innerWidth - 336), y: rect.bottom + 6 };\n });\n };\n\n const isCalc = (col: string, index: number) => !!calc && calc.col === col && index >= calc.resolved;\n\n const allSelected = visibleRows.length > 0 && visibleRows.every((row) => selected.has(row.id));\n const partiallySelected = !allSelected && visibleRows.some((row) => selected.has(row.id));\n\n const toggleSort = (key: SortKey) =>\n setSort((current) => (current.key === key ? { key, dir: (current.dir * -1) as 1 | -1 } : { key, dir: 1 }));\n const startColumnResize =\n (key: ColumnKey, minWidth = 120) =>\n (event: React.PointerEvent) => {\n event.preventDefault();\n event.stopPropagation();\n setProp(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setAddOpen(null);\n setTableMenuOpen(null);\n\n const startX = event.clientX;\n const startWidth = columnWidths[key];\n const previousCursor = document.body.style.cursor;\n const previousSelection = document.body.style.userSelect;\n document.body.style.cursor = \"col-resize\";\n document.body.style.userSelect = \"none\";\n setResizingColumn(key);\n\n const move = (moveEvent: PointerEvent) => {\n const width = Math.max(minWidth, startWidth + moveEvent.clientX - startX);\n setColumnWidths((current) => ({ ...current, [key]: width }));\n };\n const finish = () => {\n window.removeEventListener(\"pointermove\", move);\n window.removeEventListener(\"pointerup\", finish);\n window.removeEventListener(\"pointercancel\", finish);\n document.body.style.cursor = previousCursor;\n document.body.style.userSelect = previousSelection;\n setResizingColumn(null);\n };\n\n window.addEventListener(\"pointermove\", move);\n window.addEventListener(\"pointerup\", finish);\n window.addEventListener(\"pointercancel\", finish);\n };\n const toggleRow = (id: string) =>\n setSelected((current) => {\n const next = new Set(current);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n return next;\n });\n const toggleAll = () =>\n setSelected((current) => {\n const next = new Set(current);\n if (allSelected) visibleRows.forEach((row) => next.delete(row.id));\n else visibleRows.forEach((row) => next.add(row.id));\n return next;\n });\n\n const meta = prop ? { ...COLUMN_META[prop.col], ...columnOverrides[prop.col] } : null;\n const selectedInputs = prop && meta ? (inputSelections[prop.col] ?? (meta.inputs ? [meta.inputs] : [])) : [];\n const tableWidth =\n columnWidths.company +\n columnWidths.categories +\n columnWidths.last +\n columnWidths.strength +\n columnWidths.links +\n (aiAdded ? columnWidths.ai : 0) +\n actionColumnWidth;\n\n return (\n \n {\n if (ignoreScrollRef.current) {\n ignoreScrollRef.current = false;\n return;\n }\n setProp(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setAddOpen(null);\n setTableMenuOpen(null);\n }}\n >\n :last-child]:border-r-0\"\n style={{ width: columnWidthsLocked ? tableWidth : \"100%\", minWidth: tableWidth }}\n >\n \n \n \n \n \n \n {aiAdded && }\n \n \n \n \n \n \n \n \n Firm\n \n \n \n \n {TYPE_GLYPHS[\"Multi select\"]}}\n />\n {TYPE_GLYPHS.Date}}\n />\n {TYPE_GLYPHS[\"Single select\"]}}\n />\n {TYPE_GLYPHS.URL}}\n />\n {aiAdded && (\n \n \n \n {TYPE_GLYPHS.Text}\n \n {AI_LABEL}\n \n \n \n )}\n \n
\n {\n setProp(null);\n setTableMenuOpen(null);\n const rect = (event.currentTarget as Element).getBoundingClientRect();\n setAddOpen((current) =>\n current ? null : { x: Math.min(rect.left, window.innerWidth - 276), y: rect.bottom + 6 },\n );\n }}\n className=\"flex size-7 items-center justify-center rounded-button text-ink-2 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n \n \n \n \n {\n setProp(null);\n setAddOpen(null);\n const rect = event.currentTarget.getBoundingClientRect();\n setTableMenuOpen((current) =>\n current\n ? null\n : {\n x: Math.max(8, Math.min(rect.right - 220, window.innerWidth - 228)),\n y: rect.bottom + 6,\n },\n );\n }}\n className=\"flex size-7 items-center justify-center rounded-button text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n \n \n \n \n \n \n
\n \n \n \n {/* data cells stay silent — the papery link/flick sound is too much when scanning rows */}\n \n {visibleRows.map((row, index) => {\n const selectedRow = selected.has(row.id);\n const strength = STRENGTH[row.strength];\n const colsel = (col: string) => prop?.col === col;\n return (\n \n \n \n {index + 1}\n \n toggleRow(row.id)}\n label={`Select ${row.name}`}\n className={selectedRow ? \"inline-flex\" : \"hidden group-hover/row:inline-flex\"}\n />\n \n {row.name.slice(0, 1).toUpperCase()}\n \n !row.website && event.preventDefault()}\n title={row.name}\n className={cn(\n \"min-w-0 truncate text-[13px] font-medium text-ink\",\n row.website &&\n \"hover:text-accent-ink hover:underline hover:underline-offset-[3px] focus-visible:text-accent-ink focus-visible:underline focus-visible:underline-offset-[3px]\",\n )}\n >\n {row.name}\n \n \n \n {isCalc(\"Focus\", index) ? : }\n \n \n {isCalc(\"Last interaction\", index) ? : row.last}\n \n \n {isCalc(\"Connection strength\", index) ? (\n \n ) : (\n \n \n {strength.label}\n \n )}\n \n \n {isCalc(\"Links\", index) ? (\n \n ) : row.website ? (\n \n {row.website}\n \n \n \n \n ) : (\n —\n )}\n \n {aiAdded && (\n \n {calc?.col === AI_LABEL ? (\n index < calc.resolved ? (\n similarFirmsFor(index)\n ) : (\n \n )\n ) : aiDone ? (\n similarFirmsFor(index)\n ) : (\n —\n )}\n \n )}\n \n \n );\n })}\n \n \n \n \n \n {rows.length} count\n \n \n \n \n \n \n \n Add calculation\n \n \n \n —\n \n \n \n \n {Math.round(\n (rows.reduce((sum, row) => sum + STRENGTH[row.strength].rank, 0) / rows.length / 3) * 100,\n )}\n % average\n \n \n \n {rows.filter((row) => row.website).length} links\n \n {aiAdded && (\n \n {aiDone ? `${rows.length} filled` : \"—\"}\n \n )}\n \n \n \n \n \n\n {/* ── property configuration popover ─────────────────── */}\n {prop && meta && (\n \n
{prop.col}
\n\n \n setConfigMenu((current) => (current === \"type\" ? null : \"type\"))}\n className=\"flex items-center gap-1.5 rounded-button px-2 py-1 text-[13px] font-medium text-ink transition-colors duration-100 hover:bg-hover\"\n >\n \n {TYPE_GLYPHS[meta.type] ?? TYPE_GLYPHS.Text}\n \n {meta.type}\n \n \n \n \n \n \n {configMenu === \"type\" && (\n ({\n label: type,\n icon: {TYPE_GLYPHS[type]},\n }))}\n onSelect={(type) => {\n setColumnOverrides((current) => ({ ...current, [prop.col]: { ...current[prop.col], type } }));\n setConfigMenu(null);\n }}\n />\n )}\n \n \n setConfigMenu((current) => (current === \"tool\" ? null : \"tool\"))}\n className=\"flex items-center gap-1.5 rounded-button px-2 py-1 text-[13px] font-medium text-ink transition-colors duration-100 hover:bg-hover\"\n >\n \n {meta.toolKind === \"model\" ? (\n \n {TOOL_GLYPHS.model}\n \n ) : (\n {TOOL_GLYPHS[meta.toolKind]}\n )}\n \n {meta.tool}\n \n \n \n \n \n \n {configMenu === \"tool\" && (\n ({\n label: model,\n icon: (\n \n {TOOL_GLYPHS.model}\n \n ),\n }))}\n onSelect={(tool) => {\n setColumnOverrides((current) => ({\n ...current,\n [prop.col]: { ...current[prop.col], tool, toolKind: \"model\" },\n }));\n setConfigMenu(null);\n }}\n />\n )}\n \n \n \n setGrounding((current) => !current)} />\n setGroundingHelpOpen((open) => !open)}\n className=\"flex size-6 items-center justify-center rounded-button text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n \n \n \n \n \n \n \n \n {groundingHelpOpen && (\n \n Grounding lets the model verify generated values against connected sources.\n \n )}\n \n \n setConfigMenu((current) => (current === \"inputs\" ? null : \"inputs\"))}\n className=\"flex max-w-[220px] items-center gap-1.5 rounded-button px-2 py-1 text-[13px] text-ink-2 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n {selectedInputs.length ? (\n \n {selectedInputs.slice(0, 2).map((input) => (\n \n {input}\n \n ))}\n {selectedInputs.length > 2 && (\n +{selectedInputs.length - 2}\n )}\n \n ) : (\n Select inputs\n )}\n \n \n \n \n \n \n {configMenu === \"inputs\" && (\n input !== prop.col)}\n onToggle={(input) => {\n setInputSelections((current) => {\n const existing = current[prop.col] ?? (meta.inputs ? [meta.inputs] : []);\n const next = existing.includes(input)\n ? existing.filter((item) => item !== input)\n : [...existing, input];\n return { ...current, [prop.col]: next };\n });\n }}\n />\n )}\n \n\n {/* prompt — @-mention chips inline */}\n \n {meta.prompt ? (\n \n {meta.prompt.before}\n {meta.prompt.chip && (\n \n {meta.prompt.chip}\n \n )}\n {meta.prompt.after}\n \n ) : (\n Set a prompt (press @ to mention an input)\n )}\n \n\n {\n setCalc({ col: prop.col, resolved: 0 });\n setProp(null);\n }}\n className=\"mt-2.5 flex h-9 w-full items-center justify-center gap-2 rounded-button text-[12.5px] font-medium text-ink shadow-btn transition-[background-color,transform] duration-150 hover:bg-hover active:scale-[0.98] disabled:opacity-60\"\n >\n \n \n \n Go calculate\n \n\n \n \n setPinnedColumns((current) => {\n const next = new Set(current);\n if (next.has(prop.col)) next.delete(prop.col);\n else next.add(prop.col);\n return next;\n })\n }\n className=\"relative z-10 -mx-1.5 flex h-8 items-center gap-2.5 rounded-[8px] px-1.5 text-left text-[13px] leading-none text-ink transition-transform duration-150 active:scale-[0.96]\"\n >\n \n \n \n \n \n {pinnedColumns.has(prop.col) ? \"Unpin\" : \"Pin\"}\n \n setMoreSettingsOpen((open) => !open)}\n className=\"relative z-10 -mx-1.5 flex h-8 items-center gap-2.5 rounded-[8px] px-1.5 text-left text-[13px] leading-none text-ink transition-transform duration-150 active:scale-[0.96]\"\n >\n \n \n \n \n \n \n \n \n More settings\n \n \n \n \n \n \n {prop.col === AI_LABEL && (\n {\n setAiAdded(false);\n setAiDone(false);\n setProp(null);\n }}\n className=\"relative z-10 -mx-1.5 flex h-8 items-center gap-2.5 rounded-[8px] px-1.5 text-left text-[13px] leading-none text-ink transition-transform duration-150 active:scale-[0.96]\"\n >\n \n \n \n \n \n \n \n \n Hide from view\n \n )}\n \n\n {moreSettingsOpen && (\n
\n
Behavior
\n \n setAdvancedSettings((current) => ({ ...current, required: !current.required }))}\n />\n \n \n setAdvancedSettings((current) => ({ ...current, allowEmpty: !current.allowEmpty }))}\n />\n \n \n setAdvancedSettings((current) => ({ ...current, confidence: !current.confidence }))}\n />\n \n
\n )}\n \n )}\n\n {/* ── new property type menu ─────────────────────────── */}\n {addOpen && (\n \n
New property
\n \n {NEW_PROPERTY_TYPES.map((type) => (\n {\n setAddOpen(null);\n setAiDone(false);\n setAiAdded(true);\n setPendingOpenAi(true);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n {TYPE_GLYPHS[type]}\n \n {type}\n \n ))}\n \n \n )}\n\n {/* ── table options menu ─────────────────────────────── */}\n {tableMenuOpen && (\n \n
Table options
\n \n {\n const position = tableMenuOpen;\n setTableMenuOpen(null);\n setAddOpen({ x: Math.min(position.x, window.innerWidth - 276), y: position.y });\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n \n \n \n \n Add property\n \n {\n setColumnWidths({ company: 220, categories: 220, last: 155, strength: 180, links: 160, ai: 200 });\n setTableMenuOpen(null);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n \n \n \n \n Compact columns\n \n {\n setColumnWidths({ ...(initialColumnWidthsRef.current ?? DEFAULT_COLUMN_WIDTHS) });\n setTableMenuOpen(null);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n \n \n \n \n Reset column widths\n \n
\n {\n setSelected(new Set());\n setTableMenuOpen(null);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n \n \n \n \n Clear selection\n \n \n
\n )}\n \n );\n}\n", "type": "registry:component", "target": "@components/iris/records-table/records-table.tsx" } ], "docs": "Docs and live preview: https://irisui.dev/components/records-table", "meta": { "kind": "component", "group": "AI interface", "export": "RecordsTable", "docs": "https://irisui.dev/components/records-table" } }