fix(datatables): "Select all" should select only elements of the current page (#376)

app/react/components/datatables/Datatable.test.tsx

@@ -155,6 +155,50 @@ describe('Datatable', () => {
 
     expect(screen.getByText('No data available')).toBeInTheDocument();
   });
+
+  it('selects/deselects only page rows when select all is clicked', () => {
+    render(
+      <Datatable
+        dataset={mockData}
+        columns={mockColumns}
+        settingsManager={{ ...mockSettingsManager, pageSize: 2 }}
+        data-cy="test-table"
+      />
+    );
+
+    const selectAllCheckbox = screen.getByLabelText('Select all rows');
+    fireEvent.click(selectAllCheckbox);
+
+    // Check if all rows on the page are selected
+    expect(screen.getByText('2 item(s) selected')).toBeInTheDocument();
+
+    // Deselect
+    fireEvent.click(selectAllCheckbox);
+    const checkboxes: HTMLInputElement[] = screen.queryAllByRole('checkbox');
+    expect(checkboxes.filter((checkbox) => checkbox.checked).length).toBe(0);
+  });
+
+  it('selects/deselects all rows including other pages when select all is clicked with shift key', () => {
+    render(
+      <Datatable
+        dataset={mockData}
+        columns={mockColumns}
+        settingsManager={{ ...mockSettingsManager, pageSize: 2 }}
+        data-cy="test-table"
+      />
+    );
+
+    const selectAllCheckbox = screen.getByLabelText('Select all rows');
+    fireEvent.click(selectAllCheckbox, { shiftKey: true });
+
+    // Check if all rows on the page are selected
+    expect(screen.getByText('3 item(s) selected')).toBeInTheDocument();
+
+    // Deselect
+    fireEvent.click(selectAllCheckbox, { shiftKey: true });
+    const checkboxes: HTMLInputElement[] = screen.queryAllByRole('checkbox');
+    expect(checkboxes.filter((checkbox) => checkbox.checked).length).toBe(0);
+  });
 });
 
 // Test the defaultGlobalFilterFn used in searches

app/react/components/datatables/select-column.tsx

@@ -11,15 +11,22 @@ export function createSelectColumn<T>(dataCy: string): ColumnDef<T> {
       <Checkbox
         id="select-all"
         data-cy={`select-all-checkbox-${dataCy}`}
-        checked={table.getIsAllRowsSelected()}
+        checked={table.getIsAllPageRowsSelected()}
         indeterminate={table.getIsSomeRowsSelected()}
-        onChange={table.getToggleAllRowsSelectedHandler()}
+        onChange={(e) => {
+          // Select all rows if shift key is held down, otherwise only page rows
+          if (e.nativeEvent instanceof MouseEvent && e.nativeEvent.shiftKey) {
+            table.getToggleAllRowsSelectedHandler()(e);
+            return;
+          }
+          table.getToggleAllPageRowsSelectedHandler()(e);
+        }}
         disabled={table.getRowModel().rows.every((row) => !row.getCanSelect())}
         onClick={(e) => {
           e.stopPropagation();
         }}
         aria-label="Select all rows"
-        title="Select all rows"
+        title="Select all rows. Hold shift key to select across all pages."
       />
     ),
     cell: ({ row, table }) => (