diff --git a/src/assets/styles/tables.css b/src/assets/styles/tables.css
index 59d1d69..aeca52a 100644
--- a/src/assets/styles/tables.css
+++ b/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;
+}
diff --git a/src/components/SqlTable/index.vue b/src/components/SqlTable/index.vue
index 7fc3a32..4f23a89 100644
--- a/src/components/SqlTable/index.vue
+++ b/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"
>
- {{ dataSet.values[col][rowIndex - 1 + currentPageData.start] }}
+ {{ getCellText(col, rowIndex) }}
@@ -57,7 +59,11 @@
for preview
in {{ time }}
-
+
@@ -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(() => {
diff --git a/src/lib/database/_sql.js b/src/lib/database/_sql.js
index 2524491..ee7aaec 100644
--- a/src/lib/database/_sql.js
+++ b/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 {
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue
index 111afb3..a87907a 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue
@@ -23,12 +23,14 @@
- {{ dataSet.values[col][currentRowIndex] }}
+ {{ getCellText(col) }}
|
@@ -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',
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
index 74f2c56..a70e73a 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
@@ -26,7 +26,10 @@
:value="formattedJson"
:options="cmOptions"
/>
-
+
{{ cellValue }}
No cell selected to view