+
+
+ Results
+
+
+ {isTableMode && tableName ? `stripe.${tableName}` : 'Query Output'}
+
+
+ {(isTableMode || queryResult) && (
+
+ {isTableMode ? (
+ <>
+
+
+
+ Page {currentPage} / {pageCount}
+
+
+
+
+
+
+
+ {totalRecords.toLocaleString()} {totalRecords === 1 ? 'record' : 'records'}
+
+ >
+ ) : (
+
+ {totalRecords.toLocaleString()} {totalRecords === 1 ? 'record' : 'records'}
+
+ )}
+
+ )}
+
+
+ {isExecuting && (
+
+ )}
+
+ {queryError && (
+
+ ⚠️
+ {queryError}
+
+ )}
+
+ {queryResult && !isExecuting && (
+
+
0 ? `${totalColumnWidth}px` : '100%' }}
+ >
+
+ {columns.map((column) => (
+
+ ))}
+
+
+
+ {columns.map((column) => (
+ |
+
+ {column.field.name}
+
+
+ handleColumnResizeStart(event, column.columnKey, column.width)
+ }
+ className="absolute inset-y-0 -right-2 z-20 flex w-5 cursor-col-resize touch-none items-center justify-center rounded transition-colors duration-150 ease-out hover:bg-indigo-50"
+ >
+
+
+ |
+ ))}
+
+
+
+ {displayedRows.map((row, rowIndex) => (
+
+ {columns.map((column) => {
+ const cellValue = formatCellValue(row[column.field.name])
+ const previewValue = getCellPreview(cellValue)
+ return (
+ |
+
+ {previewValue}
+
+ |
+ )
+ })}
+
+ ))}
+
+
+
+ )}
+
+ {!isExecuting && !queryError && !queryResult && (
+
+
+
+ Choose a table or run an ad-hoc query
+
+
+ The editor and result grid are both draggable so you can tune the workspace as
+ you explore.
+
+
+
+ )}
+
+