From eeeba6e7f1fbbbb46921c977cc98a5808db3cdff Mon Sep 17 00:00:00 2001
From: Tobias Merki <103021062+neotob@users.noreply.github.com>
Date: Tue, 9 Sep 2025 17:30:23 -1000
Subject: [PATCH 1/6] add option subRowComponent to render subrow

---
 CHANGELOG.md                                  |  4 ++
 src/lib/ReactDataTable/ReactDataTableProps.ts |  5 ++
 src/lib/ReactDataTable/TableRows.tsx          | 62 ++++++++++---------
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f19f66e..cba35ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- option `subRowComponent` to pass a render-function for a subrow
+
 ## [5.11.0] - 2025-06-03
 
 ### Added
diff --git a/src/lib/ReactDataTable/ReactDataTableProps.ts b/src/lib/ReactDataTable/ReactDataTableProps.ts
index bd72658..2a03d9e 100644
--- a/src/lib/ReactDataTable/ReactDataTableProps.ts
+++ b/src/lib/ReactDataTable/ReactDataTableProps.ts
@@ -113,4 +113,9 @@ export interface ReactDataTableProps<TData, TFilter extends FilterModel> {
    * @default true
    */
   showClearSearchButton?: boolean;
+
+  /**
+   * A component to render as a sub-row for a specific row
+   */
+  subRowComponent?: (row: Row<TData>) => React.ReactNode;
 }
diff --git a/src/lib/ReactDataTable/TableRows.tsx b/src/lib/ReactDataTable/TableRows.tsx
index 5531868..e312c71 100644
--- a/src/lib/ReactDataTable/TableRows.tsx
+++ b/src/lib/ReactDataTable/TableRows.tsx
@@ -7,7 +7,7 @@ import { FilterModel } from "../types/TableState";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 
 interface TableRowProps<TData, TFilter extends FilterModel = Record<string, never>>
-  extends Pick<ReactDataTableProps<TData, TFilter>, "onRowClick" | "enableRowClick"> {
+  extends Pick<ReactDataTableProps<TData, TFilter>, "onRowClick" | "enableRowClick" | "subRowComponent"> {
   row: Row<TData>;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
   fullRowSelectable?: boolean;
@@ -27,39 +27,43 @@ const InternalTableRow = <TData, TFilter extends FilterModel = Record<string, ne
     onRowClick,
     enableRowClick,
     hasPinnedColumns,
+    subRowComponent,
   } = props;
   const isRowSelectionEnabled =
     (typeof enableRowSelection === "function" ? enableRowSelection(row) : enableRowSelection) && fullRowSelectable;
   const isRowClickable = typeof enableRowClick === "function" ? enableRowClick(row) : enableRowClick;
   return (
-    <tr
-      key={row.id}
-      ref={setNodeRef}
-      onClick={async () => {
-        if (isRowSelectionEnabled) {
-          row.toggleSelected();
-        } else if (isRowClickable && onRowClick) {
-          await onRowClick(row);
-        } else {
-          // Nothing to execute
-        }
-      }}
-      className={isRowSelectionEnabled || isRowClickable ? "cursor-pointer" : undefined}
-      style={rowStyle}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <td
-          key={cell.id}
-          style={{
-            ...cell.column.columnDef.meta?.cellStyle,
-            ...(hasPinnedColumns ? getCommonPinningStyles(cell.column) : {}),
-          }}
-          className={cell.column.columnDef.meta?.cellClassName}
-        >
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </td>
-      ))}
-    </tr>
+    <>
+      <tr
+        key={row.id}
+        ref={setNodeRef}
+        onClick={async () => {
+          if (isRowSelectionEnabled) {
+            row.toggleSelected();
+          } else if (isRowClickable && onRowClick) {
+            await onRowClick(row);
+          } else {
+            // Nothing to execute
+          }
+        }}
+        className={isRowSelectionEnabled || isRowClickable ? "cursor-pointer" : undefined}
+        style={rowStyle}
+      >
+        {row.getVisibleCells().map((cell) => (
+          <td
+            key={cell.id}
+            style={{
+              ...cell.column.columnDef.meta?.cellStyle,
+              ...(hasPinnedColumns ? getCommonPinningStyles(cell.column) : {}),
+            }}
+            className={cell.column.columnDef.meta?.cellClassName}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </td>
+        ))}
+      </tr>
+      {subRowComponent && row.getIsExpanded() && subRowComponent(row)}
+    </>
   );
 };
 

From 1331be29c7609c80f14a0be0aeaf3ddc13359c48 Mon Sep 17 00:00:00 2001
From: Tobias Merki <103021062+neotob@users.noreply.github.com>
Date: Tue, 9 Sep 2025 17:52:56 -1000
Subject: [PATCH 2/6] fix

---
 src/lib/ReactDataTable/ReactDataTable.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx
index 5344ae2..b1655a2 100644
--- a/src/lib/ReactDataTable/ReactDataTable.tsx
+++ b/src/lib/ReactDataTable/ReactDataTable.tsx
@@ -47,6 +47,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     enableRowClick,
     isStriped = true,
     showClearSearchButton = true,
+    subRowComponent,
   } = props;
 
   const { pagination } = table.getState();
@@ -84,6 +85,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={rowStyle && rowStyle(row.original)}
             fullRowSelectable={fullRowSelectable}
+            subRowComponent={subRowComponent}
           />
         ))}
       </SortableContext>
@@ -100,6 +102,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
             rowStyle={rowStyle && rowStyle(row.original)}
             fullRowSelectable={fullRowSelectable}
             hasPinnedColumns={table.getIsSomeColumnsPinned()}
+            subRowComponent={subRowComponent}
           />
         ))}
       </>

From 14c3b84f2d565920d51be9d59321e06cc5511c84 Mon Sep 17 00:00:00 2001
From: Tobias Merki <103021062+neotob@users.noreply.github.com>
Date: Tue, 9 Sep 2025 17:56:01 -1000
Subject: [PATCH 3/6] fix?

---
 src/lib/ReactDataTable/ReactDataTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx
index b1655a2..4e426df 100644
--- a/src/lib/ReactDataTable/ReactDataTable.tsx
+++ b/src/lib/ReactDataTable/ReactDataTable.tsx
@@ -85,7 +85,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={rowStyle && rowStyle(row.original)}
             fullRowSelectable={fullRowSelectable}
-            subRowComponent={subRowComponent}
+            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
           />
         ))}
       </SortableContext>
@@ -102,7 +102,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
             rowStyle={rowStyle && rowStyle(row.original)}
             fullRowSelectable={fullRowSelectable}
             hasPinnedColumns={table.getIsSomeColumnsPinned()}
-            subRowComponent={subRowComponent}
+            subRowComponent={subRowComponent as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
           />
         ))}
       </>

From 5737bc2395609cecd4a881d9756c5d049eb8fc4a Mon Sep 17 00:00:00 2001
From: Tobias Merki <103021062+neotob@users.noreply.github.com>
Date: Tue, 9 Sep 2025 18:08:10 -1000
Subject: [PATCH 4/6] test

---
 src/lib/ReactDataTable/ReactDataTable.tsx | 6 ++++++
 src/lib/ReactDataTable/TableRows.tsx      | 1 +
 2 files changed, 7 insertions(+)

diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx
index 4e426df..1e54375 100644
--- a/src/lib/ReactDataTable/ReactDataTable.tsx
+++ b/src/lib/ReactDataTable/ReactDataTable.tsx
@@ -66,6 +66,12 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     }
   }`;
 
+  console.log("subRowComponent:", subRowComponent);
+
+  if (subRowComponent && !enableExpanding) {
+    throw new Error("You must enable expanding in the table options in order to use the sub-row feature.");
+  }
+
   const TableBody = <TData,>(props: TableBodyProps<TData>) => {
     const { enableDragAndDrop, table, rowStyle } = props;
 
diff --git a/src/lib/ReactDataTable/TableRows.tsx b/src/lib/ReactDataTable/TableRows.tsx
index e312c71..938d7c7 100644
--- a/src/lib/ReactDataTable/TableRows.tsx
+++ b/src/lib/ReactDataTable/TableRows.tsx
@@ -63,6 +63,7 @@ const InternalTableRow = <TData, TFilter extends FilterModel = Record<string, ne
         ))}
       </tr>
       {subRowComponent && row.getIsExpanded() && subRowComponent(row)}
+      <div>TESTEST</div>
     </>
   );
 };

From aaff09068100e174a8bfd5f1616ada93951e11fd Mon Sep 17 00:00:00 2001
From: Tobias Merki <103021062+neotob@users.noreply.github.com>
Date: Tue, 9 Sep 2025 21:22:44 -1000
Subject: [PATCH 5/6] fix

---
 src/lib/ReactDataTable/ReactDataTable.tsx | 6 ------
 src/lib/ReactDataTable/TableRows.tsx      | 1 -
 2 files changed, 7 deletions(-)

diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx
index 1e54375..4e426df 100644
--- a/src/lib/ReactDataTable/ReactDataTable.tsx
+++ b/src/lib/ReactDataTable/ReactDataTable.tsx
@@ -66,12 +66,6 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     }
   }`;
 
-  console.log("subRowComponent:", subRowComponent);
-
-  if (subRowComponent && !enableExpanding) {
-    throw new Error("You must enable expanding in the table options in order to use the sub-row feature.");
-  }
-
   const TableBody = <TData,>(props: TableBodyProps<TData>) => {
     const { enableDragAndDrop, table, rowStyle } = props;
 
diff --git a/src/lib/ReactDataTable/TableRows.tsx b/src/lib/ReactDataTable/TableRows.tsx
index 938d7c7..e312c71 100644
--- a/src/lib/ReactDataTable/TableRows.tsx
+++ b/src/lib/ReactDataTable/TableRows.tsx
@@ -63,7 +63,6 @@ const InternalTableRow = <TData, TFilter extends FilterModel = Record<string, ne
         ))}
       </tr>
       {subRowComponent && row.getIsExpanded() && subRowComponent(row)}
-      <div>TESTEST</div>
     </>
   );
 };

From e3107234a2092af0ca180f7196918320bd6dc1ec Mon Sep 17 00:00:00 2001
From: Tobias Merki <103021062+neotob@users.noreply.github.com>
Date: Fri, 12 Sep 2025 01:37:44 -1000
Subject: [PATCH 6/6] add comment

---
 CHANGELOG.md                                  | 14 +++++++++++++-
 src/lib/ReactDataTable/ReactDataTableProps.ts |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cba35ba..7c14324 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- option `subRowComponent` to pass a render-function for a subrow
+- option `subRowComponent` to pass a render-function for a subrow. This will be rendered additionally to the subrows and if not wanted, make sure the subrows are passed as empty arrayd [], following an example:
+
+```tsx
+const { table } = useReactDataTable<T>({
+  data,
+  columns,
+  reactTableOptions: {
+    enableExpanding: true,
+    getSubRows: (_) => [],
+    getRowCanExpand: (row) => row.shouldRenderSubRow,
+  },
+});
+```
 
 ## [5.11.0] - 2025-06-03
 
diff --git a/src/lib/ReactDataTable/ReactDataTableProps.ts b/src/lib/ReactDataTable/ReactDataTableProps.ts
index 2a03d9e..431248d 100644
--- a/src/lib/ReactDataTable/ReactDataTableProps.ts
+++ b/src/lib/ReactDataTable/ReactDataTableProps.ts
@@ -115,7 +115,7 @@ export interface ReactDataTableProps<TData, TFilter extends FilterModel> {
   showClearSearchButton?: boolean;
 
   /**
-   * A component to render as a sub-row for a specific row
+   * A component to render as a sub-row for a specific row, this will be rendered additionally to the subrows.
    */
   subRowComponent?: (row: Row<TData>) => React.ReactNode;
 }