diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
index 3a6eed6ff9..8ec6d7ce97 100644
--- a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
+++ b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
@@ -39,6 +39,7 @@ const HierarchyGridRowTypeString = `GridRow & {
 const ExpandableGridRowTypeString = `GridRow & {
   expandedContent?: React.ReactNode;
   expandedContentHeight?: number;
+  contentIsExpanded?: boolean;
 }`;
 
 const actionsType = `{
diff --git a/packages/lib/src/data-grid/DataGrid.stories.tsx b/packages/lib/src/data-grid/DataGrid.stories.tsx
index 5c3f1c41c6..71bac5b988 100644
--- a/packages/lib/src/data-grid/DataGrid.stories.tsx
+++ b/packages/lib/src/data-grid/DataGrid.stories.tsx
@@ -153,6 +153,7 @@ const expandableRows = [
     issueType: "Bug",
     expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
     expandedContentHeight: 470,
+    contentIsExpanded: true,
     actions: <DxcDataGrid.ActionsCell actions={actions} />,
   },
   {
@@ -1142,4 +1143,4 @@ export const DataGridSortedExpanded: Story = {
 
 export const UnknownUniqueId: Story = {
   render: DataGridUnknownUniqueRowId,
-};
\ No newline at end of file
+};
diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx
index 9fe2cc1e27..da98402e48 100644
--- a/packages/lib/src/data-grid/DataGrid.tsx
+++ b/packages/lib/src/data-grid/DataGrid.tsx
@@ -23,6 +23,149 @@ import DxcPaginator from "../paginator/Paginator";
 import { DxcActionsCell } from "../table/Table";
 import HalstackContext from "../HalstackContext";
 
+const ActionContainer = styled.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  width: 100%;
+`;
+
+const HierarchyContainer = styled.div<{
+  level: number;
+}>`
+  padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
+  button {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0px;
+    border: 0px;
+    width: 100%;
+    height: ${(props) => props.theme.dataRowHeight}px;
+    background: transparent;
+    text-align: left;
+    font-size: ${(props) => props.theme.dataFontSize};
+    font-family: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+`;
+
+const DataGridContainer = styled.div<{
+  paginatorRendered: boolean;
+}>`
+  width: 100%;
+  height: ${(props) => (props.paginatorRendered ? `calc(100% - 50px)` : `100%`)};
+  .rdg {
+    border-radius: 4px;
+    height: 100%;
+    border: 0px;
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${(props) => props.theme.scrollBarThumbColor};
+      border-radius: 6px;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: ${(props) => props.theme.scrollBarTrackColor};
+      border-radius: 6px;
+    }
+  }
+  .rdg-cell:has(> #action) {
+    padding: 0px;
+  }
+  .rdg-cell {
+    display: grid;
+    align-items: center;
+    width: 100%;
+    padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft};
+    font-family: ${(props) => props.theme.dataFontFamily};
+    font-size: ${(props) => props.theme.dataFontSize};
+    font-style: ${(props) => props.theme.dataFontStyle};
+    font-weight: ${(props) => props.theme.dataFontWeight};
+    color: ${(props) => props.theme.dataFontColor};
+    text-transform: ${(props) => props.theme.dataFontTextTransform};
+    line-height: ${(props) => props.theme.dataTextLineHeight};
+    border-bottom: ${(props) =>
+      `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
+    border-right: ${(props) =>
+      `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
+    background-color: ${(props) => props.theme.dataBackgroundColor};
+    outline-color: ${(props) => props.theme.focusColor} !important;
+    .rdg-text-editor:focus {
+      border-color: transparent;
+    }
+  }
+  .rdg-header-row {
+    border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
+    border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
+    .rdg-cell {
+      font-family: ${(props) => props.theme.headerFontFamily};
+      font-size: ${(props) => props.theme.headerFontSize};
+      font-style: ${(props) => props.theme.headerFontStyle};
+      font-weight: ${(props) => props.theme.headerFontWeight};
+      color: ${(props) => props.theme.headerFontColor};
+      text-transform: ${(props) => props.theme.headerFontTextTransform};
+      padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft};
+      line-height: ${(props) => props.theme.headerTextLineHeight};
+      background-color: ${(props) => props.theme.headerBackgroundColor};
+      .sortIconContainer {
+        margin-left: 0.5rem;
+        display: flex;
+        height: 100%;
+        align-items: center;
+      }
+    }
+  }
+  .rdg-row {
+    .rdg-cell:last-child {
+      border-right: 0px;
+    }
+  }
+  .rdg-summary-row {
+    background-color: #fafafa;
+    .rdg-cell {
+      border: 0px;
+      font-weight: 600;
+    }
+  }
+  .ellipsis-cell {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .header-align-left {
+    text-align: left;
+  }
+  .header-align-center {
+    text-align: center;
+  }
+  .header-align-right {
+    text-align: right;
+  }
+`;
+
 const DxcDataGrid = ({
   columns,
   rows,
@@ -156,7 +299,24 @@ const DxcDataGrid = ({
   }, [columnsToRender.length]);
 
   useEffect(() => {
-    setRowsToRender(rows);
+    const finalRows = [...rows];
+    if (expandable) {
+      rows.forEach((row, index) => {
+        if (
+          row.contentIsExpanded &&
+          !rows.some((row) => row[uniqueRowId] === `${rowKeyGetter(row, uniqueRowId)}_expanded`)
+        ) {
+          addRow(finalRows, index + 1, {
+            isExpandedChildContent: row.contentIsExpanded,
+            [uniqueRowId]: `${rowKeyGetter(row, uniqueRowId)}_expanded`,
+            expandedChildContent: row.expandedContent,
+            triggerRowKey: rowKeyGetter(row, uniqueRowId),
+            expandedContentHeight: row.expandedContentHeight,
+          });
+        }
+      });
+    }
+    setRowsToRender(finalRows);
   }, [rows]);
 
   const reorderedColumns = useMemo(
@@ -280,149 +440,6 @@ const DxcDataGrid = ({
   );
 };
 
-const ActionContainer = styled.div`
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  width: 100%;
-`;
-
-const HierarchyContainer = styled.div<{
-  level: number;
-}>`
-  padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
-  button {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0px;
-    border: 0px;
-    width: 100%;
-    height: ${(props) => props.theme.dataRowHeight}px;
-    background: transparent;
-    text-align: left;
-    font-size: ${(props) => props.theme.dataFontSize};
-    font-family: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-`;
-
-const DataGridContainer = styled.div<{
-  paginatorRendered: boolean;
-}>`
-  width: 100%;
-  height: ${(props) => (props.paginatorRendered ? `calc(100% - 50px)` : `100%`)};
-  .rdg {
-    border-radius: 4px;
-    height: 100%;
-    border: 0px;
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: ${(props) => props.theme.scrollBarThumbColor};
-      border-radius: 6px;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: ${(props) => props.theme.scrollBarTrackColor};
-      border-radius: 6px;
-    }
-  }
-  .rdg-cell:has(> #action) {
-    padding: 0px;
-  }
-  .rdg-cell {
-    display: grid;
-    align-items: center;
-    width: 100%;
-    padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft};
-    font-family: ${(props) => props.theme.dataFontFamily};
-    font-size: ${(props) => props.theme.dataFontSize};
-    font-style: ${(props) => props.theme.dataFontStyle};
-    font-weight: ${(props) => props.theme.dataFontWeight};
-    color: ${(props) => props.theme.dataFontColor};
-    text-transform: ${(props) => props.theme.dataFontTextTransform};
-    line-height: ${(props) => props.theme.dataTextLineHeight};
-    border-bottom: ${(props) =>
-      `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
-    border-right: ${(props) =>
-      `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
-    background-color: ${(props) => props.theme.dataBackgroundColor};
-    outline-color: ${(props) => props.theme.focusColor} !important;
-    .rdg-text-editor:focus {
-      border-color: transparent;
-    }
-  }
-  .rdg-header-row {
-    border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
-    border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
-    .rdg-cell {
-      font-family: ${(props) => props.theme.headerFontFamily};
-      font-size: ${(props) => props.theme.headerFontSize};
-      font-style: ${(props) => props.theme.headerFontStyle};
-      font-weight: ${(props) => props.theme.headerFontWeight};
-      color: ${(props) => props.theme.headerFontColor};
-      text-transform: ${(props) => props.theme.headerFontTextTransform};
-      padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft};
-      line-height: ${(props) => props.theme.headerTextLineHeight};
-      background-color: ${(props) => props.theme.headerBackgroundColor};
-      .sortIconContainer {
-        margin-left: 0.5rem;
-        display: flex;
-        height: 100%;
-        align-items: center;
-      }
-    }
-  }
-  .rdg-row {
-    .rdg-cell:last-child {
-      border-right: 0px;
-    }
-  }
-  .rdg-summary-row {
-    background-color: #fafafa;
-    .rdg-cell {
-      border: 0px;
-      font-weight: 600;
-    }
-  }
-  .ellipsis-cell {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-  .align-left {
-    text-align: left;
-    justify-content: flex-start;
-  }
-  .align-center {
-    text-align: center;
-    justify-content: center;
-  }
-  .align-right {
-    text-align: right;
-    justify-content: flex-end;
-  }
-  .header-align-left {
-    text-align: left;
-  }
-  .header-align-center {
-    text-align: center;
-  }
-  .header-align-right {
-    text-align: right;
-  }
-`;
-
 DxcDataGrid.ActionsCell = DxcActionsCell;
 
 export default DxcDataGrid;
diff --git a/packages/lib/src/data-grid/types.ts b/packages/lib/src/data-grid/types.ts
index 6376f01ec0..5b8dd46131 100644
--- a/packages/lib/src/data-grid/types.ts
+++ b/packages/lib/src/data-grid/types.ts
@@ -54,6 +54,7 @@ export type HierarchyGridRow = GridRow & {
 export type ExpandableGridRow = GridRow & {
   expandedContent?: ReactNode;
   expandedContentHeight?: number;
+  contentIsExpanded?: boolean;
 };
 
 export type ExpandableRows = {