diff --git a/app/react/components/datatables/Datatable.test.tsx b/app/react/components/datatables/Datatable.test.tsx
index 25e1ed1eb..3b5a1e63f 100644
--- a/app/react/components/datatables/Datatable.test.tsx
+++ b/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(
+
+ );
+
+ 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(
+
+ );
+
+ 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
diff --git a/app/react/components/datatables/select-column.tsx b/app/react/components/datatables/select-column.tsx
index 6e5b4a920..f20f4dd0b 100644
--- a/app/react/components/datatables/select-column.tsx
+++ b/app/react/components/datatables/select-column.tsx
@@ -11,15 +11,22 @@ export function createSelectColumn(dataCy: string): ColumnDef {
{
+ // 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 }) => (