diff --git a/pinot-controller/src/main/resources/app/components/Table.tsx b/pinot-controller/src/main/resources/app/components/Table.tsx
index 09226e28d58..69d67cdcb40 100644
--- a/pinot-controller/src/main/resources/app/components/Table.tsx
+++ b/pinot-controller/src/main/resources/app/components/Table.tsx
@@ -326,7 +326,16 @@ export default function CustomizedTables({
     } else {
       const filteredRescords = initialData.records.filter((record) => {
         const searchFound = record.find(
-          (cell) => cell.toString().toLowerCase().indexOf(str) > -1
+          (cell) => {
+            let strigifiedData;
+            try {
+             strigifiedData = JSON.stringify(get(cell, 'value') || cell)
+            } catch(e) {
+             strigifiedData =  cell.toString()
+            }
+
+           return strigifiedData.toLowerCase().indexOf(str) > -1
+         }
         );
         if (searchFound) {
           return true;
@@ -462,8 +471,17 @@ export default function CustomizedTables({
               {styleCell(cellData.value)}
             </Tooltip>
         );
-      } else {
+      } else if(has(cellData, 'value') && cellData.value) {
         return styleCell(cellData.value);
+      } else {
+          try {
+            const stringifiedJSON = JSON.stringify(cellData)
+            return stringifiedJSON
+          } catch(e) {
+            // If the data is corrupted and not recognizable by JSON.stringify, fallback to below error message instead
+            // of crashing the whole page for the user.
+            return '<DATA COULD NOT BE PARSED TO DISPLAY>'
+          }
       }
     }
     return styleCell(cellData.toString());
diff --git a/pinot-controller/src/main/resources/app/interfaces/types.d.ts b/pinot-controller/src/main/resources/app/interfaces/types.d.ts
index 084f1395180..46c89ab07d3 100644
--- a/pinot-controller/src/main/resources/app/interfaces/types.d.ts
+++ b/pinot-controller/src/main/resources/app/interfaces/types.d.ts
@@ -28,8 +28,10 @@ declare module 'Models' {
     customRenderer: JSX.Element
   }
 
+  export type MapRecord = Record<string, unknown>
+
   export type TableData = {
-    records: Array<Array<string | number | boolean | SegmentStatus | LoadingRecord>>;
+    records: Array<Array<string | number | boolean | MapRecord | SegmentStatus | LoadingRecord>>;
     columns: Array<string>;
     error?: string;
     isLoading? : boolean
@@ -130,6 +132,7 @@ declare module 'Models' {
     dimensionFieldSpecs: Array<schema>;
     metricFieldSpecs?: Array<schema>;
     dateTimeFieldSpecs?: Array<schema>;
+    complexFieldSpecs?: Array<schema>,
     error?: string;
     code?: number;
   };
@@ -145,6 +148,7 @@ declare module 'Models' {
     numDimensionFields: number
     numDateTimeFields: number
     numMetricFields: number
+    numComplexFields: number
   };
 
   export type SQLResult = {
diff --git a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
index d3af96ff697..f5c60f1655d 100644
--- a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
+++ b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
@@ -19,7 +19,7 @@
 
 import jwtDecode from "jwt-decode";
 import { get, map, each, isEqual, isArray, keys, union } from 'lodash';
-import { DataTable, SegmentMetadata, SqlException, SQLResult, TableSize } from 'Models';
+import { DataTable, SchemaInfo, SegmentMetadata, SqlException, SQLResult, TableSize } from 'Models';
 import moment from 'moment';
 import {
   getTenants,
@@ -384,14 +384,18 @@ const allSchemaDetailsColumnHeader = ["Schema Name", "Dimension Columns", "Date-
 
 const getAllSchemaDetails = async (schemaList) => {
   let schemaDetails:Array<any> = [];
-  const results = await getSchemaDataInfo();
+  const results:SchemaInfo[] = await getSchemaDataInfo();
   schemaDetails = results.map((obj)=>{
     let schemaObj = [];
-    schemaObj.push(obj.schemaName);
-    schemaObj.push(obj.numDimensionFields);
-    schemaObj.push(obj.numDateTimeFields);
-    schemaObj.push(obj.numMetricFields);
-    schemaObj.push(schemaObj[1] + schemaObj[2] + schemaObj[3]);
+    const { numDimensionFields, numDateTimeFields, numComplexFields, numMetricFields, schemaName} = obj;
+    schemaObj.push(schemaName);
+    schemaObj.push(numDimensionFields);
+    schemaObj.push(numDateTimeFields);
+    schemaObj.push(numMetricFields);
+    schemaObj.push(numComplexFields)
+    const totalColumns = numDimensionFields + numMetricFields + numDateTimeFields + numComplexFields;
+    schemaObj.push(totalColumns);
+
     return schemaObj;
   })
   return {
diff --git a/pinot-controller/src/main/resources/app/utils/Utils.tsx b/pinot-controller/src/main/resources/app/utils/Utils.tsx
index c0983230e1a..df88d50c454 100644
--- a/pinot-controller/src/main/resources/app/utils/Utils.tsx
+++ b/pinot-controller/src/main/resources/app/utils/Utils.tsx
@@ -24,6 +24,7 @@ import { map, isEqual, findIndex, findLast } from 'lodash';
 import app_state from '../app_state';
 import {
   DISPLAY_SEGMENT_STATUS, InstanceType,
+  MapRecord,
   PinotTableDetails,
   SEGMENT_STATUS,
   SegmentStatus,
@@ -64,7 +65,7 @@ const pinotTableDetailsFormat = (tableDetails: PinotTableDetails): Array<string
   ];
 }
 
-const pinotTableDetailsFromArray = (tableDetails: Array<string | number | boolean | SegmentStatus | { customRenderer: JSX.Element }>): PinotTableDetails => {
+const pinotTableDetailsFromArray = (tableDetails: Array<string | number | boolean | MapRecord | SegmentStatus | { customRenderer: JSX.Element }>): PinotTableDetails => {
   return {
     name: tableDetails[0] as string,
     estimated_size: tableDetails[1] as string,
@@ -300,6 +301,7 @@ const syncTableSchemaData = (data, showFieldType) => {
   const dimensionFields = data.dimensionFieldSpecs || [];
   const metricFields = data.metricFieldSpecs || [];
   const dateTimeField = data.dateTimeFieldSpecs || [];
+  const complexFields = data.complexFieldSpecs || [];
 
   dimensionFields.map((field) => {
     field.fieldType = 'Dimension';
@@ -312,7 +314,12 @@ const syncTableSchemaData = (data, showFieldType) => {
   dateTimeField.map((field) => {
     field.fieldType = 'Date-Time';
   });
-  const columnList = [...dimensionFields, ...metricFields, ...dateTimeField];
+
+  complexFields.map((field) => {
+    field.fieldType = 'Complex'
+  })
+
+  const columnList = [...dimensionFields, ...metricFields, ...dateTimeField, ...complexFields];
   if (showFieldType) {
     return {
       columns: ['Column', 'Type', 'Field Type', 'Multi Value'],