From 415c2d23e1d6b0bd92db28e018630112b685005d Mon Sep 17 00:00:00 2001
From: Ratheesh Rajan <Ratheesh.Rajan@ibm.com>
Date: Mon, 19 Feb 2024 20:08:01 +0530
Subject: [PATCH] fix(DataGrid): add support for selectrow and nestedrow

---
 .../NestedRows/NestedRows.stories.js          | 49 ++++++++++++++++++-
 .../src/components/Datagrid/useSelectRows.js  |  2 +-
 2 files changed, 49 insertions(+), 2 deletions(-)

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 <Datagrid datagridState={{ ...datagridState }} />;
+};
+
+const SelectableNestedRowTemplateWrapper = ({ ...args }) => {
+  return <SelectableNestedRows defaultGridProps={{ ...args }} />;
+};
+
+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 (
     <TableSelectRow
       {...cellProps}