diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
index 0b7d63041bb0..8ce636f7d0d9 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
@@ -50,6 +50,7 @@ import { TableEmptyState } from './TableEmptyState/TableEmptyState';
import { useRowActions } from './hooks/useRowActions';
import { useUiFlag } from 'hooks/useUiFlag';
import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
+import { useSelectedData } from './hooks/useSelectedData';
interface IPaginatedProjectFeatureTogglesProps {
environments: IProject['environments'];
@@ -372,6 +373,8 @@ export const PaginatedProjectFeatureToggles = ({
[columnVisibility, setTableState],
);
+ const selectedData = useSelectedData(features, rowSelection);
+
return (
<>
-
+
(
+ data: T[],
+ selection: Record,
+): T[] => {
+ const [selectedData, setSelectedData] = useState([]);
+
+ useEffect(() => {
+ setSelectedData((prevSelectedData) => {
+ const combinedData = [...data];
+ prevSelectedData.forEach((item) => {
+ if (
+ !combinedData.find(
+ (dataItem) => dataItem.name === item.name,
+ )
+ ) {
+ combinedData.push(item);
+ }
+ });
+
+ return combinedData.filter((item) => selection[item.name]);
+ });
+ }, [data, selection]);
+
+ return selectedData;
+};