diff --git a/changes/14596-reset-selected-rows b/changes/14596-reset-selected-rows new file mode 100644 index 0000000000..40b7886412 --- /dev/null +++ b/changes/14596-reset-selected-rows @@ -0,0 +1 @@ +- All Fleet tables in the UI will reset rows selected if user changes filters, search query, or paginates diff --git a/frontend/components/TableContainer/DataTable/DataTable.tsx b/frontend/components/TableContainer/DataTable/DataTable.tsx index 2e496ba902..4afa3fb518 100644 --- a/frontend/components/TableContainer/DataTable/DataTable.tsx +++ b/frontend/components/TableContainer/DataTable/DataTable.tsx @@ -102,7 +102,6 @@ const DataTable = ({ renderPagination, setExportRows, }: IDataTableProps): JSX.Element => { - const { resetSelectedRows } = useContext(TableContext); const { isOnlyObserver } = useContext(AppContext); const columns = useMemo(() => { @@ -152,8 +151,8 @@ const DataTable = ({ disableMultiSort: true, disableSortRemove: true, manualSortBy, - // Initializes as false, but changes briefly to true on successful notification - autoResetSelectedRows: resetSelectedRows, + // Resets row selection on (server-side) pagination + autoResetSelectedRows: true, // Expands the enumerated `filterTypes` for react-table // (see https://github.com/TanStack/react-table/blob/alpha/packages/react-table/src/filterTypes.ts) // with custom `filterTypes` defined for this `useTable` instance @@ -254,12 +253,14 @@ const DataTable = ({ useEffect(() => { if (isClientSideFilter && searchQueryColumn) { + toggleAllRowsSelected(false); // Resets row selection on query change (client-side) setDebouncedClientFilter(searchQueryColumn, searchQuery || ""); } }, [searchQuery, searchQueryColumn]); useEffect(() => { if (isClientSideFilter && selectedDropdownFilter) { + toggleAllRowsSelected(false); // Resets row selection on filter change (client-side) selectedDropdownFilter === "all" ? setDebouncedClientFilter("platforms", "") : setDebouncedClientFilter("platforms", selectedDropdownFilter); @@ -575,6 +576,7 @@ const DataTable = ({