;
+ onToggleRow: (i: number) => void;
+ activeCell: CellPos | null;
+ onCellClick: (pos: CellPos) => void;
+ onJsonClick: (value: unknown, anchor: DOMRect) => void;
+}) {
+ const totalWidth = 40 + columns.length * COL_WIDTH;
+ const allSelected = rows.length > 0 && selectedRows.size === rows.length;
+
+ return (
+
+
+
+
+ {
+ if (allSelected) {
+ rows.forEach((_, i) => selectedRows.has(i) && onToggleRow(i));
+ } else {
+ rows.forEach((_, i) => !selectedRows.has(i) && onToggleRow(i));
+ }
+ }}
+ className="w-3.5 h-3.5 rounded border-[var(--border)] cursor-pointer accent-[var(--accent)]"
+ />
+
+ {columns.map((col) => (
+
+
+ {col.is_pk && }
+ {col.is_fk && }
+ {col.name}
+ {abbreviateType(col.data_type)}
+
+
+ ))}
+
+
+
+ {rows.length === 0 ? (
+
No rows in result set
+ ) : (
+
+ {rows.map((row, rowIndex) => {
+ const isSelected = selectedRows.has(rowIndex);
+ return (
+
+
+ onToggleRow(rowIndex)}
+ className="w-3.5 h-3.5 rounded border-[var(--border)] cursor-pointer accent-[var(--accent)]"
+ />
+
+ {columns.map((col, colIndex) => {
+ const cell = row[colIndex];
+ const isNull = cell === null || cell === undefined;
+ const isJson = !isNull && (col.data_type === "jsonb" || col.data_type === "json");
+ const isFk = col.is_fk && col.fk_ref && !isNull;
+ const isActive = activeCell?.row === rowIndex && activeCell?.col === colIndex;
+ return (
+
{
+ onCellClick({ row: rowIndex, col: colIndex });
+ if (isJson) {
+ onJsonClick(cell, (e.currentTarget as HTMLElement).getBoundingClientRect());
+ }
+ }}
+ >
+ {isNull ? (
+
NULL
+ ) : isJson ? (
+
+
+ {jsonPreviewLabel(cell)}
+
+ ) : isFk ? (
+
+
+ {String(cell)}
+
+ ) : (
+ String(cell)
+ )}
+
+ );
+ })}
+
+ );
+ })}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedCount > 0 && (
+
{selectedCount} selected
+ )}
+
+
+
1-{rowCount} of {rowCount}
+
· {table}
+
+
+
+
+
+
+
+ PostgreSQL
+
+
+
+