diff --git a/web-console/src/components/table-cell-unparseable/__snapshots__/table-cell-unparseable.spec.tsx.snap b/web-console/src/components/table-cell-unparseable/__snapshots__/table-cell-unparseable.spec.tsx.snap
new file mode 100644
index 00000000000..203a442e225
--- /dev/null
+++ b/web-console/src/components/table-cell-unparseable/__snapshots__/table-cell-unparseable.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`table cell unparseable matches snapshot not timestamp 1`] = `
+<div
+  class="table-cell-unparseable"
+>
+  unparseable
+</div>
+`;
+
+exports[`table cell unparseable matches snapshot timestamp 1`] = `
+<div
+  class="table-cell-unparseable"
+>
+  unparseable timestamp
+</div>
+`;
diff --git a/web-console/src/components/table-cell-unparseable/table-cell-unparseable.scss b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.scss
new file mode 100644
index 00000000000..43efe5085bf
--- /dev/null
+++ b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.scss
@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.table-cell-unparseable {
+  color: #9e2b0e;
+}
diff --git a/web-console/src/components/table-cell-unparseable/table-cell-unparseable.spec.tsx b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.spec.tsx
new file mode 100644
index 00000000000..0fdd45a23f8
--- /dev/null
+++ b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.spec.tsx
@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { TableCellUnparseable } from './table-cell-unparseable';
+
+describe('table cell unparseable', () => {
+  it('matches snapshot not timestamp', () => {
+    const tableCellUnparseable = <TableCellUnparseable />;
+
+    const { container } = render(tableCellUnparseable);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot timestamp', () => {
+    const tableCellUnparseable = <TableCellUnparseable timestamp />;
+
+    const { container } = render(tableCellUnparseable);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/components/table-cell-unparseable/table-cell-unparseable.tsx b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.tsx
new file mode 100644
index 00000000000..c6c067caf9d
--- /dev/null
+++ b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.tsx
@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import './table-cell-unparseable.scss';
+
+export interface TableCellUnparseableProps {
+  timestamp?: boolean;
+}
+
+export const TableCellUnparseable = React.memo(function TableCellUnparseable(
+  props: TableCellUnparseableProps,
+) {
+  const { timestamp } = props;
+
+  return (
+    <div className="table-cell-unparseable">
+      {timestamp ? 'unparseable timestamp' : 'unparseable'}
+    </div>
+  );
+});
diff --git a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
index 7f1eebb4df2..435939ae3a4 100644
--- a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
+++ b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
@@ -49,11 +49,11 @@ exports[`table cell matches snapshot null 1`] = `
 </span>
 `;
 
-exports[`table cell matches snapshot null timestamp 1`] = `
+exports[`table cell matches snapshot object 1`] = `
 <span
-  class="table-cell unparseable"
+  class="table-cell plain"
 >
-  unparseable timestamp
+  {"hello":"world"}
 </span>
 `;
 
@@ -69,13 +69,13 @@ exports[`table cell matches snapshot truncate 1`] = `
 <span
   class="table-cell truncated"
 >
-  testtesttesttesttesttes
+  test_test_test_test_tes
   <span
     class="omitted"
   >
-    ...363 omitted...
+    ...462 omitted...
   </span>
-  sttesttest
+  test_test_
   <span
     class="bp3-icon bp3-icon-more action-icon"
     icon="more"
@@ -97,3 +97,19 @@ exports[`table cell matches snapshot truncate 1`] = `
   </span>
 </span>
 `;
+
+exports[`table cell matches snapshot unlimited (absolute max) 1`] = `
+<span
+  class="table-cell plain"
+>
+  test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_...
+</span>
+`;
+
+exports[`table cell matches snapshot unlimited 1`] = `
+<span
+  class="table-cell plain"
+>
+  test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_test_
+</span>
+`;
diff --git a/web-console/src/components/table-cell/table-cell.scss b/web-console/src/components/table-cell/table-cell.scss
index 3671b7d9afc..3b3ded93d4a 100644
--- a/web-console/src/components/table-cell/table-cell.scss
+++ b/web-console/src/components/table-cell/table-cell.scss
@@ -21,10 +21,6 @@
     font-style: italic;
   }
 
-  &.unparseable {
-    color: #9e2b0e;
-  }
-
   &.timestamp {
     font-weight: bold;
   }
diff --git a/web-console/src/components/table-cell/table-cell.spec.tsx b/web-console/src/components/table-cell/table-cell.spec.tsx
index 1c5f220bbac..08b9de10f30 100644
--- a/web-console/src/components/table-cell/table-cell.spec.tsx
+++ b/web-console/src/components/table-cell/table-cell.spec.tsx
@@ -23,49 +23,59 @@ import { TableCell } from './table-cell';
 
 describe('table cell', () => {
   it('matches snapshot null', () => {
-    const tableCell = <TableCell value={null} unparseable={false} timestamp={false} />;
-
-    const { container } = render(tableCell);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('matches snapshot null timestamp', () => {
-    const tableCell = <TableCell value={null} unparseable={false} timestamp />;
+    const tableCell = <TableCell value={null} />;
 
     const { container } = render(tableCell);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('matches snapshot simple', () => {
-    const tableCell = <TableCell value="Hello World" unparseable={false} timestamp={false} />;
+    const tableCell = <TableCell value="Hello World" />;
 
     const { container } = render(tableCell);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('matches snapshot array short', () => {
-    const tableCell = <TableCell value={['a', 'b', 'c']} unparseable={false} timestamp={false} />;
+    const tableCell = <TableCell value={['a', 'b', 'c']} />;
 
     const { container } = render(tableCell);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('matches snapshot array long', () => {
-    const tableCell = (
-      <TableCell
-        value={Array.from(new Array(100)).map((_, i) => i)}
-        unparseable={false}
-        timestamp={false}
-      />
-    );
+    const tableCell = <TableCell value={Array.from(new Array(100)).map((_, i) => i)} />;
+
+    const { container } = render(tableCell);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot object', () => {
+    const tableCell = <TableCell value={{ hello: 'world' }} />;
 
     const { container } = render(tableCell);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('matches snapshot truncate', () => {
-    const longString = new Array(100).join('test');
-    const tableCell = <TableCell value={longString} unparseable={false} timestamp={false} />;
+    const longString = new Array(100).join('test_');
+    const tableCell = <TableCell value={longString} />;
+
+    const { container } = render(tableCell);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot unlimited', () => {
+    const longString = new Array(100).join('test_');
+    const tableCell = <TableCell value={longString} unlimited />;
+
+    const { container } = render(tableCell);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot unlimited (absolute max)', () => {
+    const longString = new Array(5000).join('test_');
+    const tableCell = <TableCell value={longString} unlimited />;
 
     const { container } = render(tableCell);
     expect(container.firstChild).toMatchSnapshot();
diff --git a/web-console/src/components/table-cell/table-cell.tsx b/web-console/src/components/table-cell/table-cell.tsx
index e252cc9cc34..0ec500a7fb0 100644
--- a/web-console/src/components/table-cell/table-cell.tsx
+++ b/web-console/src/components/table-cell/table-cell.tsx
@@ -25,6 +25,7 @@ import { ActionIcon } from '../action-icon/action-icon';
 import './table-cell.scss';
 
 const MAX_CHARS_TO_SHOW = 50;
+const ABSOLUTE_MAX_CHARS_TO_SHOW = 5000;
 
 interface ShortParts {
   prefix: string;
@@ -46,13 +47,12 @@ function shortenString(str: string): ShortParts {
 }
 
 export interface TableCellProps {
-  value?: any;
-  timestamp?: boolean;
-  unparseable?: boolean;
+  value: any;
+  unlimited?: boolean;
 }
 
 export const TableCell = React.memo(function TableCell(props: TableCellProps) {
-  const { value, timestamp, unparseable } = props;
+  const { value, unlimited } = props;
   const [showValue, setShowValue] = useState();
 
   function renderShowValueDialog(): JSX.Element | undefined {
@@ -62,7 +62,19 @@ export const TableCell = React.memo(function TableCell(props: TableCellProps) {
   }
 
   function renderTruncated(str: string): JSX.Element {
-    if (str.length <= MAX_CHARS_TO_SHOW) return <span className="table-cell plain">{str}</span>;
+    if (str.length <= MAX_CHARS_TO_SHOW) {
+      return <span className="table-cell plain">{str}</span>;
+    }
+
+    if (unlimited) {
+      return (
+        <span className="table-cell plain">
+          {str.length < ABSOLUTE_MAX_CHARS_TO_SHOW
+            ? str
+            : `${str.substr(0, ABSOLUTE_MAX_CHARS_TO_SHOW)}...`}
+        </span>
+      );
+    }
 
     const { prefix, omitted, suffix } = shortenString(str);
     return (
@@ -76,25 +88,21 @@ export const TableCell = React.memo(function TableCell(props: TableCellProps) {
     );
   }
 
-  if (unparseable) {
-    return <span className="table-cell unparseable">error</span>;
-  } else if (value !== '' && value != null) {
-    if (timestamp) {
+  if (value !== '' && value != null) {
+    if (value instanceof Date) {
       return (
-        <span className="table-cell timestamp" title={value}>
-          {new Date(value).toISOString()}
+        <span className="table-cell timestamp" title={String(value.valueOf())}>
+          {value.toISOString()}
         </span>
       );
     } else if (Array.isArray(value)) {
       return renderTruncated(`[${value.join(', ')}]`);
+    } else if (typeof value === 'object') {
+      return renderTruncated(JSON.stringify(value));
     } else {
       return renderTruncated(String(value));
     }
   } else {
-    if (timestamp) {
-      return <span className="table-cell unparseable">unparseable timestamp</span>;
-    } else {
-      return <span className="table-cell null">null</span>;
-    }
+    return <span className="table-cell null">null</span>;
   }
 });
diff --git a/web-console/src/views/load-data-view/filter-table/filter-table.tsx b/web-console/src/views/load-data-view/filter-table/filter-table.tsx
index ef45fc9120e..89f380f44c7 100644
--- a/web-console/src/views/load-data-view/filter-table/filter-table.tsx
+++ b/web-console/src/views/load-data-view/filter-table/filter-table.tsx
@@ -92,7 +92,7 @@ export const FilterTable = React.memo(function FilterTable(props: FilterTablePro
           className: columnClassName,
           id: String(i),
           accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
-          Cell: row => <TableCell value={row.value} timestamp={timestamp} />,
+          Cell: row => <TableCell value={timestamp ? new Date(row.value) : row.value} />,
         };
       })}
       defaultPageSize={50}
diff --git a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
index 053c7a1202e..f51503d1054 100644
--- a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
+++ b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
@@ -21,6 +21,7 @@ import React from 'react';
 import ReactTable from 'react-table';
 
 import { TableCell } from '../../../components';
+import { TableCellUnparseable } from '../../../components/table-cell-unparseable/table-cell-unparseable';
 import { caseInsensitiveContains, filterMap, parseJson } from '../../../utils';
 import { FlattenField } from '../../../utils/ingestion-spec';
 import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
@@ -74,7 +75,7 @@ export const ParseDataTable = React.memo(function ParseDataTable(props: ParseDat
           accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
           Cell: row => {
             if (row.original.unparseable) {
-              return <TableCell unparseable />;
+              return <TableCellUnparseable />;
             }
             return <TableCell value={row.value} />;
           },
diff --git a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
index 9fc6ba2c1eb..6a5e12f1b79 100644
--- a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
+++ b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
@@ -21,6 +21,7 @@ import React from 'react';
 import ReactTable from 'react-table';
 
 import { TableCell } from '../../../components';
+import { TableCellUnparseable } from '../../../components/table-cell-unparseable/table-cell-unparseable';
 import { caseInsensitiveContains, filterMap } from '../../../utils';
 import { possibleDruidFormatForValues } from '../../../utils/druid-time';
 import {
@@ -122,9 +123,9 @@ export const ParseTimeTable = React.memo(function ParseTimeTable(props: ParseTim
                 return <TableCell value={row.original.error} />;
               }
               if (row.original.unparseable) {
-                return <TableCell unparseable />;
+                return <TableCellUnparseable timestamp={timestamp} />;
               }
-              return <TableCell value={row.value} timestamp={timestamp} />;
+              return <TableCell value={timestamp ? new Date(row.value) : row.value} />;
             },
             minWidth: timestamp ? 200 : 100,
             resizable: !timestamp,
diff --git a/web-console/src/views/load-data-view/schema-table/schema-table.tsx b/web-console/src/views/load-data-view/schema-table/schema-table.tsx
index 0a782ca19d8..c334d8aaefe 100644
--- a/web-console/src/views/load-data-view/schema-table/schema-table.tsx
+++ b/web-console/src/views/load-data-view/schema-table/schema-table.tsx
@@ -147,7 +147,7 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
             className: columnClassName,
             id: String(i),
             accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
-            Cell: row => <TableCell value={row.value} timestamp={timestamp} />,
+            Cell: row => <TableCell value={timestamp ? new Date(row.value) : row.value} />,
           };
         }
       })}
diff --git a/web-console/src/views/load-data-view/transform-table/transform-table.tsx b/web-console/src/views/load-data-view/transform-table/transform-table.tsx
index 399f0cdb685..76dc1bf63ac 100644
--- a/web-console/src/views/load-data-view/transform-table/transform-table.tsx
+++ b/web-console/src/views/load-data-view/transform-table/transform-table.tsx
@@ -101,7 +101,7 @@ export const TransformTable = React.memo(function TransformTable(props: Transfor
           className: columnClassName,
           id: String(i),
           accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
-          Cell: row => <TableCell value={row.value} timestamp={timestamp} />,
+          Cell: row => <TableCell value={timestamp ? new Date(row.value) : row.value} />,
         };
       })}
       defaultPageSize={50}
diff --git a/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap b/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
index e5a679fa368..f2696f9180a 100644
--- a/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
+++ b/web-console/src/views/query-view/query-output/__snapshots__/query-output.spec.tsx.snap
@@ -146,7 +146,21 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              
+              <div>
+                <span
+                  class="bp3-popover-wrapper"
+                >
+                  <span
+                    class="bp3-popover-target"
+                  >
+                    <span
+                      class="table-cell null"
+                    >
+                      null
+                    </span>
+                  </span>
+                </span>
+              </div>
             </div>
             <div
               class="rt-td aggregate-column"
@@ -160,11 +174,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       6881
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -181,11 +195,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       1
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -195,7 +209,21 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <div>
+                <span
+                  class="bp3-popover-wrapper"
+                >
+                  <span
+                    class="bp3-popover-target"
+                  >
+                    <span
+                      class="table-cell plain"
+                    >
+                      0
+                    </span>
+                  </span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -219,11 +247,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       JavaScript
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -240,11 +268,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       166
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -261,11 +289,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       1
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -275,7 +303,21 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <div>
+                <span
+                  class="bp3-popover-wrapper"
+                >
+                  <span
+                    class="bp3-popover-target"
+                  >
+                    <span
+                      class="table-cell plain"
+                    >
+                      0
+                    </span>
+                  </span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -299,11 +341,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       Python
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -320,11 +362,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       62
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -341,11 +383,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       1
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -355,7 +397,21 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <div>
+                <span
+                  class="bp3-popover-wrapper"
+                >
+                  <span
+                    class="bp3-popover-target"
+                  >
+                    <span
+                      class="table-cell plain"
+                    >
+                      0
+                    </span>
+                  </span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -379,11 +435,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       HTML
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -400,11 +456,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       46
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -421,11 +477,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell plain"
                     >
                       1
-                    </div>
+                    </span>
                   </span>
                 </span>
               </div>
@@ -435,7 +491,21 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <div>
+                <span
+                  class="bp3-popover-wrapper"
+                >
+                  <span
+                    class="bp3-popover-target"
+                  >
+                    <span
+                      class="table-cell plain"
+                    >
+                      0
+                    </span>
+                  </span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -459,11 +529,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell null"
                     >
-                      Java
-                    </div>
+                      null
+                    </span>
                   </span>
                 </span>
               </div>
@@ -480,11 +550,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell null"
                     >
-                      42
-                    </div>
+                      null
+                    </span>
                   </span>
                 </span>
               </div>
@@ -501,11 +571,11 @@ exports[`query output matches snapshot 1`] = `
                   <span
                     class="bp3-popover-target"
                   >
-                    <div
-                      class=""
+                    <span
+                      class="table-cell null"
                     >
-                      1
-                    </div>
+                      null
+                    </span>
                   </span>
                 </span>
               </div>
@@ -515,7 +585,21 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <div>
+                <span
+                  class="bp3-popover-wrapper"
+                >
+                  <span
+                    class="bp3-popover-target"
+                  >
+                    <span
+                      class="table-cell null"
+                    >
+                      null
+                    </span>
+                  </span>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -524,7 +608,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -532,70 +616,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      C++
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      28
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -604,7 +654,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -odd"
+            class="rt-tr -padRow -odd"
             role="row"
           >
             <div
@@ -612,70 +662,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Go
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      24
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -684,7 +700,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -692,70 +708,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Ruby
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      20
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -764,7 +746,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -odd"
+            class="rt-tr -padRow -odd"
             role="row"
           >
             <div
@@ -772,70 +754,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      C#
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      14
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -844,7 +792,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -852,70 +800,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      C
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      13
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -924,7 +838,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -odd"
+            class="rt-tr -padRow -odd"
             role="row"
           >
             <div
@@ -932,70 +846,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      CSS
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      13
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1004,7 +884,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -1012,70 +892,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Shell
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      12
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1084,7 +930,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -odd"
+            class="rt-tr -padRow -odd"
             role="row"
           >
             <div
@@ -1092,70 +938,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Makefile
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      10
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1164,7 +976,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -1172,70 +984,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      PHP
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      9
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1244,7 +1022,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -odd"
+            class="rt-tr -padRow -odd"
             role="row"
           >
             <div
@@ -1252,70 +1030,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Scala
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      8
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1324,7 +1068,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -1332,70 +1076,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      HCL
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      6
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1404,7 +1114,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -odd"
+            class="rt-tr -padRow -odd"
             role="row"
           >
             <div
@@ -1412,70 +1122,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Jupyter Notebook
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      6
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1484,7 +1160,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -1492,70 +1168,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Smarty
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      4
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1564,7 +1206,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -odd"
+            class="rt-tr -padRow -odd"
             role="row"
           >
             <div
@@ -1572,70 +1214,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Elm
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      4
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1644,7 +1252,7 @@ exports[`query output matches snapshot 1`] = `
           role="rowgroup"
         >
           <div
-            class="rt-tr -even"
+            class="rt-tr -padRow -even"
             role="row"
           >
             <div
@@ -1652,70 +1260,36 @@ exports[`query output matches snapshot 1`] = `
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      Roff
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      3
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              <div>
-                <span
-                  class="bp3-popover-wrapper"
-                >
-                  <span
-                    class="bp3-popover-target"
-                  >
-                    <div
-                      class=""
-                    >
-                      1
-                    </div>
-                  </span>
-                </span>
-              </div>
+              <span>
+                 
+              </span>
             </div>
             <div
               class="rt-td aggregate-column"
               role="gridcell"
               style="flex: 100 0 auto; width: 100px;"
             >
-              0
+              <span>
+                 
+              </span>
             </div>
           </div>
         </div>
@@ -1761,7 +1335,7 @@ exports[`query output matches snapshot 1`] = `
             <span
               class="-totalPages"
             >
-              2
+              1
             </span>
           </span>
           <span
@@ -1808,6 +1382,7 @@ exports[`query output matches snapshot 1`] = `
         >
           <button
             class="-btn"
+            disabled=""
             type="button"
           >
             Next
diff --git a/web-console/src/views/query-view/query-output/query-output.spec.tsx b/web-console/src/views/query-view/query-output/query-output.spec.tsx
index d36ced139f0..3da323bc81a 100644
--- a/web-console/src/views/query-view/query-output/query-output.spec.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.spec.tsx
@@ -49,40 +49,7 @@ ORDER BY "Count" DESC`);
             ['JavaScript', 166, 1, 0],
             ['Python', 62, 1, 0],
             ['HTML', 46, 1, 0],
-            ['Java', 42, 1, 0],
-            ['C++', 28, 1, 0],
-            ['Go', 24, 1, 0],
-            ['Ruby', 20, 1, 0],
-            ['C#', 14, 1, 0],
-            ['C', 13, 1, 0],
-            ['CSS', 13, 1, 0],
-            ['Shell', 12, 1, 0],
-            ['Makefile', 10, 1, 0],
-            ['PHP', 9, 1, 0],
-            ['Scala', 8, 1, 0],
-            ['HCL', 6, 1, 0],
-            ['Jupyter Notebook', 6, 1, 0],
-            ['Smarty', 4, 1, 0],
-            ['Elm', 4, 1, 0],
-            ['Roff', 3, 1, 0],
-            ['Dockerfile', 3, 1, 0],
-            ['Rust', 3, 1, 0],
-            ['Dart', 2, 1, 0],
-            ['LLVM', 2, 1, 0],
-            ['Objective-C', 2, 1, 0],
-            ['Julia', 2, 1, 0],
-            ['PowerShell', 2, 1, 0],
-            ['Swift', 2, 1, 0],
-            ['Nim', 2, 1, 0],
-            ['XSLT', 1, 1, 0],
-            ['Lua', 1, 1, 0],
-            ['Vim script', 1, 1, 0],
-            ['Vue', 1, 1, 0],
-            ['Lasso', 1, 1, 0],
-            ['Clojure', 1, 1, 0],
-            ['OCaml', 1, 1, 0],
-            ['Chapel', 1, 1, 0],
-            ['Kotlin', 1, 1, 0],
+            [],
           ],
         }}
         parsedQuery={parsedQuery}
diff --git a/web-console/src/views/query-view/query-output/query-output.tsx b/web-console/src/views/query-view/query-output/query-output.tsx
index 70eb4a8662d..bce1fc09186 100644
--- a/web-console/src/views/query-view/query-output/query-output.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.tsx
@@ -26,6 +26,7 @@ import {
 import React, { useState } from 'react';
 import ReactTable from 'react-table';
 
+import { TableCell } from '../../../components';
 import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
 import { copyAndAlert } from '../../../utils';
 import { BasicAction, basicActionsToMenu } from '../../../utils/basic-action';
@@ -288,11 +289,10 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
             accessor: String(i),
             Cell: row => {
               const value = row.value;
-              if (!value) return value == null ? null : value;
               return (
                 <div>
                   <Popover content={getCellMenu(h, value)}>
-                    <div>{value}</div>
+                    <TableCell value={value} unlimited />
                   </Popover>
                 </div>
               );