diff --git a/CHANGELOG.md b/CHANGELOG.md index f19f66e..7c14324 100644 --- a/CHANGELOG.md +++ b/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({ + data, + columns, + reactTableOptions: { + enableExpanding: true, + getSubRows: (_) => [], + getRowCanExpand: (row) => row.shouldRenderSubRow, + }, +}); +``` + ## [5.11.0] - 2025-06-03 ### Added diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx index 5344ae2..4e426df 100644 --- a/src/lib/ReactDataTable/ReactDataTable.tsx +++ b/src/lib/ReactDataTable/ReactDataTable.tsx @@ -47,6 +47,7 @@ const ReactDataTable = ) => boolean)} rowStyle={rowStyle && rowStyle(row.original)} fullRowSelectable={fullRowSelectable} + subRowComponent={subRowComponent as ReactDataTableProps["subRowComponent"]} /> ))} @@ -100,6 +102,7 @@ const ReactDataTable = ["subRowComponent"]} /> ))} diff --git a/src/lib/ReactDataTable/ReactDataTableProps.ts b/src/lib/ReactDataTable/ReactDataTableProps.ts index bd72658..431248d 100644 --- a/src/lib/ReactDataTable/ReactDataTableProps.ts +++ b/src/lib/ReactDataTable/ReactDataTableProps.ts @@ -113,4 +113,9 @@ export interface ReactDataTableProps { * @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) => 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> - extends Pick, "onRowClick" | "enableRowClick"> { + extends Pick, "onRowClick" | "enableRowClick" | "subRowComponent"> { row: Row; enableRowSelection?: boolean | ((row: Row) => boolean); fullRowSelectable?: boolean; @@ -27,39 +27,43 @@ const InternalTableRow = { - 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) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - + <> + { + 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) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + {subRowComponent && row.getIsExpanded() && subRowComponent(row)} + ); };