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 }) => (