diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js
index 5ee28d1c45..4f63e7ebf5 100644
--- a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js
+++ b/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js
@@ -13,7 +13,12 @@ import {
getStoryTitle,
prepareStory,
} from '../../../../global/js/utils/story-helper';
-import { Datagrid, useDatagrid, useNestedRows } from '../../index';
+import {
+ Datagrid,
+ useDatagrid,
+ useNestedRows,
+ useSelectRows,
+} from '../../index';
import styles from '../../_storybook-styles.scss';
import { DatagridActions } from '../../utils/DatagridActions';
import { makeData } from '../../utils/makeData';
@@ -270,6 +275,48 @@ export const NestedRowsUsageStory = prepareStory(BasicTemplateWrapper, {
},
});
+const SelectableNestedRows = ({ ...args }) => {
+ const columns = React.useMemo(() => defaultHeader, []);
+ const [data] = useState(makeData(10, 5, 2, 2));
+ const datagridState = useDatagrid(
+ {
+ columns,
+ data,
+ DatagridActions,
+ ...args.defaultGridProps,
+ },
+ useNestedRows,
+ useSelectRows
+ );
+
+ return ;
+};
+
+const SelectableNestedRowTemplateWrapper = ({ ...args }) => {
+ return ;
+};
+
+const selectableNestedRowsStoryName = 'With selectable nested rows';
+export const SelectableNestedRowsUsageStory = prepareStory(
+ SelectableNestedRowTemplateWrapper,
+ {
+ storyName: selectableNestedRowsStoryName,
+ argTypes: {
+ gridTitle: ARG_TYPES.gridTitle,
+ gridDescription: ARG_TYPES.gridDescription,
+ useDenseHeader: ARG_TYPES.useDenseHeader,
+ rowSize: ARG_TYPES.rowSize,
+ rowSizes: ARG_TYPES.rowSizes,
+ onRowSizeChange: ARG_TYPES.onRowSizeChange,
+ expanderButtonTitleExpanded: 'Collapse row',
+ expanderButtonTitleCollapsed: 'Expand row',
+ },
+ args: {
+ ...nestedRowsControlProps,
+ },
+ }
+);
+
const nestedRowsInitialStateStoryName = 'With initially expanded nested rows';
export const NestedRowsInitialUsageStory = prepareStory(BasicTemplateWrapper, {
storyName: nestedRowsInitialStateStoryName,
diff --git a/packages/ibm-products/src/components/Datagrid/useSelectRows.js b/packages/ibm-products/src/components/Datagrid/useSelectRows.js
index 7e52eb5e47..cbc54c6c99 100644
--- a/packages/ibm-products/src/components/Datagrid/useSelectRows.js
+++ b/packages/ibm-products/src/components/Datagrid/useSelectRows.js
@@ -123,7 +123,7 @@ const SelectRow = (datagridState) => {
const cellProps = cell.getCellProps();
const isFirstColumnStickyLeft =
columns[0]?.sticky === 'left' && withStickyColumn;
- const rowId = `${tableId}-${row.index}`;
+ const rowId = `${tableId}-${row.id}-${row.index}`;
return (