From 233d485ad0d79ae033ff5fb88f4192ceabec5bc3 Mon Sep 17 00:00:00 2001
From: Qi Shu <shuqi7sq@gmail.com>
Date: Sat, 13 Apr 2019 12:05:14 -0700
Subject: [PATCH] Display null in SQL table cell (#7463)

* Display null if cell in table is empty

* Add null

* re-indent
---
 web-console/src/views/sql-view.scss |  4 ++++
 web-console/src/views/sql-view.tsx  | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/web-console/src/views/sql-view.scss b/web-console/src/views/sql-view.scss
index 2cc88763bce..1cd7ecc0c47 100644
--- a/web-console/src/views/sql-view.scss
+++ b/web-console/src/views/sql-view.scss
@@ -36,6 +36,10 @@
 
   .ReactTable {
     flex: 1;
+
+    .null-table-cell {
+      font-style: italic;
+    }
   }
 }
 
diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index 171306668e9..9ae57d3bcf4 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -195,7 +195,19 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
       loading={loading}
       noDataText={!loading && result && !result.rows.length ? 'No results' : (error || '')}
       sortable={false}
-      columns={(result ? result.header : []).map((h: any, i) => ({ Header: h, accessor: String(i) }))}
+      columns={
+        (result ? result.header : []).map((h: any, i) => {
+          return {
+            Header: h,
+            accessor: String(i),
+            Cell: row => {
+              const value = row.value;
+              if (value === '' || value === null) return <span className="null-table-cell">null</span>;
+              return value;
+            }
+          };
+        })
+      }
       defaultPageSize={10}
       className="-striped -highlight"
     />;