diff --git a/app/docker/react/components/services.ts b/app/docker/react/components/services.ts
index 76eeeb63b..d5abd06d4 100644
--- a/app/docker/react/components/services.ts
+++ b/app/docker/react/components/services.ts
@@ -31,6 +31,7 @@ const ngModule = angular
'isStackColumnVisible',
'onRefresh',
'titleIcon',
+ 'tableKey',
])
);
diff --git a/app/docker/views/services/services.html b/app/docker/views/services/services.html
index fc1dcb9fd..e1a7b8a56 100644
--- a/app/docker/views/services/services.html
+++ b/app/docker/views/services/services.html
@@ -6,4 +6,5 @@
on-refresh="(getServices)"
is-add-action-visible="true"
is-stack-column-visible="true"
+ table-key="'services'"
>
diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html
index 2cdf107d3..caf7a4f92 100644
--- a/app/portainer/views/stacks/edit/stack.html
+++ b/app/portainer/views/stacks/edit/stack.html
@@ -241,7 +241,13 @@
environment="endpoint"
>
-
+
(
- tableKey,
- 'name',
- (set) => ({
- ...refreshableSettings(set),
- ...hiddenColumnsSettings(set),
- expanded: {},
- setExpanded(value) {
- set({ expanded: value });
- },
- })
-);
-
export function ServicesDatatable({
titleIcon = Shuffle,
dataset,
isAddActionVisible,
isStackColumnVisible,
onRefresh,
+ tableKey,
}: {
dataset: Array | undefined;
titleIcon?: IconProps['icon'];
isAddActionVisible?: boolean;
isStackColumnVisible?: boolean;
onRefresh?(): void;
+ tableKey: string;
}) {
+ // use a unique tableKey so that unrelated services datatables don't share state
+ const store = createPersistedStore(
+ tableKey,
+ 'name',
+ (set) => ({
+ ...refreshableSettings(set),
+ ...hiddenColumnsSettings(set),
+ expanded: {},
+ setExpanded(value) {
+ set({ expanded: value });
+ },
+ })
+ );
+
// useRef so that updating the parent filter doesn't cause a re-render
const parentFilteredStatusRef = useRef