diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
index fa6f477ed9..f6d7cfc2c3 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
@@ -29,7 +29,7 @@
       on:click={() => onSelect(data)}
     >
       <span class="spectrum-Menu-itemLabel">
-        {data.datasource?.name ? `${data.datasource.name} - ` : ""}{data.label}
+        {data.datasourceName ? `${data.datasourceName} - ` : ""}{data.label}
       </span>
       <svg
         class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
diff --git a/packages/builder/src/helpers/data/format.js b/packages/builder/src/helpers/data/format.js
index 51b0f12566..5b9714008b 100644
--- a/packages/builder/src/helpers/data/format.js
+++ b/packages/builder/src/helpers/data/format.js
@@ -1,12 +1,14 @@
 export const datasourceSelect = {
-  table: (table, datasources) => ({
-    label: table.name,
-    tableId: table._id,
-    type: "table",
-    datasource: datasources.find(
-      datasource => datasource._id === table.sourceId || table.datasourceId
-    ),
-  }),
+  table: (table, datasources) => {
+    const sourceId = table.sourceId || table.datasourceId
+    const datasource = datasources.find(ds => ds._id === sourceId)
+    return {
+      label: table.name,
+      tableId: table._id,
+      type: "table",
+      datasourceName: datasource?.name,
+    }
+  },
   viewV2: view => ({
     ...view,
     label: view.name,