add option subRowComponent to render subrow (#80)

Author: neotob

CHANGELOG.md

@@ -7,6 +7,22 @@ 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. 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
 
 ### Added

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 as ReactDataTableProps<TData, TFilter>["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 as ReactDataTableProps<TData, TFilter>["subRowComponent"]}
           />
         ))}
       </>

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, this will be rendered additionally to the subrows.
+   */
+  subRowComponent?: (row: Row<TData>) => React.ReactNode;
 }

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)}
+    </>
   );
 };