fix: table multiselect with pagination bug

.changeset/mighty-chicken-train.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: table multiselect with pagination bug

packages/blade/src/components/Table/Table.web.tsx

@@ -244,10 +244,11 @@ const _Table = <Item,>({
 
   // Selection Logic
   const onSelectChange: MiddlewareFunction = (action, state): void => {
-    const selectedIDs: Identifier[] = state.id ? [state.id] : state.ids ?? [];
-    setSelectedRows(selectedIDs);
+    const selectedIds: Identifier[] = state.id ? [state.id] : state.ids ?? [];
+    setSelectedRows(selectedIds);
     onSelectionChange?.({
-      values: data.nodes.filter((node) => selectedIDs.includes(node.id)),
+      selectedIds,
+      values: data.nodes.filter((node) => selectedIds.includes(node.id)),
     });
   };
 

packages/blade/src/components/Table/__tests__/Table.web.test.tsx

@@ -736,10 +736,10 @@ describe('<Table />', () => {
 
     const firstSelectableRow = getByText('rzp01').closest('td');
     if (firstSelectableRow) await user.click(firstSelectableRow);
-    expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]] });
+    expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]], selectedIds: ['1'] });
     const secondSelectableRow = getByText('rzp02').closest('td');
     if (secondSelectableRow) await user.click(secondSelectableRow);
-    expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[1]] });
+    expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[1]], selectedIds: ['2'] });
   });
 
   it('should render table with multi select', async () => {
@@ -787,14 +787,17 @@ describe('<Table />', () => {
     expect(getAllByRole('checkbox')).toHaveLength(6);
     const firstSelectableRow = getByText('rzp01').closest('td');
     if (firstSelectableRow) await user.click(firstSelectableRow);
-    expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]] });
+    expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0]], selectedIds: ['1'] });
     const secondSelectableRow = getByText('rzp02').closest('td');
     if (secondSelectableRow) await user.click(secondSelectableRow);
-    expect(onSelectionChange).toHaveBeenCalledWith({ values: [nodes[0], nodes[1]] });
+    expect(onSelectionChange).toHaveBeenCalledWith({
+      values: [nodes[0], nodes[1]],
+      selectedIds: ['1', '2'],
+    });
     expect(getByText('2 Items Selected')).toBeInTheDocument();
     const deselectButton = getByText('Deselect');
     await user.click(deselectButton);
-    expect(onSelectionChange).toHaveBeenCalledWith({ values: [] });
+    expect(onSelectionChange).toHaveBeenCalledWith({ values: [], selectedIds: [] });
   });
 
   it('should render table with client side pagination', async () => {

packages/blade/src/components/Table/docs/stories.ts

@@ -594,7 +594,9 @@ function App(): React.ReactElement {
       <Table
         data={data}
         selectionType="multiple"
-        onSelectionChange={({ values }) => setSelectedItems(values)}
+        onSelectionChange={({ selectedIds }) => {
+          setSelectedItems(data.nodes.filter((node) => selectedIds.includes(node.id)));
+        }}
         toolbar={
           <TableToolbar
             title="Showing Recent Transactions"

packages/blade/src/components/Table/types.ts

@@ -82,7 +82,25 @@ type TableProps<Item> = {
    * The onSelectionChange prop is a function that is called when the selection changes.
    * The function is called with an object that has a values property that is an array of the selected rows.
    **/
-  onSelectionChange?: ({ values }: { values: TableNode<Item>[] }) => void;
+  onSelectionChange?: ({
+    values,
+    selectedIds,
+  }: {
+    /**
+     * Note: on server side paginated data, this prop will only contain the selected rows on the current page.
+     *
+     * Thus, it's recommended to use `selectedIds` for more consistent state management across server/client paginated data.
+     *
+     * *Deprecated:* Use `selectedIds` instead.
+     *
+     * @deprecated
+     */
+    values: TableNode<Item>[];
+    /**
+     * An array of selected row ids.
+     */
+    selectedIds: Identifier[];
+  }) => void;
   /**
    * The isHeaderSticky prop determines whether the table header is sticky or not.
    * The default value is `false`.