diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
index 4478edab0dba5..de45322d04987 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
@@ -26,6 +26,23 @@ function getItemDescription(value: any) {
   return value.toString();
 }
 
+/**
+ * Creates a deterministic number based hash out of a string.
+ */
+export function stringHash(str: string): number {
+  let hash = 0;
+  let chr = 0;
+  if (str.length === 0) {
+    return hash;
+  }
+  for (let i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr; // eslint-disable-line no-bitwise
+    hash |= 0; // eslint-disable-line no-bitwise
+  }
+  return hash < 0 ? hash * -2 : hash;
+}
+
 interface Item {
   title: string;
   description: any;
@@ -162,9 +179,11 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
     position: 'left',
   };
 
+  const tabId = stringHash(item.id);
+
   const tabs = [
     {
-      id: `transform-details-tab-${item.id}`,
+      id: `transform-details-tab-${tabId}`,
       'data-test-subj': 'transformDetailsTab',
       name: i18n.translate(
         'xpack.transform.transformList.transformDetails.tabs.transformDetailsLabel',
@@ -175,7 +194,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       content: <ExpandedRowDetailsPane sections={[general, state, checkpointing]} />,
     },
     {
-      id: `transform-stats-tab-${item.id}`,
+      id: `transform-stats-tab-${tabId}`,
       'data-test-subj': 'transformStatsTab',
       name: i18n.translate(
         'xpack.transform.transformList.transformDetails.tabs.transformStatsLabel',
@@ -186,13 +205,13 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       content: <ExpandedRowDetailsPane sections={[stats]} />,
     },
     {
-      id: `transform-json-tab-${item.id}`,
+      id: `transform-json-tab-${tabId}`,
       'data-test-subj': 'transformJsonTab',
       name: 'JSON',
       content: <ExpandedRowJsonPane json={item.config} />,
     },
     {
-      id: `transform-messages-tab-${item.id}`,
+      id: `transform-messages-tab-${tabId}`,
       'data-test-subj': 'transformMessagesTab',
       name: i18n.translate(
         'xpack.transform.transformList.transformDetails.tabs.transformMessagesLabel',
@@ -203,7 +222,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       content: <ExpandedRowMessagesPane transformId={item.id} />,
     },
     {
-      id: `transform-preview-tab-${item.id}`,
+      id: `transform-preview-tab-${tabId}`,
       'data-test-subj': 'transformPreviewTab',
       name: i18n.translate(
         'xpack.transform.transformList.transformDetails.tabs.transformPreviewLabel',