#115 add styles for blob and null

src/assets/styles/tables.css

@@ -107,3 +107,9 @@ table.sqliteviz-table {
   font-size: 11px;
   color: var(--color-text-base);
 }
+
+.sqliteviz-table tbody td[data-isNull="true"],
+.sqliteviz-table tbody td[data-isBlob="true"] {
+  color: var(--color-text-light-2);
+  font-style: italic;
+}

src/components/SqlTable/index.vue

@@ -38,12 +38,14 @@
               :data-col="colIndex"
               :data-row="rowIndex - 1"
               :data-record="pageSize * (currentPage - 1) + rowIndex - 1"
+              :data-isNull="isNull(getCellValue(col, rowIndex))"
+              :data-isBlob="isBlob(getCellValue(col, rowIndex))"
               :key="colIndex"
               :aria-selected="false"
               @click="onCellClick"
             >
               <div class="cell-data" :style="cellStyle">
-                {{ dataSet.values[col][rowIndex - 1 + currentPageData.start] }}
+                {{ getCellText(col, rowIndex) }}
               </div>
             </td>
           </tr>
@@ -57,7 +59,11 @@
         <span v-if="preview">for preview</span>
         <span v-if="time">in {{ time }}</span>
       </div>
-      <pager v-show="pageCount > 1" :page-count="pageCount" v-model="currentPage" />
+      <pager
+        v-show="pageCount > 1"
+        :page-count="pageCount"
+        v-model="currentPage"
+      />
     </div>
   </div>
 </template>
@@ -133,6 +139,25 @@ export default {
     }
   },
   methods: {
+    isBlob (value) {
+      return value && ArrayBuffer.isView(value)
+    },
+    isNull (value) {
+      return value === null
+    },
+    getCellValue (col, rowIndex) {
+      return this.dataSet.values[col][rowIndex - 1 + this.currentPageData.start]
+    },
+    getCellText (col, rowIndex) {
+      const value = this.getCellValue(col, rowIndex)
+      if (this.isNull(value)) {
+        return 'NULL'
+      }
+      if (this.isBlob(value)) {
+        return 'BLOB'
+      }
+      return value
+    },
     calculateHeadersWidth () {
       this.tableWidth = this.$refs['table-container'].offsetWidth
       this.$nextTick(() => {

src/lib/database/_sql.js

@@ -8,11 +8,11 @@ function _getDataSourcesFromSqlResult (sqlResult) {
   if (!sqlResult) {
     return {}
   }
-  const dataSorces = {}
+  const dataSources = {}
   sqlResult.columns.forEach((column, index) => {
-    dataSorces[column] = sqlResult.values.map(row => row[index])
+    dataSources[column] = sqlResult.values.map(row => row[index])
   })
-  return dataSorces
+  return dataSources
 }
 
 export default class Sql {

src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue

@@ -23,12 +23,14 @@
             <td
               :data-col="1"
               :data-row="index"
+              :data-isNull="isNull(getCellValue(col))"
+              :data-isBlob="isBlob(getCellValue(col))"
               :key="index"
               :aria-selected="false"
               @click="onCellClick"
             >
               <div class="cell-data">
-                {{ dataSet.values[col][currentRowIndex] }}
+                {{ getCellText(col) }}
               </div>
             </td>
           </tr>
@@ -89,6 +91,25 @@ export default {
     }
   },
   methods: {
+    isBlob (value) {
+      return value && ArrayBuffer.isView(value)
+    },
+    isNull (value) {
+      return value === null
+    },
+    getCellValue (col) {
+      return this.dataSet.values[col][this.currentRowIndex]
+    },
+    getCellText (col) {
+      const value = this.getCellValue(col)
+      if (this.isNull(value)) {
+        return 'NULL'
+      }
+      if (this.isBlob(value)) {
+        return 'BLOB'
+      }
+      return value
+    },
     onTableKeydown (e) {
       const keyCodeMap = {
         38: 'up',

src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue

@@ -26,7 +26,10 @@
         :value="formattedJson"
         :options="cmOptions"
       />
-      <div v-if="currentFormat === 'text'" class="text-value">
+      <div
+        v-if="currentFormat === 'text'"
+        :class="['text-value', { 'meta-value': isNull || isBlob }]"
+      >
         {{ cellValue }}
       </div>
       <logs
@@ -56,7 +59,9 @@ export default {
     Logs
   },
   props: {
-    cellValue: [String, Number]
+    cellValue: [String, Number],
+    isNull: Boolean,
+    isBlob: Boolean
   },
   data () {
     return {
@@ -84,12 +89,12 @@ export default {
       this.messages = []
       this.formattedJson = ''
       if (this.currentFormat === 'json') {
-        this.formatJson(this.cellValue)
+        this.formatJson(this.isNull ? null : this.cellValue)
       }
     },
     cellValue () {
       if (this.currentFormat === 'json') {
-        this.formatJson(this.cellValue)
+        this.formatJson(this.isNull ? null : this.cellValue)
       }
     }
   },
@@ -139,6 +144,11 @@ export default {
   color: var(--color-text-base);
 }
 
+.text-value.meta-value {
+  font-style: italic;
+  color: var(--color-text-light-2);
+}
+
 .messages {
   margin: 8px;
 }

src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue

@@ -16,6 +16,8 @@
           <value-viewer
             v-show="selectedCell"
             :cellValue="selectedCell ? selectedCell.innerText : ''"
+            :is-null="selectedCell && selectedCell.dataset.isnull === 'true'"
+            :is-blob="selectedCell && selectedCell.dataset.isblob === 'true'"
           />
           <div v-show="!selectedCell" class="table-preview">
             No cell selected to view