51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1ad6,/* @jsxImportSource @opentui/react */ import { useKeyboard } from "@opentui/react"; import { useState, useMemo } from "react"; import { useTheme } from "@/hooks/use-theme"; import type { BorderStyle } from "@/components/ui/types"; export interface DataGridColumn> { key: keyof T & string; header: string; width?: number; align?: "left" | "right" | "center"; render?: (value: unknown, row: T) => string; filterable?: boolean; sortable?: boolean; } export interface DataGridProps< T extends Record = Record, > { data: T[]; columns: DataGridColumn[]; pageSize?: number; onRowSelect?: (row: T) => void; onCellEdit?: (row: T, key: string, value: string) => void; borderColor?: string; borderStyle?: BorderStyle; showRowNumbers?: boolean; filterPlaceholder?: string; } const pad = ( str: string, width: number, align: "left" | "right" | "center" = "left" ): string => { const s = String(str); if (s.length >= width) { return s.slice(0, width); } const diff = width - s.length; if (align === "right") { return " ".repeat(diff) + s; } if (align === "center") { const left = Math.floor(diff / 2); return " ".repeat(left) + `${s} `.repeat(diff - left); } return `${s} `.repeat(diff); }; export const DataGrid = < T extends Record = Record, >({ data, columns, pageSize = 10, onRowSelect, borderColor, borderStyle = "single", showRowNumbers = false, }: DataGridProps) => { const theme = useTheme(); const [selectedRow, setSelectedRow] = useState(0); const [page, setPage] = useState(0); const [sortKey, setSortKey] = useState(null); const [sortDir, _setSortDir] = useState<"asc" | "desc">("asc"); const [filter, setFilter] = useState(""); const [filterMode, setFilterMode] = useState(false); const resolvedBorderColor = borderColor ?? theme.colors.border; const colWidths = useMemo( () => columns.map((col) => { if (col.width) { return col.width; } const headerLen = col.header.length; const dataLen = Math.max( ...data.map((row) => String(row[col.key] ?? "").length) ); return Math.max(headerLen, dataLen, 6); }), [columns, data] ); const filtered = useMemo(() => { if (!filter) { return data; } const q = filter.toLowerCase(); return data.filter((row) => columns.some((col) => String(row[col.key] ?? "") .toLowerCase() .includes(q) ) ); }, [data, filter, columns]); const sorted = useMemo(() => { if (!sortKey) { return filtered; } return [...filtered].toSorted((a, b) => { const av = String(a[sortKey] ?? ""); const bv = String(b[sortKey] ?? ""); const cmp = av.localeCompare(bv); return sortDir === "asc" ? cmp : -cmp; }); }, [filtered, sortKey, sortDir]); const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize)); const pageData = sorted.slice(page * pageSize, (page + 1) * pageSize); useKeyboard((key) => { if (filterMode) { if (key.name === "escape") { setFilterMode(false); } else if (key.name === "return") { setFilterMode(false); } else if (key.name === "backspace" || key.name === "delete") { setFilter((f) => f.slice(0, -1)); } else if (key.name.length === 1 && !key.ctrl && !key.meta) { setFilter((f) => f + key.name); } return; } if (key.name === "up") { setSelectedRow((r) => Math.max(0, r - 1)); } else if (key.name === "down") { setSelectedRow((r) => Math.min(pageData.length - 1, r + 1)); } else if (key.name === "return" || key.name === "space") { if (pageData[selectedRow]) { onRowSelect?.(pageData[selectedRow]); } } else if (key.name === "pagedown" || key.name === "n") { setPage((p) => Math.min(totalPages - 1, p + 1)); setSelectedRow(0); } else if (key.name === "pageup" || key.name === "p") { setPage((p) => Math.max(0, p - 1)); setSelectedRow(0); } else if (key.name === "/") { setFilterMode(true); } else if (key.name === "s" && sortKey === null) { setSortKey(columns[0]?.key ?? null); } }); const colSep = " │ "; const renderRow = (row: T, rowIdx: number, isSelected: boolean) => { const cells = columns.map((col, ci) => { const raw = col.render ? col.render(row[col.key], row) : String(row[col.key] ?? ""); return pad(raw, colWidths[ci], col.align); }); const rowNumStr = showRowNumbers ? `${String(page * pageSize + rowIdx + 1).padStart(3)} ` : ""; return ( {rowNumStr && {rowNumStr}} {cells.join(colSep)} ); }; const headerCells = columns.map((col, ci) => { const isSorted = sortKey === col.key; const sortArrow = sortDir === "asc" ? " ↑" : " ↓"; const indicator = isSorted ? sortArrow : ""; return pad(col.header + indicator, colWidths[ci], col.align); }); const rowNumHeader = showRowNumbers ? " " : ""; return ( {(filterMode || filter) && ( {"Filter: "} {filter} {filterMode && █} )} {rowNumHeader && {rowNumHeader}} {headerCells.join(colSep)} {"─".repeat(headerCells.join(colSep).length + 2)} {pageData.length > 0 ? ( pageData.map((row, i) => ( {renderRow(row, i, i === selectedRow)} )) ) : ( No data )} {`Page ${page + 1}/${totalPages} (${sorted.length} rows)`} ↑↓ navigate n/p page / filter Enter select ); }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@opentui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40opentui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@opentui/react"}]]}]}]]}],["$","$L51",null,{"namespace":"@termcn","registryDependencies":["https://termcn.dev/r/opentui/use-theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/opentui/ui/data-grid.tsx","content":"$53","type":"registry:ui","target":"components/ui/data-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]