diff --git a/src/views/html.ts b/src/views/html.ts
index 18cffe4d..a76fd2c2 100644
--- a/src/views/html.ts
+++ b/src/views/html.ts
@@ -31,6 +31,10 @@ export function getHeader(options: {withCollapsed?: boolean} = {}): string {
#resultset td {
padding: 5px 15px;
}
+
+ #resultset tbody tr:hover {
+ background-color: var(--vscode-list-hoverBackground);
+ }
#resultset tbody tr {
border-bottom: 1px solid var(--vscode-activityBar-border);
diff --git a/src/views/results/html.ts b/src/views/results/html.ts
index e056105c..c21f1eae 100644
--- a/src/views/results/html.ts
+++ b/src/views/results/html.ts
@@ -184,13 +184,27 @@ export function generateScroller(basicSelect: string, isCL: boolean, withCancel?
// Insert a cell at the end of the row
var newCell = newRow.insertCell();
- // Append a text node to the cell
-
- //TODO: handle cell formatting here
var newDiv = document.createElement("div");
newDiv.className = "hoverable";
- newDiv.appendChild(document.createTextNode(cell === undefined ? 'null' : cell));
+ // Append a formatted JSON object to the cell
+ const contentMightBeJson = typeof cell === 'string' && (cell.startsWith('{') || cell.startsWith('[')) && (cell.endsWith('}') || cell.endsWith(']'));
+ let isJson = false;
+ if (contentMightBeJson) {
+ try {
+ const cellJson = JSON.stringify(JSON.parse(cell), null, 2);
+ newDiv.style.whiteSpace = "pre";
+ newDiv.style["font-family"] = "monospace";
+ newDiv.innerText = cellJson;
+ isJson = true;
+ } catch (e) {}
+ }
+
+ if (!isJson) {
+ // Append a text node to the cell
+ newDiv.appendChild(document.createTextNode(cell === undefined ? 'null' : cell));
+ }
+
newCell.appendChild(newDiv);
}
}