From 0e5d7220eba5acee7fa96b5382bc95af97342330 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Fri, 7 Nov 2025 15:38:11 +0100
Subject: [PATCH 01/21] refactor: extract logic to grid plugin

---
 .../src/core/Datasource.service.ts            |   4 +-
 .../__tests__/emptyStateWidgetsAtom.spec.ts   |  80 ++++++++++++
 .../core/__tests__/hasMoreItemsAtom.spec.ts   |  25 ++++
 .../__tests__/isAllItemsPresentAtom.spec.ts   |  68 ++++++++++
 .../core/__tests__/isAllItemsSelected.spec.ts | 122 ++++++++++++++++++
 .../isCurrentPageSelectedAtom.spec.ts         |  77 +++++++++++
 .../src/core/__tests__/itemCountAtom.spec.ts  |  43 ++++++
 .../src/core/__tests__/limitAtom.spec.ts      |  23 ++++
 .../src/core/__tests__/offsetAtom.spec.ts     |  23 ++++
 .../core/__tests__/selectedCountMulti.spec.ts |  36 ++++++
 .../src/core/__tests__/totalCountAtom.spec.ts |  43 ++++++
 .../src/core/models/datasource.model.ts       |  65 ++++++++++
 .../src/core/models/empty-state.model.ts      |  20 +++
 .../src/core/models/selection.model.ts        |  70 ++++++++++
 .../src/select-all/SelectAllBar.store.ts      |  37 ++++++
 .../src/select-all/select-all.feature.ts      |  30 +++++
 .../src/select-all/select-all.model.ts        | 114 ++++++++++++++++
 .../src/utils/mobx-test-setup.ts              |   3 +
 18 files changed, 881 insertions(+), 2 deletions(-)
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/emptyStateWidgetsAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/hasMoreItemsAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsPresentAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsSelected.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/isCurrentPageSelectedAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/itemCountAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/limitAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/offsetAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/__tests__/totalCountAtom.spec.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/models/empty-state.model.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/utils/mobx-test-setup.ts

diff --git a/packages/shared/widget-plugin-grid/src/core/Datasource.service.ts b/packages/shared/widget-plugin-grid/src/core/Datasource.service.ts
index 8bd399e4ca..052d963dde 100644
--- a/packages/shared/widget-plugin-grid/src/core/Datasource.service.ts
+++ b/packages/shared/widget-plugin-grid/src/core/Datasource.service.ts
@@ -124,12 +124,12 @@ export class DatasourceService implements SetupComponent, QueryService {
                 // Subscribe to items to reschedule timer on items change
                 // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                 this.items;
-                clearInterval(timerId);
+                clearTimeout(timerId);
                 timerId = window.setTimeout(() => this.backgroundRefresh(), this.refreshIntervalMs);
             });
             add(() => {
                 clearAutorun();
-                clearInterval(timerId);
+                clearTimeout(timerId);
             });
         }
 
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/emptyStateWidgetsAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/emptyStateWidgetsAtom.spec.ts
new file mode 100644
index 0000000000..3ac9b2c014
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/emptyStateWidgetsAtom.spec.ts
@@ -0,0 +1,80 @@
+import { DerivedGate, GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { autorun, computed, observable } from "mobx";
+import { ReactNode } from "react";
+import "../../utils/mobx-test-setup.js";
+import { emptyStateWidgetsAtom } from "../models/empty-state.model.js";
+
+describe("emptyStateWidgetsAtom", () => {
+    it("returns null when emptyPlaceholder is undefined", () => {
+        const gate = new DerivedGate({ props: { emptyPlaceholder: undefined } });
+        const itemsCount = computed(() => 0);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(null);
+    });
+
+    it("returns null when items count is greater than 0", () => {
+        const gate = new DerivedGate({ props: { emptyPlaceholder: "Empty state message" } });
+        const itemsCount = computed(() => 5);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(null);
+    });
+
+    it("returns null when items count is -1 (loading state)", () => {
+        const gate = new DerivedGate({ props: { emptyPlaceholder: "Empty state message" } });
+        const itemsCount = computed(() => -1);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(null);
+    });
+
+    it("returns emptyPlaceholder when both emptyPlaceholder is defined and itemsCount is exactly 0", () => {
+        const message = "Empty state message";
+        const gate = new DerivedGate({ props: { emptyPlaceholder: message } });
+        const itemsCount = computed(() => 0);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(message);
+    });
+
+    describe("reactive behavior", () => {
+        it("reacts to changes in both emptyPlaceholder and itemsCount", () => {
+            const gateProvider = new GateProvider({
+                emptyPlaceholder: undefined as ReactNode
+            });
+            const itemCountBox = observable.box(5);
+            const atom = emptyStateWidgetsAtom(gateProvider.gate, itemCountBox);
+            const values: ReactNode[] = [];
+
+            const dispose = autorun(() => values.push(atom.get()));
+
+            // Initial state: no placeholder, items > 0 → null
+            expect(values.at(-1)).toBe(null);
+
+            // Add placeholder but items count > 0 → still null
+            gateProvider.setProps({ emptyPlaceholder: "Empty message" });
+            expect(values.at(-1)).toBe(null);
+
+            // Set items count to 0 → should show placeholder
+            itemCountBox.set(0);
+            expect(values.at(-1)).toBe("Empty message");
+
+            // Remove placeholder while count is 0 → null
+            gateProvider.setProps({ emptyPlaceholder: undefined });
+            expect(values.at(-1)).toBe(null);
+
+            // Add different placeholder back with count still 0 → show new placeholder
+            gateProvider.setProps({ emptyPlaceholder: "No data available" });
+            expect(values.at(-1)).toBe("No data available");
+
+            // Increase count while placeholder exists → null
+            itemCountBox.set(3);
+            expect(values.at(-1)).toBe(null);
+
+            expect(values).toEqual([null, "Empty message", null, "No data available", null]);
+
+            dispose();
+        });
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/hasMoreItemsAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/hasMoreItemsAtom.spec.ts
new file mode 100644
index 0000000000..6c06c75126
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/hasMoreItemsAtom.spec.ts
@@ -0,0 +1,25 @@
+import { GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { autorun } from "mobx";
+import { hasMoreItemsAtom } from "../models/datasource.model.js";
+
+describe("hasMoreItemsAtom", () => {
+    it("reacts to datasource hasMoreItems changes", () => {
+        const gateProvider = new GateProvider<{ datasource: { hasMoreItems?: boolean } }>({
+            datasource: { hasMoreItems: undefined }
+        });
+        const atom = hasMoreItemsAtom(gateProvider.gate);
+        const values: Array<boolean | undefined> = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(undefined);
+
+        gateProvider.setProps({ datasource: { hasMoreItems: true } });
+        gateProvider.setProps({ datasource: { hasMoreItems: false } });
+        gateProvider.setProps({ datasource: { hasMoreItems: true } });
+        gateProvider.setProps({ datasource: { hasMoreItems: undefined } });
+        gateProvider.setProps({ datasource: { hasMoreItems: false } });
+
+        expect(values).toEqual([undefined, true, false, true, undefined, false]);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsPresentAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsPresentAtom.spec.ts
new file mode 100644
index 0000000000..31e8e45bf8
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsPresentAtom.spec.ts
@@ -0,0 +1,68 @@
+import { autorun, computed, observable } from "mobx";
+import { isAllItemsPresent, isAllItemsPresentAtom } from "../models/datasource.model.js";
+
+import "../../utils/mobx-test-setup.js";
+
+describe("isAllItemsPresent", () => {
+    it("returns true when offset is 0 and hasMoreItems is false", () => {
+        expect(isAllItemsPresent(0, false)).toBe(true);
+    });
+
+    it("returns false when offset is 0 and hasMoreItems is true", () => {
+        expect(isAllItemsPresent(0, true)).toBe(false);
+    });
+
+    it("returns false when offset is 0 and hasMoreItems is undefined", () => {
+        expect(isAllItemsPresent(0, undefined)).toBe(false);
+    });
+
+    it("returns false when offset is greater than 0 and hasMoreItems is false", () => {
+        expect(isAllItemsPresent(10, false)).toBe(false);
+    });
+
+    it("returns false when offset is greater than 0 and hasMoreItems is true", () => {
+        expect(isAllItemsPresent(10, true)).toBe(false);
+    });
+
+    it("returns false when offset is greater than 0 and hasMoreItems is undefined", () => {
+        expect(isAllItemsPresent(10, undefined)).toBe(false);
+    });
+
+    it("returns false when offset is negative and hasMoreItems is false", () => {
+        expect(isAllItemsPresent(-1, false)).toBe(false);
+    });
+});
+
+describe("isAllItemsPresentAtom", () => {
+    it("reacts to changes in offset and hasMoreItems", () => {
+        const offsetState = observable.box(0);
+        const hasMoreItemsState = observable.box<boolean | undefined>(false);
+
+        const offsetComputed = computed(() => offsetState.get());
+        const hasMoreItemsComputed = computed(() => hasMoreItemsState.get());
+
+        const atom = isAllItemsPresentAtom(offsetComputed, hasMoreItemsComputed);
+        const values: boolean[] = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(true);
+
+        hasMoreItemsState.set(true);
+        expect(atom.get()).toBe(false);
+
+        offsetState.set(10);
+        expect(atom.get()).toBe(false);
+
+        hasMoreItemsState.set(false);
+        expect(atom.get()).toBe(false);
+
+        offsetState.set(0);
+        expect(atom.get()).toBe(true);
+
+        hasMoreItemsState.set(undefined);
+        expect(atom.get()).toBe(false);
+
+        expect(values).toEqual([true, false, true, false]);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsSelected.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsSelected.spec.ts
new file mode 100644
index 0000000000..7d2f3b3033
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsSelected.spec.ts
@@ -0,0 +1,122 @@
+import { computed, configure, observable } from "mobx";
+import { isAllItemsSelected, isAllItemsSelectedAtom } from "../models/selection.model.js";
+
+describe("isAllItemsSelected", () => {
+    describe("when selectedCount is -1 (not in multi-selection mode)", () => {
+        it("returns false regardless of other parameters", () => {
+            expect(isAllItemsSelected(-1, 10, 100, true)).toBe(false);
+            expect(isAllItemsSelected(-1, 0, 0, true)).toBe(false);
+            expect(isAllItemsSelected(-1, 10, 100, false)).toBe(false);
+        });
+    });
+
+    describe("when totalCount is -1 and isAllItemsPresent is false", () => {
+        it("returns false even when selectedCount equals itemCount", () => {
+            expect(isAllItemsSelected(50, 50, -1, false)).toBe(false);
+        });
+
+        it("returns false when selectedCount is less than itemCount", () => {
+            expect(isAllItemsSelected(25, 50, -1, false)).toBe(false);
+        });
+
+        it("returns false when selectedCount is greater than itemCount", () => {
+            expect(isAllItemsSelected(75, 50, -1, false)).toBe(false);
+        });
+
+        it("returns false even when both selectedCount and itemCount are 0", () => {
+            expect(isAllItemsSelected(0, 0, -1, false)).toBe(false);
+        });
+    });
+
+    describe("edge cases", () => {
+        it("returns false when selectedCount is 0 and there are items", () => {
+            expect(isAllItemsSelected(0, 10, 100, true)).toBe(false);
+        });
+
+        it("handles case where itemCount exceeds totalCount (data inconsistency)", () => {
+            expect(isAllItemsSelected(100, 150, 100, true)).toBe(true);
+        });
+
+        it("handles negative itemCount edge case", () => {
+            expect(isAllItemsSelected(5, -1, 0, true)).toBe(false);
+        });
+
+        it("handles negative totalCount edge case", () => {
+            expect(isAllItemsSelected(5, 10, -1, true)).toBe(false);
+        });
+    });
+});
+
+describe("isAllItemsSelectedAtom", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("returns true when all items are selected based on totalCount", () => {
+        const selectedCount = computed(() => 100);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("returns false when selectedCount is less than totalCount", () => {
+        const selectedCount = computed(() => 50);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns true when all items selected with isAllItemsPresent", () => {
+        const selectedCount = computed(() => 50);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 0);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("returns false when selectedCount is -1", () => {
+        const selectedCount = computed(() => -1);
+        const itemCount = computed(() => 10);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("updates reactively when selectedCount changes", () => {
+        const selectedCountBox = observable.box(50);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCountBox, itemCount, totalCount, isAllItemsPresent);
+
+        expect(atom.get()).toBe(false);
+
+        selectedCountBox.set(100);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("updates reactively when totalCount changes", () => {
+        const totalCountBox = observable.box(100);
+        const selectedCount = computed(() => 50);
+        const itemCount = computed(() => 50);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCountBox, isAllItemsPresent);
+
+        expect(atom.get()).toBe(false);
+
+        totalCountBox.set(50);
+        expect(atom.get()).toBe(true);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/isCurrentPageSelectedAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/isCurrentPageSelectedAtom.spec.ts
new file mode 100644
index 0000000000..6e851c2b84
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/isCurrentPageSelectedAtom.spec.ts
@@ -0,0 +1,77 @@
+import { configure, observable } from "mobx";
+import { isCurrentPageSelectedAtom } from "../models/selection.model.js";
+
+describe("isCurrentPageSelectedAtom", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("returns true when all current page items are selected", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [{ id: "1" }, { id: "2" }] },
+                datasource: { items: [{ id: "1" }, { id: "2" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("returns false when only some page items are selected", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [{ id: "1" }] },
+                datasource: { items: [{ id: "1" }, { id: "2" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns false when selection type is Single", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Single" as const },
+                datasource: { items: [{ id: "1" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns false when itemSelection is undefined", () => {
+        const gate = observable({
+            props: {
+                datasource: { items: [{ id: "1" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns false when there are no items", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [] },
+                datasource: { items: [] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("updates reactively when selection changes", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [{ id: "1" }] },
+                datasource: { items: [{ id: "1" }, { id: "2" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+
+        expect(atom.get()).toBe(false);
+
+        gate.props.itemSelection.selection.push({ id: "2" });
+        expect(atom.get()).toBe(true);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/itemCountAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/itemCountAtom.spec.ts
new file mode 100644
index 0000000000..2d280c2b36
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/itemCountAtom.spec.ts
@@ -0,0 +1,43 @@
+import { DerivedGate, GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { list } from "@mendix/widget-plugin-test-utils";
+import { ListValue } from "mendix";
+import { autorun } from "mobx";
+import { itemCountAtom } from "../models/datasource.model.js";
+
+describe("itemCountAtom", () => {
+    it("returns -1 when datasource items is undefined", () => {
+        const gate = new DerivedGate({ props: { datasource: { items: undefined } } });
+
+        expect(itemCountAtom(gate).get()).toBe(-1);
+    });
+
+    it("returns correct count when datasource has items", () => {
+        const gate = new DerivedGate({ props: { datasource: list(5) } });
+
+        expect(itemCountAtom(gate).get()).toBe(5);
+    });
+
+    it("returns 0 for empty items array", () => {
+        const gate = new DerivedGate({ props: { datasource: list(0) } });
+
+        expect(itemCountAtom(gate).get()).toBe(0);
+    });
+
+    it("reacts to datasource items changes", () => {
+        const gateProvider = new GateProvider({ datasource: { items: undefined } as ListValue });
+        const atom = itemCountAtom(gateProvider.gate);
+        const values: number[] = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(-1);
+
+        gateProvider.setProps({ datasource: list(5) });
+        gateProvider.setProps({ datasource: list(2) });
+        gateProvider.setProps({ datasource: list(0) });
+        gateProvider.setProps({ datasource: { items: undefined } as ListValue });
+        gateProvider.setProps({ datasource: list(3) });
+
+        expect(values).toEqual([-1, 5, 2, 0, -1, 3]);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/limitAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/limitAtom.spec.ts
new file mode 100644
index 0000000000..a54a0e00b1
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/limitAtom.spec.ts
@@ -0,0 +1,23 @@
+import { GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { autorun } from "mobx";
+import { limitAtom } from "../models/datasource.model.js";
+
+describe("limitAtom", () => {
+    it("reacts to datasource limit changes", () => {
+        const gateProvider = new GateProvider({ datasource: { limit: 10 } });
+        const atom = limitAtom(gateProvider.gate);
+        const values: number[] = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(10);
+
+        gateProvider.setProps({ datasource: { limit: 25 } });
+        gateProvider.setProps({ datasource: { limit: 50 } });
+        gateProvider.setProps({ datasource: { limit: 5 } });
+        gateProvider.setProps({ datasource: { limit: 10 } });
+        gateProvider.setProps({ datasource: { limit: 100 } });
+
+        expect(values).toEqual([10, 25, 50, 5, 10, 100]);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/offsetAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/offsetAtom.spec.ts
new file mode 100644
index 0000000000..0b4a5a6b8c
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/offsetAtom.spec.ts
@@ -0,0 +1,23 @@
+import { GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { autorun } from "mobx";
+import { offsetAtom } from "../models/datasource.model.js";
+
+describe("offsetAtom", () => {
+    it("reacts to datasource offset changes", () => {
+        const gateProvider = new GateProvider({ datasource: { offset: 0 } });
+        const atom = offsetAtom(gateProvider.gate);
+        const values: number[] = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(0);
+
+        gateProvider.setProps({ datasource: { offset: 10 } });
+        gateProvider.setProps({ datasource: { offset: 20 } });
+        gateProvider.setProps({ datasource: { offset: 5 } });
+        gateProvider.setProps({ datasource: { offset: 0 } });
+        gateProvider.setProps({ datasource: { offset: 100 } });
+
+        expect(values).toEqual([0, 10, 20, 5, 0, 100]);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts
new file mode 100644
index 0000000000..df88d3cd49
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts
@@ -0,0 +1,36 @@
+import { configure, observable } from "mobx";
+import { selectedCountMulti } from "../models/selection.model.js";
+
+describe("selectedCountMulti", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("returns selection length when type is Multi", () => {
+        const gate = observable({ itemSelection: { type: "Multi", selection: [{ id: "1" }, { id: "2" }] } });
+        const atom = selectedCountMulti(gate);
+        expect(atom.get()).toBe(2);
+    });
+
+    it("returns -1 when type is Single", () => {
+        const gate = observable({ itemSelection: { type: "Single", selection: [] } });
+        const atom = selectedCountMulti(gate);
+        expect(atom.get()).toBe(-1);
+    });
+
+    it("returns -1 when itemSelection is undefined", () => {
+        const gate = observable({});
+        const atom = selectedCountMulti(gate);
+        expect(atom.get()).toBe(-1);
+    });
+
+    it("updates reactively when selection changes", () => {
+        const gate = observable({ itemSelection: { type: "Multi", selection: [{ id: "1" }] } });
+        const atom = selectedCountMulti(gate);
+
+        expect(atom.get()).toBe(1);
+
+        gate.itemSelection.selection.push({ id: "2" });
+        expect(atom.get()).toBe(2);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/totalCountAtom.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/totalCountAtom.spec.ts
new file mode 100644
index 0000000000..b7a3f39847
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/totalCountAtom.spec.ts
@@ -0,0 +1,43 @@
+import { DerivedGate, GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { autorun } from "mobx";
+import { totalCountAtom } from "../models/datasource.model.js";
+
+describe("totalCountAtom", () => {
+    it("returns -1 when datasource totalCount is undefined", () => {
+        const gate = new DerivedGate({ props: { datasource: { totalCount: undefined } } });
+
+        expect(totalCountAtom(gate).get()).toBe(-1);
+    });
+
+    it("returns correct count when datasource has totalCount", () => {
+        const gate = new DerivedGate({ props: { datasource: { totalCount: 5 } } });
+
+        expect(totalCountAtom(gate).get()).toBe(5);
+    });
+
+    it("returns 0 for totalCount of 0", () => {
+        const gate = new DerivedGate({ props: { datasource: { totalCount: 0 } } });
+
+        expect(totalCountAtom(gate).get()).toBe(0);
+    });
+
+    it("reacts to datasource totalCount changes", () => {
+        const gateProvider = new GateProvider<{ datasource: { totalCount?: number } }>({
+            datasource: { totalCount: undefined }
+        });
+        const atom = totalCountAtom(gateProvider.gate);
+        const values: number[] = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(-1);
+
+        gateProvider.setProps({ datasource: { totalCount: 5 } });
+        gateProvider.setProps({ datasource: { totalCount: 2 } });
+        gateProvider.setProps({ datasource: { totalCount: 0 } });
+        gateProvider.setProps({ datasource: { totalCount: undefined } });
+        gateProvider.setProps({ datasource: { totalCount: 3 } });
+
+        expect(values).toEqual([-1, 5, 2, 0, -1, 3]);
+    });
+});
diff --git a/packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts b/packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts
new file mode 100644
index 0000000000..960ef5f86a
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts
@@ -0,0 +1,65 @@
+import { atomFactory, ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+
+/**
+ * Atom returns `-1` when item count is unknown.
+ * @injectable
+ */
+export function itemCountAtom(
+    gate: DerivedPropsGate<{ datasource: { items?: { length: number } } }>
+): ComputedAtom<number> {
+    return computed(() => gate.props.datasource.items?.length ?? -1);
+}
+
+/**
+ * Atom returns `-1` when total count is unavailable.
+ * @injectable
+ */
+export function totalCountAtom(gate: DerivedPropsGate<{ datasource: { totalCount?: number } }>): ComputedAtom<number> {
+    return computed(() => totalCount(gate.props.datasource));
+}
+
+export function totalCount(ds: { totalCount?: number }): number {
+    return ds.totalCount ?? -1;
+}
+
+/**
+ * Select offset of the datasource.
+ * @injectable
+ */
+export function offsetAtom(gate: DerivedPropsGate<{ datasource: { offset: number } }>): ComputedAtom<number> {
+    return computed(() => gate.props.datasource.offset);
+}
+
+/**
+ * Selects limit of the datasource.
+ * @injectable
+ */
+export function limitAtom(gate: DerivedPropsGate<{ datasource: { limit: number } }>): ComputedAtom<number> {
+    return computed(() => gate.props.datasource.limit);
+}
+
+/**
+ * Selects hasMoreItems flag of the datasource.
+ * @injectable
+ */
+export function hasMoreItemsAtom(
+    gate: DerivedPropsGate<{ datasource: { hasMoreItems?: boolean } }>
+): ComputedAtom<boolean | undefined> {
+    return computed(() => gate.props.datasource.hasMoreItems);
+}
+
+export function isAllItemsPresent(offset: number, hasMoreItems?: boolean): boolean {
+    return offset === 0 && hasMoreItems === false;
+}
+
+/**
+ * Atom returns `true` if all items are present in the datasource.
+ * @injectable
+ */
+export const isAllItemsPresentAtom = atomFactory(
+    (offset: ComputedAtom<number>, hasMoreItems: ComputedAtom<boolean | undefined>) => {
+        return [offset.get(), hasMoreItems.get()];
+    },
+    isAllItemsPresent
+);
diff --git a/packages/shared/widget-plugin-grid/src/core/models/empty-state.model.ts b/packages/shared/widget-plugin-grid/src/core/models/empty-state.model.ts
new file mode 100644
index 0000000000..eecdc7d48e
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/models/empty-state.model.ts
@@ -0,0 +1,20 @@
+import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+import { ReactNode } from "react";
+
+/**
+ * Selects 'empty placeholder' widgets from gate.
+ * @injectable
+ */
+export function emptyStateWidgetsAtom(
+    gate: DerivedPropsGate<{ emptyPlaceholder?: ReactNode }>,
+    itemsCount: ComputedAtom<number>
+): ComputedAtom<ReactNode> {
+    return computed(() => {
+        const { emptyPlaceholder } = gate.props;
+        if (emptyPlaceholder && itemsCount.get() === 0) {
+            return emptyPlaceholder;
+        }
+        return null;
+    });
+}
diff --git a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
new file mode 100644
index 0000000000..7ba166f5d2
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
@@ -0,0 +1,70 @@
+import { atomFactory, ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+
+/** Returns selected count in multi-selection mode and -1 otherwise. */
+export function selectedCountMulti(gate: {
+    itemSelection?: { type: string; selection: { length: number } };
+}): ComputedAtom<number> {
+    return computed(() => {
+        if (gate.itemSelection?.type === "Multi") {
+            return gate.itemSelection.selection.length;
+        }
+        return -1;
+    });
+}
+
+/** Returns true if all available items selected. */
+export function isAllItemsSelected(
+    selectedCount: number,
+    itemCount: number,
+    totalCount: number,
+    isAllItemsPresent: boolean
+): boolean {
+    if (selectedCount < 1) return false;
+    if (totalCount > 0) return selectedCount === totalCount;
+    if (isAllItemsPresent) return selectedCount === itemCount;
+    return false;
+}
+
+/** @injectable */
+export const isAllItemsSelectedAtom = atomFactory(
+    (
+        selectedCount: ComputedAtom<number>,
+        itemCount: ComputedAtom<number>,
+        totalCount: ComputedAtom<number>,
+        isAllItemsPresent: ComputedAtom<boolean>
+    ): Parameters<typeof isAllItemsSelected> => {
+        return [selectedCount.get(), itemCount.get(), totalCount.get(), isAllItemsPresent.get()];
+    },
+    isAllItemsSelected
+);
+
+type Item = { id: string };
+
+/** Return true if all items on current page selected. */
+export function isCurrentPageSelected(selection: Item[], items: Item[]): boolean {
+    const pageIds = new Set(items.map(item => item.id));
+    const selectionSubArray = selection.filter(item => pageIds.has(item.id));
+    return selectionSubArray.length === pageIds.size && pageIds.size > 0;
+}
+
+/**
+ * Atom returns true if all *loaded* items are selected.
+ * @injectable
+ */
+export function isCurrentPageSelectedAtom(
+    gate: DerivedPropsGate<{
+        itemSelection?: { type: "Single" } | { type: "Multi"; selection: Item[] };
+        datasource: { items?: Item[] };
+    }>
+): ComputedAtom<boolean> {
+    return computed(() => {
+        // Read props first to track changes
+        const selection = gate.props.itemSelection;
+        const items = gate.props.datasource.items ?? [];
+
+        if (!selection || selection.type === "Single") return false;
+
+        return isCurrentPageSelected(selection.selection, items);
+    });
+}
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts
new file mode 100644
index 0000000000..11c01df366
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts
@@ -0,0 +1,37 @@
+import { action, makeObservable, observable } from "mobx";
+import { BarStore } from "./select-all.model";
+
+export class SelectAllBarStore implements BarStore {
+    pending = false;
+    visible = false;
+    clearBtnVisible = false;
+
+    constructor() {
+        makeObservable(this, {
+            pending: observable,
+            visible: observable,
+            clearBtnVisible: observable,
+            setClearBtnVisible: action,
+            setPending: action,
+            hideBar: action,
+            showBar: action
+        });
+    }
+
+    setClearBtnVisible(value: boolean): void {
+        this.clearBtnVisible = value;
+    }
+
+    setPending(value: boolean): void {
+        this.pending = value;
+    }
+
+    hideBar(): void {
+        this.visible = false;
+        this.clearBtnVisible = false;
+    }
+
+    showBar(): void {
+        this.visible = true;
+    }
+}
diff --git a/packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts b/packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts
new file mode 100644
index 0000000000..183d6bb42b
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts
@@ -0,0 +1,30 @@
+import { ComputedAtom, disposeBatch, Emitter, SetupComponent } from "@mendix/widget-plugin-mobx-kit/main";
+
+import {
+    BarStore,
+    SelectAllEvents,
+    SelectService,
+    setupBarStore,
+    setupSelectService,
+    setupVisibilityEvents
+} from "./select-all.model";
+
+export class SelectAllFeature implements SetupComponent {
+    constructor(
+        private emitter: Emitter<SelectAllEvents>,
+        private service: SelectService,
+        private store: BarStore,
+        private isCurrentPageSelected: ComputedAtom<boolean>,
+        private isAllSelected: ComputedAtom<boolean>
+    ) {}
+
+    setup(): () => void {
+        const [add, disposeAll] = disposeBatch();
+
+        add(setupBarStore(this.store, this.emitter));
+        add(setupSelectService(this.service, this.emitter));
+        add(setupVisibilityEvents(this.isCurrentPageSelected, this.isAllSelected, this.emitter));
+
+        return disposeAll;
+    }
+}
diff --git a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
new file mode 100644
index 0000000000..447b41aeb8
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
@@ -0,0 +1,114 @@
+import { ComputedAtom, createEmitter, disposeBatch, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
+import { reaction } from "mobx";
+
+export type ServiceEvents = {
+    loadstart: ProgressEvent;
+    progress: ProgressEvent;
+    done: { success: boolean };
+    loadend: undefined;
+};
+
+export type UIEvents = {
+    visibility: { visible: boolean };
+    startSelecting: undefined;
+    clear: undefined;
+    abort: undefined;
+};
+
+type Handler<T, K extends keyof T> = (event: T[K]) => void;
+
+type PrettyType<T> = { [K in keyof T]: T[K] };
+
+export type SelectAllEvents = PrettyType<ServiceEvents & UIEvents>;
+
+/** @injectable */
+export function selectAllEmitter(): Emitter<SelectAllEvents> {
+    return createEmitter<SelectAllEvents>();
+}
+
+export interface BarStore {
+    pending: boolean;
+    visible: boolean;
+    clearBtnVisible: boolean;
+    setClearBtnVisible(value: boolean): void;
+    setPending(value: boolean): void;
+    hideBar(): void;
+    showBar(): void;
+}
+
+export interface SelectService {
+    selectAllPages(): void;
+    clearSelection(): void;
+    abort(): void;
+}
+
+export function setupBarStore(store: BarStore, emitter: Emitter<SelectAllEvents>): () => void {
+    const [add, disposeAll] = disposeBatch();
+
+    const handleVisibility: Handler<UIEvents, "visibility"> = (event): void => {
+        if (event.visible) {
+            store.showBar();
+        } else {
+            store.hideBar();
+        }
+    };
+
+    const handleLoadStart = (): void => store.setPending(true);
+
+    const handleLoadEnd = (): void => store.setPending(false);
+
+    const handleDone: Handler<ServiceEvents, "done"> = (event): void => {
+        store.setClearBtnVisible(event.success);
+    };
+
+    add(emitter.on("visibility", handleVisibility));
+    add(emitter.on("loadstart", handleLoadStart));
+    add(emitter.on("loadend", handleLoadEnd));
+    add(emitter.on("done", handleDone));
+
+    return disposeAll;
+}
+
+export function setupSelectService(service: SelectService, emitter: Emitter<SelectAllEvents>): () => void {
+    const [add, disposeAll] = disposeBatch();
+
+    add(emitter.on("startSelecting", () => service.selectAllPages()));
+    add(emitter.on("clear", () => service.clearSelection()));
+    add(emitter.on("abort", () => service.abort()));
+
+    return disposeAll;
+}
+
+export function setupProgressService(
+    service: {
+        onloadstart: (event: ProgressEvent) => void;
+        onprogress: (event: ProgressEvent) => void;
+        onloadend: () => void;
+    },
+    emitter: Emitter<SelectAllEvents>
+): () => void {
+    const [add, disposeAll] = disposeBatch();
+
+    add(emitter.on("loadstart", event => service.onloadstart(event)));
+    add(emitter.on("progress", event => service.onprogress(event)));
+    add(emitter.on("loadend", () => service.onloadend()));
+
+    return disposeAll;
+}
+
+export function setupVisibilityEvents(
+    isPageSelected: ComputedAtom<boolean>,
+    isAllSelected: ComputedAtom<boolean>,
+    emitter: Emitter<SelectAllEvents>
+): () => void {
+    return reaction(
+        () => [isPageSelected.get(), isAllSelected.get()] as const,
+        ([isPageSelected, isAllSelected]) => {
+            if (isPageSelected === false) {
+                emitter.emit("visibility", { visible: false });
+            } else if (isAllSelected === false) {
+                emitter.emit("visibility", { visible: true });
+            }
+        }
+    );
+}
diff --git a/packages/shared/widget-plugin-grid/src/utils/mobx-test-setup.ts b/packages/shared/widget-plugin-grid/src/utils/mobx-test-setup.ts
new file mode 100644
index 0000000000..f3410aabae
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/utils/mobx-test-setup.ts
@@ -0,0 +1,3 @@
+import { configure } from "mobx";
+
+configure({ enforceActions: "never" });

From 7a987a6e0e8d6ed08a6214968b7a113b4ffc7b50 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Fri, 7 Nov 2025 15:42:10 +0100
Subject: [PATCH 02/21] refactor: rewrite empty placeholder

---
 .../datagrid-web/src/Datagrid.tsx             |  7 +--
 .../datagrid-web/src/components/Widget.tsx    | 23 +-------
 .../empty-message/EmptyPlaceholder.tsx        | 16 ++++++
 .../EmptyPlaceholder.viewModel.ts             | 32 ++++++++++++
 .../EmptyPlaceholder.viewModel.spec.ts        | 52 +++++++++++++++++++
 .../features/empty-message/injection-hooks.ts |  4 ++
 .../model/containers/Datagrid.container.ts    |  8 +++
 .../src/model/models/columns.model.ts         |  7 +++
 .../datagrid-web/src/model/tokens.ts          | 21 +++++++-
 .../datagrid-web/typings/MainGateProps.ts     |  1 +
 10 files changed, 142 insertions(+), 29 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.tsx
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.viewModel.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/features/empty-message/__tests__/EmptyPlaceholder.viewModel.spec.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index f6f3a80d50..49cfaaa2aa 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -5,7 +5,7 @@ import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { ContainerProvider } from "brandi-react";
 import { observer } from "mobx-react-lite";
-import { ReactElement, ReactNode, useCallback, useMemo } from "react";
+import { ReactElement, useCallback, useMemo } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
@@ -84,11 +84,6 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                 columnsResizable={props.columnsResizable}
                 columnsSortable={props.columnsSortable}
                 data={items}
-                emptyPlaceholderRenderer={useCallback(
-                    (renderWrapper: (children: ReactNode) => ReactElement) =>
-                        props.showEmptyPlaceholder === "custom" ? renderWrapper(props.emptyPlaceholder) : <div />,
-                    [props.emptyPlaceholder, props.showEmptyPlaceholder]
-                )}
                 filterRenderer={useCallback(
                     (renderWrapper, columnIndex) => {
                         const columnFilter = columnsStore.columnFilters[columnIndex];
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 81a13fb18c..39604e653a 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -1,7 +1,6 @@
 import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator";
 import { Pagination } from "@mendix/widget-plugin-grid/components/Pagination";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
-import classNames from "classnames";
 import { ListActionValue, ObjectItem } from "mendix";
 import { observer } from "mobx-react-lite";
 import { CSSProperties, Fragment, ReactElement, ReactNode } from "react";
@@ -12,6 +11,7 @@ import {
     ShowPagingButtonsEnum
 } from "../../typings/DatagridProps";
 
+import { EmptyPlaceholder } from "../features/empty-message/EmptyPlaceholder";
 import { SelectAllBar } from "../features/select-all/SelectAllBar";
 import { SelectionProgressDialog } from "../features/select-all/SelectionProgressDialog";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
@@ -38,7 +38,6 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     columnsResizable: boolean;
     columnsSortable: boolean;
     data: T[];
-    emptyPlaceholderRenderer?: (renderWrapper: (children: ReactNode) => ReactElement) => ReactElement;
     exporting: boolean;
     filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
     hasMoreItems: boolean;
@@ -117,7 +116,6 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         CellComponent,
         columnsHidable,
         data: rows,
-        emptyPlaceholderRenderer,
         hasMoreItems,
         headerContent,
         headerTitle,
@@ -128,7 +126,6 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         paginationType,
         paging,
         pagingPosition,
-        preview,
         showRefreshIndicator,
         selectActionHelper,
         setPage,
@@ -216,23 +213,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                             eventsController={props.cellEventsController}
                             pageSize={props.pageSize}
                         />
-                        {(rows.length === 0 || preview) &&
-                            emptyPlaceholderRenderer &&
-                            emptyPlaceholderRenderer(children => (
-                                <div
-                                    key="row-footer"
-                                    className={classNames("td", { "td-borders": !preview })}
-                                    style={{
-                                        gridColumn: `span ${
-                                            visibleColumns.length +
-                                            (columnsHidable ? 1 : 0) +
-                                            (selectActionHelper.showCheckboxColumn ? 1 : 0)
-                                        }`
-                                    }}
-                                >
-                                    <div className="empty-placeholder">{children}</div>
-                                </div>
-                            ))}
+                        <EmptyPlaceholder />
                     </GridBody>
                 </Grid>
             </WidgetContent>
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.tsx b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.tsx
new file mode 100644
index 0000000000..c42424df51
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.tsx
@@ -0,0 +1,16 @@
+import classNames from "classnames";
+import { observer } from "mobx-react-lite";
+import { ReactNode } from "react";
+import { useEmptyPlaceholderVM } from "./injection-hooks";
+
+export const EmptyPlaceholder = observer(function EmptyPlaceholder(): ReactNode {
+    const vm = useEmptyPlaceholderVM();
+
+    if (!vm.content) return null;
+
+    return (
+        <div className={classNames("td", "td-borders")} style={vm.style}>
+            <div className="empty-placeholder">{vm.content}</div>
+        </div>
+    );
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.viewModel.ts b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.viewModel.ts
new file mode 100644
index 0000000000..3b88256534
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/EmptyPlaceholder.viewModel.ts
@@ -0,0 +1,32 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { makeAutoObservable } from "mobx";
+import { CSSProperties, ReactNode } from "react";
+
+export class EmptyPlaceholderViewModel {
+    constructor(
+        private widgets: ComputedAtom<ReactNode>,
+        private visibleColumnsCount: ComputedAtom<number>,
+        private config: { checkboxColumnEnabled: boolean; selectorColumnEnabled: boolean }
+    ) {
+        makeAutoObservable(this);
+    }
+
+    get content(): ReactNode {
+        return this.widgets.get();
+    }
+
+    get span(): number {
+        let span = this.visibleColumnsCount.get();
+        if (this.config.checkboxColumnEnabled) {
+            span += 1;
+        }
+        if (this.config.selectorColumnEnabled) {
+            span += 1;
+        }
+        return Math.max(span, 1);
+    }
+
+    get style(): CSSProperties {
+        return { gridColumn: `span ${this.span}` };
+    }
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/empty-message/__tests__/EmptyPlaceholder.viewModel.spec.ts b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/__tests__/EmptyPlaceholder.viewModel.spec.ts
new file mode 100644
index 0000000000..c06a6177dd
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/__tests__/EmptyPlaceholder.viewModel.spec.ts
@@ -0,0 +1,52 @@
+import { computed, observable } from "mobx";
+import { ReactNode } from "react";
+import { EmptyPlaceholderViewModel } from "../EmptyPlaceholder.viewModel";
+
+describe("EmptyPlaceholderViewModel", () => {
+    describe("style getter", () => {
+        it("reacts to changes in visible columns count", () => {
+            const mockWidgets = computed(() => "Empty message" as ReactNode);
+            const columnCount = observable.box(3);
+            const config = { checkboxColumnEnabled: false, selectorColumnEnabled: false };
+
+            const viewModel = new EmptyPlaceholderViewModel(mockWidgets, columnCount, config);
+
+            expect(viewModel.style).toEqual({ gridColumn: "span 3" });
+
+            columnCount.set(5);
+            expect(viewModel.style).toEqual({ gridColumn: "span 5" });
+
+            columnCount.set(0);
+            expect(viewModel.style).toEqual({ gridColumn: "span 1" });
+        });
+
+        it("reacts to changes in visible columns count with config flags enabled", () => {
+            const mockWidgets = computed(() => "Empty message" as ReactNode);
+            const columnCount = observable.box(3);
+            const config = { checkboxColumnEnabled: true, selectorColumnEnabled: true };
+
+            const viewModel = new EmptyPlaceholderViewModel(mockWidgets, columnCount, config);
+
+            expect(viewModel.style).toEqual({ gridColumn: "span 5" });
+
+            columnCount.set(5);
+            expect(viewModel.style).toEqual({ gridColumn: "span 7" });
+
+            columnCount.set(0);
+            expect(viewModel.style).toEqual({ gridColumn: "span 2" });
+        });
+    });
+
+    describe("content getter", () => {
+        it("returns widgets from atom", () => {
+            const message = "Empty message";
+            const atom = computed(() => message);
+            const columnCount = observable.box(3);
+            const config = { checkboxColumnEnabled: false, selectorColumnEnabled: false };
+
+            const viewModel = new EmptyPlaceholderViewModel(atom, columnCount, config);
+
+            expect(viewModel.content).toBe(message);
+        });
+    });
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts
new file mode 100644
index 0000000000..5ed4551bb2
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts
@@ -0,0 +1,4 @@
+import { createInjectionHooks } from "brandi-react";
+import { TOKENS } from "../../model/tokens";
+
+export const [useEmptyPlaceholderVM] = createInjectionHooks(TOKENS.emptyPlaceholderVM);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
index df2664ce0a..cab8e70eac 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -1,6 +1,8 @@
 import { WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
+import { itemCountAtom } from "@mendix/widget-plugin-grid/core/models/datasource.model";
+import { emptyStateWidgetsAtom } from "@mendix/widget-plugin-grid/core/models/empty-state.model";
 import { DatasourceService, ProgressService, SelectionCounterViewModel } from "@mendix/widget-plugin-grid/main";
 import { ClosableGateProvider } from "@mendix/widget-plugin-mobx-kit/ClosableGateProvider";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
@@ -13,6 +15,7 @@ import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
 import { DatagridConfig, datagridConfig } from "../configs/Datagrid.config";
+import { visibleColumnsCountAtom } from "../models/columns.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
@@ -125,6 +128,11 @@ export class DatagridContainer extends Container {
         // Bind select all enabled flag
         this.bind(TOKENS.enableSelectAll).toConstant(props.enableSelectAll);
 
+        // Atoms
+        this.bind(TOKENS.visibleColumnsCount).toInstance(visibleColumnsCountAtom).inTransientScope();
+        this.bind(TOKENS.visibleRowCount).toInstance(itemCountAtom).inTransientScope();
+        this.bind(TOKENS.emptyPlaceholderWidgets).toInstance(emptyStateWidgetsAtom).inTransientScope();
+
         this.postInit(props, config);
 
         return this;
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts
new file mode 100644
index 0000000000..f3ba7dd46b
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts
@@ -0,0 +1,7 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+
+/** @injectable */
+export function visibleColumnsCountAtom(source: { visibleColumns: { length: number } }): ComputedAtom<number> {
+    return computed(() => source.visibleColumns.length);
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index 76b7510f47..c970f1b089 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -1,6 +1,8 @@
 import { FilterAPI, WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter, CombinedFilterConfig } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
+import { itemCountAtom } from "@mendix/widget-plugin-grid/core/models/datasource.model";
+import { emptyStateWidgetsAtom } from "@mendix/widget-plugin-grid/core/models/empty-state.model";
 import {
     DatasourceService,
     QueryService,
@@ -8,11 +10,13 @@ import {
     SelectionCounterViewModel,
     TaskProgressService
 } from "@mendix/widget-plugin-grid/main";
-import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { ComputedAtom, DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { injected, token } from "brandi";
 import { ListValue } from "mendix";
+import { ReactNode } from "react";
 import { SelectionCounterPositionEnum } from "../../typings/DatagridProps";
 import { MainGateProps } from "../../typings/MainGateProps";
+import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel";
 import { SelectAllBarViewModel } from "../features/select-all/SelectAllBar.viewModel";
 import { SelectAllGateProps } from "../features/select-all/SelectAllGateProps";
 import { SelectionProgressDialogViewModel } from "../features/select-all/SelectionProgressDialog.viewModel";
@@ -21,6 +25,7 @@ import { GridBasicData } from "../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../helpers/state/GridPersonalizationStore";
 import { DatasourceParamsController } from "../model/services/DatasourceParamsController";
 import { DatagridConfig } from "./configs/Datagrid.config";
+import { visibleColumnsCountAtom } from "./models/columns.model";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./services/PaginationController";
 
@@ -31,6 +36,8 @@ export const TOKENS = {
     combinedFilter: token<CombinedFilter>("CombinedFilter"),
     combinedFilterConfig: token<CombinedFilterConfig>("CombinedFilterKey"),
     config: token<DatagridConfig>("DatagridConfig"),
+    emptyPlaceholderVM: token<EmptyPlaceholderViewModel>("EmptyPlaceholderViewModel"),
+    emptyPlaceholderWidgets: token<ComputedAtom<ReactNode>>("@computed:emptyPlaceholder"),
     enableSelectAll: token<boolean>("enableSelectAll"),
     exportProgressService: token<TaskProgressService>("ExportProgressService"),
     filterAPI: token<FilterAPI>("FilterAPI"),
@@ -53,7 +60,9 @@ export const TOKENS = {
     selectionCounterPosition: token<SelectionCounterPositionEnum>("SelectionCounterPositionEnum"),
     selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
     selectionDialogVM: token<SelectionProgressDialogViewModel>("SelectionProgressDialogViewModel"),
-    setupService: token<SetupComponentHost>("DatagridSetupHost")
+    setupService: token<SetupComponentHost>("DatagridSetupHost"),
+    visibleColumnsCount: token<ComputedAtom<number>>("@computed:visibleColumnsCount"),
+    visibleRowCount: token<ComputedAtom<number>>("@computed:visibleRowCount")
 };
 
 /** Inject dependencies */
@@ -96,3 +105,11 @@ injected(
     TOKENS.selectAllProgressService,
     TOKENS.selectAllService
 );
+
+injected(EmptyPlaceholderViewModel, TOKENS.emptyPlaceholderWidgets, TOKENS.visibleColumnsCount, TOKENS.config);
+
+injected(visibleColumnsCountAtom, TOKENS.columnsStore);
+
+injected(itemCountAtom, TOKENS.mainGate);
+
+injected(emptyStateWidgetsAtom, TOKENS.mainGate, TOKENS.visibleRowCount);
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index 6567fd1986..2f08c4fc2a 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -26,4 +26,5 @@ export type MainGateProps = Pick<
     | "cancelSelectionLabel"
     | "selectionCounterPosition"
     | "enableSelectAll"
+    | "emptyPlaceholder"
 >;

From ec588fa1c6becdbec6a0da48e5bf4878d830b083 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:22:20 +0100
Subject: [PATCH 03/21] refactor: separate code in plugin

---
 .../src/core/models/selection.model.ts        |  37 ++++-
 .../src/select-all/SelectAll.service.ts       |  40 ++----
 .../src/select-all/SelectAllBar.store.ts      |  12 +-
 .../src/select-all/select-all.model.ts        |  49 ++++++-
 .../SelectionCounter.viewModel-atoms.ts       |  38 +++++
 .../SelectionCounter.viewModel.spec.ts        | 135 +++++++++---------
 6 files changed, 199 insertions(+), 112 deletions(-)
 create mode 100644 packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts

diff --git a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
index 7ba166f5d2..7c2cfe811f 100644
--- a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
+++ b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
@@ -1,7 +1,11 @@
 import { atomFactory, ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
-import { computed } from "mobx";
+import { DynamicValue } from "mendix";
+import { computed, observable } from "mobx";
 
-/** Returns selected count in multi-selection mode and -1 otherwise. */
+/**
+ * Returns selected count in multi-selection mode and -1 otherwise.
+ * @injectable
+ */
 export function selectedCountMulti(gate: {
     itemSelection?: { type: string; selection: { length: number } };
 }): ComputedAtom<number> {
@@ -68,3 +72,32 @@ export function isCurrentPageSelectedAtom(
         return isCurrentPageSelected(selection.selection, items);
     });
 }
+
+interface ObservableSelectorTexts {
+    clearSelectionButtonLabel: string;
+    selectedCountText: string;
+}
+
+export function selectedCounterTextsStore(
+    gate: DerivedPropsGate<{
+        clearSelectionButtonLabel?: DynamicValue<string>;
+        selectedCountTemplateSingular?: DynamicValue<string>;
+        selectedCountTemplatePlural?: DynamicValue<string>;
+    }>,
+    selectedCount: ComputedAtom<number>
+): ObservableSelectorTexts {
+    return observable({
+        get clearSelectionButtonLabel() {
+            return gate.props.clearSelectionButtonLabel?.value || "Clear selection";
+        },
+        get selectedCountText() {
+            const formatSingular = gate.props.selectedCountTemplateSingular?.value || "%d item selected";
+            const formatPlural = gate.props.selectedCountTemplatePlural?.value || "%d items selected";
+            const count = selectedCount.get();
+
+            if (count > 1) return formatPlural.replace("%d", `${count}`);
+            if (count === 1) return formatSingular.replace("%d", "1");
+            return "";
+        }
+    });
+}
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
index 4a296d2aee..50ab21528a 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
@@ -1,30 +1,26 @@
-import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
 import { ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { action, computed, makeObservable, observable, when } from "mobx";
 import { QueryService } from "../interfaces/QueryService";
-import { TaskProgressService } from "../interfaces/TaskProgressService";
+import { ServiceEvents } from "./select-all.model";
 
 interface DynamicProps {
     itemSelection?: SelectionMultiValue | SelectionSingleValue;
 }
 
-export class SelectAllService implements SetupComponent {
+export class SelectAllService {
     private locked = false;
     private abortController?: AbortController;
     private readonly pageSize = 1024;
 
     constructor(
-        host: SetupComponentHost,
         private gate: DerivedPropsGate<DynamicProps>,
         private query: QueryService,
-        private progress: TaskProgressService
+        private progress: Emitter<ServiceEvents>
     ) {
-        host.add(this);
-        type PrivateMembers = "setIsLocked" | "locked";
+        type PrivateMembers = "locked";
         makeObservable<this, PrivateMembers>(this, {
-            setIsLocked: action,
             canExecute: computed,
-            isExecuting: computed,
             selection: computed,
             locked: observable,
             selectAllPages: action,
@@ -33,10 +29,6 @@ export class SelectAllService implements SetupComponent {
         });
     }
 
-    setup(): () => void {
-        return () => this.abort();
-    }
-
     get selection(): SelectionMultiValue | undefined {
         const selection = this.gate.props.itemSelection;
         if (selection === undefined) return;
@@ -48,14 +40,6 @@ export class SelectAllService implements SetupComponent {
         return this.gate.props.itemSelection?.type === "Multi" && !this.locked;
     }
 
-    get isExecuting(): boolean {
-        return this.locked;
-    }
-
-    private setIsLocked(value: boolean): void {
-        this.locked = value;
-    }
-
     private beforeRunChecks(): boolean {
         const selection = this.gate.props.itemSelection;
 
@@ -94,8 +78,10 @@ export class SelectAllService implements SetupComponent {
             return { success: false };
         }
 
-        this.setIsLocked(true);
+        this.locked = true;
+        this.abortController = new AbortController();
 
+        const signal = this.abortController.signal;
         const { offset: initOffset, limit: initLimit } = this.query;
         const initSelection = this.selection?.selection ?? [];
         const hasTotal = typeof this.query.totalCount === "number";
@@ -107,12 +93,10 @@ export class SelectAllService implements SetupComponent {
             new ProgressEvent(type, { loaded, total: totalCount, lengthComputable: hasTotal });
         // We should avoid duplicates, so, we start with clean array.
         const allItems: ObjectItem[] = [];
-        this.abortController = new AbortController();
-        const signal = this.abortController.signal;
 
         performance.mark("SelectAll_Start");
         try {
-            this.progress.onloadstart(pe("loadstart"));
+            this.progress.emit("loadstart", pe("loadstart"));
             let loading = true;
             while (loading) {
                 const loadedItems = await this.query.fetchPage({
@@ -124,7 +108,7 @@ export class SelectAllService implements SetupComponent {
                 allItems.push(...loadedItems);
                 loaded += loadedItems.length;
                 offset += this.pageSize;
-                this.progress.onprogress(pe("progress"));
+                this.progress.emit("progress", pe("progress"));
                 loading = !signal.aborted && this.query.hasMoreItems;
             }
             success = true;
@@ -141,9 +125,7 @@ export class SelectAllService implements SetupComponent {
                 offset: initOffset
             });
             await this.reloadSelection();
-            this.progress.onloadend();
-
-            // const selectionBeforeReload = this.selection?.selection ?? [];
+            this.progress.emit("loadend");
             // Reload selection to make sure setSelection is working as expected.
             this.selection?.setSelection(success ? allItems : initSelection);
             this.locked = false;
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts
index 11c01df366..58ecf9bc8a 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/SelectAllBar.store.ts
@@ -1,4 +1,4 @@
-import { action, makeObservable, observable } from "mobx";
+import { makeAutoObservable } from "mobx";
 import { BarStore } from "./select-all.model";
 
 export class SelectAllBarStore implements BarStore {
@@ -7,15 +7,7 @@ export class SelectAllBarStore implements BarStore {
     clearBtnVisible = false;
 
     constructor() {
-        makeObservable(this, {
-            pending: observable,
-            visible: observable,
-            clearBtnVisible: observable,
-            setClearBtnVisible: action,
-            setPending: action,
-            hideBar: action,
-            showBar: action
-        });
+        makeAutoObservable(this);
     }
 
     setClearBtnVisible(value: boolean): void {
diff --git a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
index 447b41aeb8..8adcddbb28 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
@@ -1,5 +1,12 @@
-import { ComputedAtom, createEmitter, disposeBatch, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
-import { reaction } from "mobx";
+import {
+    ComputedAtom,
+    createEmitter,
+    DerivedPropsGate,
+    disposeBatch,
+    Emitter
+} from "@mendix/widget-plugin-mobx-kit/main";
+import { DynamicValue } from "mendix";
+import { observable, reaction } from "mobx";
 
 export type ServiceEvents = {
     loadstart: ProgressEvent;
@@ -26,6 +33,43 @@ export function selectAllEmitter(): Emitter<SelectAllEvents> {
     return createEmitter<SelectAllEvents>();
 }
 
+interface ObservableSelectAllTexts {
+    selectionStatus: string;
+    selectAllLabel: string;
+}
+
+/** @injectable */
+export function selectAllTextsStore(
+    gate: DerivedPropsGate<{
+        allSelectedText?: DynamicValue<string>;
+        selectAllTemplate?: DynamicValue<string>;
+        selectAllText?: DynamicValue<string>;
+    }>,
+    selectedCount: ComputedAtom<number>,
+    selectedTexts: { selectedCountText: string },
+    totalCount: ComputedAtom<number>,
+    isAllItemsSelected: ComputedAtom<boolean>
+): ObservableSelectAllTexts {
+    return observable({
+        get selectAllLabel() {
+            const selectAllFormat = gate.props.selectAllTemplate?.value || "Select all %d rows in the data source";
+            const selectAllText = gate.props.selectAllText?.value || "Select all rows in the data source";
+            const total = totalCount.get();
+            if (total > 0) return selectAllFormat.replace("%d", `${total}`);
+            return selectAllText;
+        },
+        get selectionStatus() {
+            if (isAllItemsSelected.get()) return this.allSelectedText;
+            return selectedTexts.selectedCountText;
+        },
+        get allSelectedText() {
+            const str = gate.props.allSelectedText?.value ?? "All %d rows selected.";
+            const count = selectedCount.get();
+            return str.replace("%d", `${count}`);
+        }
+    });
+}
+
 export interface BarStore {
     pending: boolean;
     visible: boolean;
@@ -75,6 +119,7 @@ export function setupSelectService(service: SelectService, emitter: Emitter<Sele
     add(emitter.on("startSelecting", () => service.selectAllPages()));
     add(emitter.on("clear", () => service.clearSelection()));
     add(emitter.on("abort", () => service.abort()));
+    add(() => service.abort());
 
     return disposeAll;
 }
diff --git a/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts b/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts
new file mode 100644
index 0000000000..88bb7ec9a3
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts
@@ -0,0 +1,38 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { makeAutoObservable } from "mobx";
+
+/** @injectable */
+export class SelectionCounterViewModel {
+    constructor(
+        private selected: ComputedAtom<number>,
+        private texts: {
+            clearSelectionButtonLabel: string;
+            selectedCountText: string;
+        },
+        private position: "top" | "bottom" | "off"
+    ) {
+        makeAutoObservable(this);
+    }
+
+    get isTopCounterVisible(): boolean {
+        if (this.position !== "top") return false;
+        return this.selected.get() > 0;
+    }
+
+    get isBottomCounterVisible(): boolean {
+        if (this.position !== "bottom") return false;
+        return this.selected.get() > 0;
+    }
+
+    get clearButtonLabel(): string {
+        return this.texts.clearSelectionButtonLabel;
+    }
+
+    get selectedCount(): number {
+        return this.selected.get();
+    }
+
+    get selectedCountText(): string {
+        return this.texts.selectedCountText;
+    }
+}
diff --git a/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts b/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts
index 2d655276e8..c5e607546c 100644
--- a/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts
+++ b/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts
@@ -1,100 +1,97 @@
-import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
-import { objectItems, SelectionMultiValueBuilder, SelectionSingleValueBuilder } from "@mendix/widget-plugin-test-utils";
-import { SelectionMultiValue, SelectionSingleValue } from "mendix";
-import { SelectionCounterViewModel } from "../SelectionCounter.viewModel";
+import { computed, observable } from "mobx";
+import { SelectionCounterViewModel } from "../SelectionCounter.viewModel-atoms";
 
-type Props = {
-    itemSelection?: SelectionSingleValue | SelectionMultiValue;
-};
+describe("SelectionCounterViewModel", () => {
+    describe("selectedCount", () => {
+        it("returns value from selected atom", () => {
+            const selected = computed(() => 5);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "5 items selected" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
 
-const createMinimalMockProps = (overrides: Props = {}): Props => ({ ...overrides });
-
-describe("SelectionCountStore", () => {
-    let gateProvider: GateProvider<Props>;
-    let selectionCountStore: SelectionCounterViewModel;
+            expect(viewModel.selectedCount).toBe(5);
+        });
 
-    beforeEach(() => {
-        const mockProps = createMinimalMockProps();
-        gateProvider = new GateProvider(mockProps);
-        selectionCountStore = new SelectionCounterViewModel(gateProvider.gate, "top");
-    });
+        it("updates reactively when atom changes", () => {
+            const selectedBox = observable.box(3);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
+            const viewModel = new SelectionCounterViewModel(selectedBox, texts, "top");
 
-    describe("when itemSelection is undefined", () => {
-        it("should return 0 selected items", () => {
-            const props = createMinimalMockProps({ itemSelection: undefined });
-            gateProvider.setProps(props);
+            expect(viewModel.selectedCount).toBe(3);
 
-            expect(selectionCountStore.selectedCount).toBe(0);
+            selectedBox.set(10);
+            expect(viewModel.selectedCount).toBe(10);
         });
     });
 
-    describe("when itemSelection is single selection", () => {
-        it("should return 0 when no item is selected", () => {
-            const singleSelection = new SelectionSingleValueBuilder().build();
-            const props = createMinimalMockProps({ itemSelection: singleSelection });
-            gateProvider.setProps(props);
+    describe("selectedCountText", () => {
+        it("returns value from texts object", () => {
+            const selected = computed(() => 5);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "5 items selected" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
 
-            expect(selectionCountStore.selectedCount).toBe(0);
+            expect(viewModel.selectedCountText).toBe("5 items selected");
         });
+    });
 
-        it("should return 0 when one item is selected", () => {
-            const items = objectItems(3);
-            const singleSelection = new SelectionSingleValueBuilder().withSelected(items[0]).build();
-            const props = createMinimalMockProps({ itemSelection: singleSelection });
-            gateProvider.setProps(props);
+    describe("clearButtonLabel", () => {
+        it("returns value from texts object", () => {
+            const selected = computed(() => 0);
+            const texts = { clearSelectionButtonLabel: "Clear selection", selectedCountText: "" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
 
-            expect(selectionCountStore.selectedCount).toBe(0);
+            expect(viewModel.clearButtonLabel).toBe("Clear selection");
         });
     });
 
-    describe("when itemSelection is multi selection", () => {
-        it("should return 0 when no items are selected", () => {
-            const multiSelection = new SelectionMultiValueBuilder().build();
-            const props = createMinimalMockProps({ itemSelection: multiSelection });
-            gateProvider.setProps(props);
+    describe("isTopCounterVisible", () => {
+        it("returns true when position is top and selectedCount > 0", () => {
+            const selected = computed(() => 5);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
 
-            expect(selectionCountStore.selectedCount).toBe(0);
+            expect(viewModel.isTopCounterVisible).toBe(true);
         });
 
-        it("should return correct count when multiple items are selected", () => {
-            const items = objectItems(5);
-            const selectedItems = [items[0], items[2], items[4]];
-            const multiSelection = new SelectionMultiValueBuilder().withSelected(selectedItems).build();
-            const props = createMinimalMockProps({ itemSelection: multiSelection });
-            gateProvider.setProps(props);
+        it("returns false when position is top but selectedCount is 0", () => {
+            const selected = computed(() => 0);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
 
-            expect(selectionCountStore.selectedCount).toBe(3);
+            expect(viewModel.isTopCounterVisible).toBe(false);
         });
 
-        it("should return correct count when all items are selected", () => {
-            const items = objectItems(4);
-            const multiSelection = new SelectionMultiValueBuilder().withSelected(items).build();
-            const props = createMinimalMockProps({ itemSelection: multiSelection });
-            gateProvider.setProps(props);
+        it("returns false when position is not top", () => {
+            const selected = computed(() => 5);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "bottom");
 
-            expect(selectionCountStore.selectedCount).toBe(4);
+            expect(viewModel.isTopCounterVisible).toBe(false);
         });
+    });
+
+    describe("isBottomCounterVisible", () => {
+        it("returns true when position is bottom and selectedCount > 0", () => {
+            const selected = computed(() => 5);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "bottom");
 
-        it("should reactively update when selection changes", () => {
-            const items = objectItems(3);
-            const multiSelection = new SelectionMultiValueBuilder().build();
-            const props = createMinimalMockProps({ itemSelection: multiSelection });
-            gateProvider.setProps(props);
+            expect(viewModel.isBottomCounterVisible).toBe(true);
+        });
 
-            // Initially no items selected
-            expect(selectionCountStore.selectedCount).toBe(0);
+        it("returns false when position is bottom but selectedCount is 0", () => {
+            const selected = computed(() => 0);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "bottom");
 
-            // Select one item
-            multiSelection.setSelection([items[0]]);
-            expect(selectionCountStore.selectedCount).toBe(1);
+            expect(viewModel.isBottomCounterVisible).toBe(false);
+        });
 
-            // Select two more items
-            multiSelection.setSelection([items[0], items[1], items[2]]);
-            expect(selectionCountStore.selectedCount).toBe(3);
+        it("returns false when position is not bottom", () => {
+            const selected = computed(() => 5);
+            const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
+            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
 
-            // Clear selection
-            multiSelection.setSelection([]);
-            expect(selectionCountStore.selectedCount).toBe(0);
+            expect(viewModel.isBottomCounterVisible).toBe(false);
         });
     });
 });

From 53fe86533b4f7c4c968ddec834e21515ba3ff2cc Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:55:51 +0100
Subject: [PATCH 04/21] refactor: split select-all feature

---
 .../features/empty-message/injection-hooks.ts |   4 +-
 .../select-all/SelectAllBar.viewModel.ts      | 156 +++------------
 .../features/select-all/SelectAllGateProps.ts |   6 -
 .../select-all/SelectAllModule.container.ts   | 103 ++++++++--
 .../features/select-all/injection-hooks.ts    |   6 +-
 .../selection-counter/injection-hooks.ts      |   4 +-
 .../src/model/configs/Datagrid.config.ts      |   4 +-
 .../model/containers/Datagrid.container.ts    | 181 +++++++++---------
 .../src/model/containers/Root.container.ts    |  62 +++++-
 .../src/model/hooks/injection-hooks.ts        |  18 +-
 .../src/model/hooks/useDatagridContainer.ts   |  34 +++-
 .../services/MainGateProvider.service.ts      |  20 ++
 .../datagrid-web/src/model/tokens.ts          | 148 +++++++-------
 .../datagrid-web/typings/MainGateProps.ts     |  33 ++--
 .../core/__tests__/selectedCountMulti.spec.ts |  22 ++-
 .../src/core/models/selection.model.ts        |  22 ++-
 .../src/select-all/SelectAll.service.ts       |   6 +-
 .../src/select-all/select-all.feature.ts      |  17 +-
 .../src/select-all/select-all.model.ts        |   2 +-
 .../SelectionCounter.viewModel-atoms.ts       |   6 +-
 .../SelectionCounter.viewModel.spec.ts        |  20 +-
 21 files changed, 466 insertions(+), 408 deletions(-)
 delete mode 100644 packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllGateProps.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts
index 5ed4551bb2..e164f1909d 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/empty-message/injection-hooks.ts
@@ -1,4 +1,4 @@
 import { createInjectionHooks } from "brandi-react";
-import { TOKENS } from "../../model/tokens";
+import { DG_TOKENS as DG } from "../../model/tokens";
 
-export const [useEmptyPlaceholderVM] = createInjectionHooks(TOKENS.emptyPlaceholderVM);
+export const [useEmptyPlaceholderVM] = createInjectionHooks(DG.emptyPlaceholderVM);
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllBar.viewModel.ts b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllBar.viewModel.ts
index 5f063b2f03..3f7c14f35a 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllBar.viewModel.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllBar.viewModel.ts
@@ -1,160 +1,54 @@
-import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
-import { DynamicValue, ListValue, SelectionMultiValue, SelectionSingleValue } from "mendix";
-import { action, makeAutoObservable, reaction } from "mobx";
-
-type DynamicProps = {
-    datasource: ListValue;
-    selectAllTemplate?: DynamicValue<string>;
-    selectAllText?: DynamicValue<string>;
-    itemSelection?: SelectionSingleValue | SelectionMultiValue;
-    allSelectedText?: DynamicValue<string>;
-};
-
-interface SelectService {
-    selectAllPages(): Promise<{ success: boolean }> | { success: boolean };
-    clearSelection(): void;
-}
-
-interface CounterService {
-    selectedCount: number;
-    selectedCountText: string;
-    clearButtonLabel: string;
-}
+import { SelectAllEvents } from "@mendix/widget-plugin-grid/select-all/select-all.model";
+import { Emitter } from "@mendix/widget-plugin-mobx-kit/main";
+import { makeAutoObservable } from "mobx";
 
 /** @injectable */
-export class SelectAllBarViewModel implements SetupComponent {
-    private barVisible = false;
-    private clearVisible = false;
-
-    pending = false;
-
+export class SelectAllBarViewModel {
     constructor(
-        host: SetupComponentHost,
-        private readonly gate: DerivedPropsGate<DynamicProps>,
-        private readonly selectService: SelectService,
-        private readonly count: CounterService,
-        private readonly enableSelectAll: boolean
+        private emitter: Emitter<SelectAllEvents>,
+        private state: { pending: boolean; visible: boolean; clearBtnVisible: boolean },
+        private selectionTexts: {
+            clearSelectionButtonLabel: string;
+            selectedCountText: string;
+        },
+        private selectAllTexts: {
+            selectAllLabel: string;
+            selectionStatus: string;
+        },
+        private enableSelectAll: boolean
     ) {
-        host.add(this);
-        type PrivateMembers = "setClearVisible" | "setPending" | "hideBar" | "showBar";
-        makeAutoObservable<this, PrivateMembers>(this, {
-            setClearVisible: action,
-            setPending: action,
-            hideBar: action,
-            showBar: action
-        });
-    }
-
-    private get props(): DynamicProps {
-        return this.gate.props;
-    }
-
-    private setClearVisible(value: boolean): void {
-        this.clearVisible = value;
-    }
-
-    private setPending(value: boolean): void {
-        this.pending = value;
-    }
-
-    private hideBar(): void {
-        this.barVisible = false;
-        this.clearVisible = false;
-    }
-
-    private showBar(): void {
-        this.barVisible = true;
-    }
-
-    private get total(): number {
-        return this.props.datasource.totalCount ?? 0;
-    }
-
-    private get selectAllFormat(): string {
-        return this.props.selectAllTemplate?.value ?? "Select all %d rows in the data source";
-    }
-
-    private get selectAllText(): string {
-        return this.props.selectAllText?.value ?? "Select all rows in the data source";
-    }
-
-    private get allSelectedText(): string {
-        const str = this.props.allSelectedText?.value ?? "All %d rows selected.";
-        return str.replace("%d", `${this.count.selectedCount}`);
-    }
-
-    private get isCurrentPageSelected(): boolean {
-        const selection = this.props.itemSelection;
-
-        if (!selection || selection.type === "Single") return false;
-
-        const pageIds = new Set(this.props.datasource.items?.map(item => item.id) ?? []);
-        const selectionSubArray = selection.selection.filter(item => pageIds.has(item.id));
-        return selectionSubArray.length === pageIds.size && pageIds.size > 0;
-    }
-
-    private get isAllItemsSelected(): boolean {
-        if (this.total > 0) return this.total === this.count.selectedCount;
-
-        const { offset, limit, items = [], hasMoreItems } = this.gate.props.datasource;
-        const noMoreItems = typeof hasMoreItems === "boolean" && hasMoreItems === false;
-        const fullyLoaded = offset === 0 && limit >= items.length;
-
-        return fullyLoaded && noMoreItems && items.length === this.count.selectedCount;
+        makeAutoObservable(this);
     }
 
     get selectAllLabel(): string {
-        if (this.total > 0) return this.selectAllFormat.replace("%d", `${this.total}`);
-        return this.selectAllText;
+        return this.selectAllTexts.selectAllLabel;
     }
 
     get clearSelectionLabel(): string {
-        return this.count.clearButtonLabel;
+        return this.selectionTexts.clearSelectionButtonLabel;
     }
 
     get selectionStatus(): string {
-        if (this.isAllItemsSelected) return this.allSelectedText;
-        return this.count.selectedCountText;
+        return this.selectAllTexts.selectionStatus;
     }
 
     get isBarVisible(): boolean {
-        return this.enableSelectAll && this.barVisible;
+        return this.enableSelectAll && this.state.visible;
     }
 
     get isClearVisible(): boolean {
-        return this.clearVisible;
+        return this.state.clearBtnVisible;
     }
 
     get isSelectAllDisabled(): boolean {
-        return this.pending;
-    }
-
-    setup(): (() => void) | void {
-        if (!this.enableSelectAll) return;
-
-        return reaction(
-            () => this.isCurrentPageSelected,
-            isCurrentPageSelected => {
-                if (isCurrentPageSelected === false) {
-                    this.hideBar();
-                } else if (this.isAllItemsSelected === false) {
-                    this.showBar();
-                }
-            }
-        );
+        return this.state.pending;
     }
 
     onClear(): void {
-        this.selectService.clearSelection();
+        this.emitter.emit("clear");
     }
 
-    async onSelectAll(): Promise<void> {
-        this.setPending(true);
-        try {
-            const { success } = await this.selectService.selectAllPages();
-            this.setClearVisible(success);
-        } finally {
-            this.setPending(false);
-        }
+    onSelectAll(): void {
+        this.emitter.emit("startSelecting");
     }
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllGateProps.ts b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllGateProps.ts
deleted file mode 100644
index 4476056573..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllGateProps.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ListValue, SelectionMultiValue, SelectionSingleValue } from "mendix";
-
-export type SelectAllGateProps = {
-    datasource: ListValue;
-    itemSelection?: SelectionSingleValue | SelectionMultiValue;
-};
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts
index d191741e31..1d86ba4f7c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts
@@ -1,32 +1,105 @@
-import { DatasourceService, ProgressService, SelectAllService } from "@mendix/widget-plugin-grid/main";
+import { DatasourceService, SelectAllService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { Container } from "brandi";
-import { TOKENS } from "../../model/tokens";
-import { SelectAllGateProps } from "./SelectAllGateProps";
+import { Container, injected } from "brandi";
+
+import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
+import { selectAllEmitter, selectAllTextsStore } from "@mendix/widget-plugin-grid/select-all/select-all.model";
+import { SelectAllBarStore } from "@mendix/widget-plugin-grid/select-all/SelectAllBar.store";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { MainGateProps } from "../../../typings/MainGateProps";
+import { DatagridConfig } from "../../model/configs/Datagrid.config";
+import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../../model/tokens";
+import { SelectAllBarViewModel } from "./SelectAllBar.viewModel";
+import { SelectionProgressDialogViewModel } from "./SelectionProgressDialog.viewModel";
+
+injected(
+    selectAllTextsStore,
+    SA_TOKENS.gate,
+    CORE.selection.selectedCount,
+    CORE.selection.selectedCounterTextsStore,
+    CORE.atoms.totalCount,
+    CORE.selection.isAllItemsSelected
+);
+
+injected(
+    SelectAllBarViewModel,
+    SA_TOKENS.emitter,
+    SA_TOKENS.barStore,
+    CORE.selection.selectedCounterTextsStore,
+    SA_TOKENS.selectAllTextsStore,
+    SA_TOKENS.enableSelectAll
+);
+
+injected(
+    SelectionProgressDialogViewModel,
+    CORE.setupService,
+    SA_TOKENS.gate,
+    SA_TOKENS.progressService,
+    SA_TOKENS.selectAllService
+);
+
+injected(
+    SelectAllFeature,
+    CORE.setupService,
+    SA_TOKENS.emitter,
+    SA_TOKENS.selectAllService,
+    SA_TOKENS.barStore,
+    SA_TOKENS.progressService,
+    CORE.selection.isCurrentPageSelected,
+    CORE.selection.isAllItemsSelected
+);
+
+injected(SelectAllService, SA_TOKENS.gate, DG.query, SA_TOKENS.emitter);
 
 export class SelectAllModule extends Container {
     id = `SelectAllModule@${generateUUID()}`;
 
-    init(props: SelectAllGateProps, root: Container): SelectAllModule {
+    constructor(root: Container) {
+        super();
         this.extend(root);
+        this.bind(SA_TOKENS.barStore).toInstance(SelectAllBarStore).inSingletonScope();
+        this.bind(SA_TOKENS.emitter).toInstance(selectAllEmitter).inSingletonScope();
+        this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
+        this.bind(SA_TOKENS.selectAllService).toInstance(SelectAllService).inSingletonScope();
+        this.bind(SA_TOKENS.selectAllTextsStore).toInstance(selectAllTextsStore).inSingletonScope();
+        this.bind(SA_TOKENS.selectAllBarVM).toInstance(SelectAllBarViewModel).inSingletonScope();
+        this.bind(SA_TOKENS.selectionDialogVM).toInstance(SelectionProgressDialogViewModel).inSingletonScope();
+        this.bind(SA_TOKENS.feature).toInstance(SelectAllFeature).inSingletonScope();
+    }
+
+    init(dependencies: {
+        props: MainGateProps;
+        mainGate: DerivedPropsGate<MainGateProps>;
+        progressSrv: TaskProgressService;
+        config: DatagridConfig;
+    }): SelectAllModule {
+        const { props, config, mainGate, progressSrv } = dependencies;
 
-        const gateProvider = new GateProvider<SelectAllGateProps>(props);
-        this.setProps = props => gateProvider.setProps(props);
+        const ownGate = new GateProvider<MainGateProps>(props);
+        this.setProps = props => ownGate.setProps(props);
 
-        // Bind service deps
-        this.bind(TOKENS.selectAllGate).toConstant(gateProvider.gate);
-        this.bind(TOKENS.queryGate).toConstant(gateProvider.gate);
-        this.bind(TOKENS.query).toInstance(DatasourceService).inSingletonScope();
-        this.bind(TOKENS.selectAllProgressService).toInstance(ProgressService).inSingletonScope();
+        this.bind(CORE.config).toConstant(config);
+        // Bind main gate from main provider.
+        this.bind(CORE.mainGate).toConstant(mainGate);
+        this.bind(SA_TOKENS.progressService).toConstant(progressSrv);
+        this.bind(SA_TOKENS.gate).toConstant(ownGate.gate);
+        this.bind(DG.queryGate).toConstant(ownGate.gate);
+        this.bind(SA_TOKENS.enableSelectAll).toConstant(config.enableSelectAll);
 
-        // Finally bind select all service
-        this.bind(TOKENS.selectAllService).toInstance(SelectAllService).inSingletonScope();
+        this.postInit();
 
         return this;
     }
 
-    setProps = (_props: SelectAllGateProps): void => {
+    postInit(): void {
+        // Initialize feature
+        if (this.get(SA_TOKENS.enableSelectAll)) {
+            this.get(SA_TOKENS.feature);
+        }
+    }
+
+    setProps = (_props: MainGateProps): void => {
         throw new Error(`${this.id} is not initialized yet`);
     };
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/select-all/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/features/select-all/injection-hooks.ts
index fdb34406e8..8e46db7ed0 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/select-all/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/select-all/injection-hooks.ts
@@ -1,5 +1,5 @@
 import { createInjectionHooks } from "brandi-react";
-import { TOKENS } from "../../model/tokens";
+import { SA_TOKENS } from "../../model/tokens";
 
-export const [useSelectAllBarViewModel] = createInjectionHooks(TOKENS.selectAllBarVM);
-export const [useSelectionDialogViewModel] = createInjectionHooks(TOKENS.selectionDialogVM);
+export const [useSelectAllBarViewModel] = createInjectionHooks(SA_TOKENS.selectAllBarVM);
+export const [useSelectionDialogViewModel] = createInjectionHooks(SA_TOKENS.selectionDialogVM);
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts
index bfe4f153fc..519c6fe216 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts
@@ -1,4 +1,4 @@
 import { createInjectionHooks } from "brandi-react";
-import { TOKENS } from "../../model/tokens";
+import { DG_TOKENS } from "../../model/tokens";
 
-export const [useSelectionCounterViewModel] = createInjectionHooks(TOKENS.selectionCounterVM);
+export const [useSelectionCounterViewModel] = createInjectionHooks(DG_TOKENS.selectionCounterVM);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index 5a40e0d81b..0daaf02546 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -12,6 +12,7 @@ export interface DatagridConfig {
     selectionEnabled: boolean;
     selectorColumnEnabled: boolean;
     settingsStorageEnabled: boolean;
+    enableSelectAll: boolean;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
@@ -26,7 +27,8 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         selectAllCheckboxEnabled: props.showSelectAllToggle,
         selectionEnabled: isSelectionEnabled(props),
         selectorColumnEnabled: props.columnsHidable,
-        settingsStorageEnabled: isSettingsStorageEnabled(props)
+        settingsStorageEnabled: isSettingsStorageEnabled(props),
+        enableSelectAll: props.enableSelectAll
     });
 }
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
index cab8e70eac..1878ef2326 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -1,121 +1,124 @@
 import { WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
-import { itemCountAtom } from "@mendix/widget-plugin-grid/core/models/datasource.model";
 import { emptyStateWidgetsAtom } from "@mendix/widget-plugin-grid/core/models/empty-state.model";
-import { DatasourceService, ProgressService, SelectionCounterViewModel } from "@mendix/widget-plugin-grid/main";
-import { ClosableGateProvider } from "@mendix/widget-plugin-mobx-kit/ClosableGateProvider";
+import { DatasourceService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
+import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { Container } from "brandi";
-import { DatagridContainerProps } from "../../../typings/DatagridProps";
+import { Container, injected } from "brandi";
 import { MainGateProps } from "../../../typings/MainGateProps";
-import { SelectAllBarViewModel } from "../../features/select-all/SelectAllBar.viewModel";
-import { SelectionProgressDialogViewModel } from "../../features/select-all/SelectionProgressDialog.viewModel";
+import { EmptyPlaceholderViewModel } from "../../features/empty-message/EmptyPlaceholder.viewModel";
+import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
-import { DatagridConfig, datagridConfig } from "../configs/Datagrid.config";
-import { visibleColumnsCountAtom } from "../models/columns.model";
+import { DatagridConfig } from "../configs/Datagrid.config";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
-import { TOKENS } from "../tokens";
+import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens";
+
+injected(ColumnGroupStore, CORE.setupService, CORE.mainGate, CORE.config, DG.filterHost);
+injected(CombinedFilter, CORE.setupService, DG.combinedFilterConfig);
+injected(DatasourceParamsController, CORE.setupService, DG.query, DG.combinedFilter, CORE.columnsStore);
+injected(DatasourceService, CORE.setupService, DG.queryGate, DG.refreshInterval.optional);
+injected(DerivedLoaderController, DG.query, DG.exportProgressService, CORE.columnsStore, DG.loaderConfig);
+injected(EmptyPlaceholderViewModel, DG.emptyPlaceholderWidgets, CORE.atoms.itemCount, CORE.config);
+injected(GridBasicData, CORE.mainGate);
+injected(GridPersonalizationStore, CORE.setupService, CORE.mainGate, CORE.columnsStore, DG.filterHost);
+injected(PaginationController, CORE.setupService, DG.paginationConfig, DG.query);
+injected(WidgetFilterAPI, DG.parentChannelName, DG.filterHost);
+injected(emptyStateWidgetsAtom, CORE.mainGate, CORE.atoms.itemCount);
+
+injected(
+    SelectionCounterViewModel,
+    CORE.selection.selectedCount,
+    CORE.selection.selectedCounterTextsStore,
+    DG.selectionCounterCfg.optional
+);
 
 export class DatagridContainer extends Container {
     id = `DatagridContainer@${generateUUID()}`;
-    /**
-     * Setup container bindings.
-     * @remark Make sure not to bind things that already exist in root container.
-     */
-    init(props: DatagridContainerProps, root: Container, selectAllModule: Container): DatagridContainer {
+    constructor(root: Container) {
+        super();
         this.extend(root);
 
-        // Connect select all module
-        const selectAllService = selectAllModule.get(TOKENS.selectAllService);
-        const selectAllProgress = selectAllModule.get(TOKENS.selectAllProgressService);
-        // Bind select all service
-        this.bind(TOKENS.selectAllService).toConstant(selectAllService);
-        // Bind select all progress
-        this.bind(TOKENS.selectAllProgressService).toConstant(selectAllProgress);
-
-        // Create main gate
-        this.bind(TOKENS.exportProgressService).toInstance(ProgressService).inSingletonScope();
-        const exportProgress = this.get(TOKENS.exportProgressService);
-        const gateProvider = new ClosableGateProvider<MainGateProps>(props, function isLocked() {
-            return exportProgress.inProgress || selectAllProgress.inProgress;
-        });
-        this.setProps = props => gateProvider.setProps(props);
-
-        // Bind main gate
-        this.bind(TOKENS.mainGate).toConstant(gateProvider.gate);
-        this.bind(TOKENS.queryGate).toConstant(gateProvider.gate);
-
-        // Bind config
-        const config = datagridConfig(props);
-        this.bind(TOKENS.config).toConstant(config);
-
-        // Columns store
-        this.bind(TOKENS.columnsStore).toInstance(ColumnGroupStore).inSingletonScope();
-
         // Basic data store
-        this.bind(TOKENS.basicDate).toInstance(GridBasicData).inSingletonScope();
-
-        // Combined filter
-        this.bind(TOKENS.combinedFilter).toInstance(CombinedFilter).inSingletonScope();
-
-        // Export progress
-        this.bind(TOKENS.exportProgressService).toInstance(ProgressService).inSingletonScope();
-
+        this.bind(DG.basicDate).toInstance(GridBasicData).inSingletonScope();
+        // Columns store
+        this.bind(CORE.columnsStore).toInstance(ColumnGroupStore).inSingletonScope();
+        // Query service
+        this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
+        // Pagination service
+        this.bind(DG.paginationService).toInstance(PaginationController).inSingletonScope();
+        // Datasource params service
+        this.bind(DG.paramsService).toInstance(DatasourceParamsController).inSingletonScope();
         // FilterAPI
-        this.bind(TOKENS.filterAPI).toInstance(WidgetFilterAPI).inSingletonScope();
-
+        this.bind(DG.filterAPI).toInstance(WidgetFilterAPI).inSingletonScope();
         // Filter host
-        this.bind(TOKENS.filterHost).toInstance(CustomFilterHost).inSingletonScope();
-
-        // Datasource params service
-        this.bind(TOKENS.paramsService).toInstance(DatasourceParamsController).inSingletonScope();
-
+        this.bind(DG.filterHost).toInstance(CustomFilterHost).inSingletonScope();
+        // Combined filter
+        this.bind(DG.combinedFilter).toInstance(CombinedFilter).inSingletonScope();
         // Personalization service
-        this.bind(TOKENS.personalizationService).toInstance(GridPersonalizationStore).inSingletonScope();
+        this.bind(DG.personalizationService).toInstance(GridPersonalizationStore).inSingletonScope();
+        // Loader view model
+        this.bind(DG.loaderVM).toInstance(DerivedLoaderController).inSingletonScope();
+        // Selection counter view model
+        this.bind(DG.selectionCounterVM).toInstance(SelectionCounterViewModel).inSingletonScope();
+        // Empty placeholder
+        this.bind(DG.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inSingletonScope();
+        this.bind(DG.emptyPlaceholderWidgets).toInstance(emptyStateWidgetsAtom).inTransientScope();
+    }
 
-        // Query service
-        this.bind(TOKENS.query).toInstance(DatasourceService).inSingletonScope();
+    /**
+     * Setup container constants. If possible, declare all other bindings in the constructor.
+     * @remark Make sure not to bind things that already exist in root container.
+     */
+    init(dependencies: {
+        props: MainGateProps;
+        config: DatagridConfig;
+        mainGate: DerivedPropsGate<MainGateProps>;
+        exportProgressService: TaskProgressService;
+        selectAllModule: SelectAllModule;
+    }): DatagridContainer {
+        const { props, config, mainGate, exportProgressService, selectAllModule } = dependencies;
 
-        // Pagination service
-        this.bind(TOKENS.paginationService).toInstance(PaginationController).inSingletonScope();
+        // Main gate
 
-        // Events channel for child widgets
-        this.bind(TOKENS.parentChannelName).toConstant(config.filtersChannelName);
+        this.bind(CORE.mainGate).toConstant(mainGate);
+        this.bind(DG.queryGate).toConstant(mainGate);
 
-        // Loader view model
-        this.bind(TOKENS.loaderVM).toInstance(DerivedLoaderController).inSingletonScope();
+        // Export progress service
+        this.bind(DG.exportProgressService).toConstant(exportProgressService);
 
-        // Selection counter view model
-        this.bind(TOKENS.selectionCounterVM).toInstance(SelectionCounterViewModel).inSingletonScope();
+        // Config
+        this.bind(CORE.config).toConstant(config);
 
-        // Select all bar view model
-        this.bind(TOKENS.selectAllBarVM).toInstance(SelectAllBarViewModel).inSingletonScope();
+        // Connect select all module
+        this.bind(SA_TOKENS.selectionDialogVM).toConstant(selectAllModule.get(SA_TOKENS.selectionDialogVM));
+        this.bind(SA_TOKENS.selectAllBarVM).toConstant(selectAllModule.get(SA_TOKENS.selectAllBarVM));
 
-        // Selection progress dialog view model
-        this.bind(TOKENS.selectionDialogVM).toInstance(SelectionProgressDialogViewModel).inSingletonScope();
+        // Events channel for child widgets
+        this.bind(DG.parentChannelName).toConstant(config.filtersChannelName);
 
         // Bind refresh interval
-        this.bind(TOKENS.refreshInterval).toConstant(props.refreshInterval * 1000);
+        this.bind(DG.refreshInterval).toConstant(config.refreshIntervalMs);
 
         // Bind combined filter config
-        this.bind(TOKENS.combinedFilterConfig).toConstant({
+        this.bind(DG.combinedFilterConfig).toConstant({
             stableKey: props.name,
-            inputs: [this.get(TOKENS.filterHost), this.get(TOKENS.columnsStore)]
+            inputs: [this.get(DG.filterHost), this.get(CORE.columnsStore)]
         });
 
         // Bind loader config
-        this.bind(TOKENS.loaderConfig).toConstant({
+        this.bind(DG.loaderConfig).toConstant({
             showSilentRefresh: props.refreshInterval > 1,
             refreshIndicator: props.refreshIndicator
         });
 
         // Bind pagination config
-        this.bind(TOKENS.paginationConfig).toConstant({
+        this.bind(DG.paginationConfig).toConstant({
             pagination: props.pagination,
             showPagingButtons: props.showPagingButtons,
             showNumberOfRows: props.showNumberOfRows,
@@ -123,15 +126,7 @@ export class DatagridContainer extends Container {
         });
 
         // Bind selection counter position
-        this.bind(TOKENS.selectionCounterPosition).toConstant(props.selectionCounterPosition);
-
-        // Bind select all enabled flag
-        this.bind(TOKENS.enableSelectAll).toConstant(props.enableSelectAll);
-
-        // Atoms
-        this.bind(TOKENS.visibleColumnsCount).toInstance(visibleColumnsCountAtom).inTransientScope();
-        this.bind(TOKENS.visibleRowCount).toInstance(itemCountAtom).inTransientScope();
-        this.bind(TOKENS.emptyPlaceholderWidgets).toInstance(emptyStateWidgetsAtom).inTransientScope();
+        this.bind(DG.selectionCounterCfg).toConstant({ position: props.selectionCounterPosition });
 
         this.postInit(props, config);
 
@@ -139,20 +134,16 @@ export class DatagridContainer extends Container {
     }
 
     /** Post init hook for final configuration. */
-    private postInit(props: DatagridContainerProps, config: DatagridConfig): void {
+    private postInit(props: MainGateProps, config: DatagridConfig): void {
         // Make sure essential services are created upfront
-        this.get(TOKENS.paramsService);
-        this.get(TOKENS.paginationService);
+        this.get(DG.paramsService);
+        this.get(DG.paginationService);
 
         if (config.settingsStorageEnabled) {
-            this.get(TOKENS.personalizationService);
+            this.get(DG.personalizationService);
         }
 
         // Hydrate filters from props
-        this.get(TOKENS.combinedFilter).hydrate(props.datasource.filter);
+        this.get(DG.combinedFilter).hydrate(props.datasource.filter);
     }
-
-    setProps = (_props: MainGateProps): void => {
-        throw new Error(`${this.id} is not initialized yet`);
-    };
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
index f4c9e2ea37..b4cdcaef23 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
@@ -1,18 +1,70 @@
+import {
+    hasMoreItemsAtom,
+    isAllItemsPresentAtom,
+    itemCountAtom,
+    limitAtom,
+    offsetAtom,
+    totalCountAtom
+} from "@mendix/widget-plugin-grid/core/models/datasource.model";
+import {
+    isAllItemsSelectedAtom,
+    isCurrentPageSelectedAtom,
+    selectedCountMultiAtom,
+    selectionCounterTextsStore
+} from "@mendix/widget-plugin-grid/core/models/selection.model";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { Container } from "brandi";
+import { Container, injected } from "brandi";
+import { visibleColumnsCountAtom } from "../models/columns.model";
 import { DatagridSetupService } from "../services/DatagridSetup.service";
-import { TOKENS } from "../tokens";
+import { CORE_TOKENS as CORE } from "../tokens";
+
+// datasource
+injected(totalCountAtom, CORE.mainGate);
+injected(itemCountAtom, CORE.mainGate);
+injected(offsetAtom, CORE.mainGate);
+injected(limitAtom, CORE.mainGate);
+injected(hasMoreItemsAtom, CORE.mainGate);
+injected(visibleColumnsCountAtom, CORE.columnsStore);
+injected(isAllItemsPresentAtom, CORE.atoms.offset, CORE.atoms.hasMoreItems);
+
+// selection
+injected(
+    isAllItemsSelectedAtom,
+    CORE.selection.selectedCount,
+    CORE.atoms.itemCount,
+    CORE.atoms.totalCount,
+    CORE.atoms.isAllItemsPresent
+);
+injected(isCurrentPageSelectedAtom, CORE.mainGate);
+injected(selectedCountMultiAtom, CORE.mainGate);
+injected(selectionCounterTextsStore, CORE.mainGate, CORE.selection.selectedCount);
 
 /**
  * Root container for bindings that can be shared down the hierarchy.
- * Use only for bindings that needs to be shared across multiple containers.
- * @remark Don't bind things that depend on props here.
+ * Declare only bindings that needs to be shared across multiple containers.
+ * @remark Don't bind constants or other things that depend on props here.
  */
 export class RootContainer extends Container {
     id = `DatagridRootContainer@${generateUUID()}`;
 
     constructor() {
         super();
-        this.bind(TOKENS.setupService).toInstance(DatagridSetupService).inSingletonScope();
+        // The root setup host service
+        this.bind(CORE.setupService).toInstance(DatagridSetupService).inSingletonScope();
+
+        // datasource
+        this.bind(CORE.atoms.hasMoreItems).toInstance(hasMoreItemsAtom).inTransientScope();
+        this.bind(CORE.atoms.itemCount).toInstance(itemCountAtom).inTransientScope();
+        this.bind(CORE.atoms.limit).toInstance(limitAtom).inTransientScope();
+        this.bind(CORE.atoms.offset).toInstance(offsetAtom).inTransientScope();
+        this.bind(CORE.atoms.totalCount).toInstance(totalCountAtom).inTransientScope();
+        this.bind(CORE.atoms.visibleColumnsCount).toInstance(visibleColumnsCountAtom).inTransientScope();
+        this.bind(CORE.atoms.isAllItemsPresent).toInstance(isAllItemsPresentAtom).inTransientScope();
+
+        // selection
+        this.bind(CORE.selection.selectedCount).toInstance(selectedCountMultiAtom).inTransientScope();
+        this.bind(CORE.selection.isCurrentPageSelected).toInstance(isCurrentPageSelectedAtom).inTransientScope();
+        this.bind(CORE.selection.selectedCounterTextsStore).toInstance(selectionCounterTextsStore).inTransientScope();
+        this.bind(CORE.selection.isAllItemsSelected).toInstance(isAllItemsSelectedAtom).inTransientScope();
     }
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index 9b8a0d3efa..b23babaf98 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -1,11 +1,11 @@
 import { createInjectionHooks } from "brandi-react";
-import { TOKENS } from "../tokens";
+import { CORE_TOKENS as CORE, DG_TOKENS as DG } from "../tokens";
 
-export const [useBasicData] = createInjectionHooks(TOKENS.basicDate);
-export const [useColumnsStore] = createInjectionHooks(TOKENS.columnsStore);
-export const [useDatagridConfig] = createInjectionHooks(TOKENS.config);
-export const [useDatagridFilterAPI] = createInjectionHooks(TOKENS.filterAPI);
-export const [useExportProgressService] = createInjectionHooks(TOKENS.exportProgressService);
-export const [useLoaderViewModel] = createInjectionHooks(TOKENS.loaderVM);
-export const [useMainGate] = createInjectionHooks(TOKENS.mainGate);
-export const [usePaginationService] = createInjectionHooks(TOKENS.paginationService);
+export const [useBasicData] = createInjectionHooks(DG.basicDate);
+export const [useColumnsStore] = createInjectionHooks(CORE.columnsStore);
+export const [useDatagridConfig] = createInjectionHooks(CORE.config);
+export const [useDatagridFilterAPI] = createInjectionHooks(DG.filterAPI);
+export const [useExportProgressService] = createInjectionHooks(DG.exportProgressService);
+export const [useLoaderViewModel] = createInjectionHooks(DG.loaderVM);
+export const [useMainGate] = createInjectionHooks(CORE.mainGate);
+export const [usePaginationService] = createInjectionHooks(DG.paginationService);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts
index d82c8bf1fe..cdc6f073f4 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts
@@ -3,26 +3,46 @@ import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { Container } from "brandi";
 import { useEffect } from "react";
 import { DatagridContainerProps } from "../../../typings/DatagridProps";
+import { MainGateProps } from "../../../typings/MainGateProps";
 import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
+import { datagridConfig } from "../configs/Datagrid.config";
 import { DatagridContainer } from "../containers/Datagrid.container";
 import { RootContainer } from "../containers/Root.container";
-import { TOKENS } from "../tokens";
+import { MainGateProvider } from "../services/MainGateProvider.service";
+import { CORE_TOKENS as CORE } from "../tokens";
 
 export function useDatagridContainer(props: DatagridContainerProps): Container {
-    const [container, selectAllModule] = useConst(function init(): [DatagridContainer, SelectAllModule] {
+    const [container, selectAllModule, mainProvider] = useConst(function init(): [
+        DatagridContainer,
+        SelectAllModule,
+        MainGateProvider<MainGateProps>
+    ] {
         const root = new RootContainer();
-        const selectAllModule = new SelectAllModule().init(props, root);
-        const container = new DatagridContainer().init(props, root, selectAllModule);
+        const config = datagridConfig(props);
+        const mainProvider = new MainGateProvider(props);
+        const selectAllModule = new SelectAllModule(root).init({
+            props,
+            config,
+            mainGate: mainProvider.gate,
+            progressSrv: mainProvider.selectAllProgress
+        });
+        const container = new DatagridContainer(root).init({
+            props,
+            config,
+            selectAllModule,
+            mainGate: mainProvider.gate,
+            exportProgressService: mainProvider.exportProgress
+        });
 
-        return [container, selectAllModule];
+        return [container, selectAllModule, mainProvider];
     });
 
     // Run setup hooks on mount
-    useSetup(() => container.get(TOKENS.setupService));
+    useSetup(() => container.get(CORE.setupService));
 
     // Push props through the gates
     useEffect(() => {
-        container.setProps(props);
+        mainProvider.setProps(props);
         selectAllModule.setProps(props);
     });
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts b/packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts
new file mode 100644
index 0000000000..01d098442a
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts
@@ -0,0 +1,20 @@
+import { ProgressService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
+import { GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+
+export class MainGateProvider<T> extends GateProvider<T> {
+    selectAllProgress: TaskProgressService;
+    exportProgress: TaskProgressService;
+
+    constructor(props: T) {
+        super(props);
+        this.selectAllProgress = new ProgressService();
+        this.exportProgress = new ProgressService();
+    }
+
+    setProps(props: T): void {
+        if (this.exportProgress.inProgress) return;
+        if (this.selectAllProgress.inProgress) return;
+
+        super.setProps(props);
+    }
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index c970f1b089..8b4ecf3e3a 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -1,115 +1,107 @@
-import { FilterAPI, WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context";
+import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter, CombinedFilterConfig } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
-import { itemCountAtom } from "@mendix/widget-plugin-grid/core/models/datasource.model";
-import { emptyStateWidgetsAtom } from "@mendix/widget-plugin-grid/core/models/empty-state.model";
+import { QueryService, SelectAllService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
+import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
 import {
-    DatasourceService,
-    QueryService,
-    SelectAllService,
-    SelectionCounterViewModel,
-    TaskProgressService
-} from "@mendix/widget-plugin-grid/main";
-import { ComputedAtom, DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
-import { injected, token } from "brandi";
+    BarStore,
+    ObservableSelectAllTexts,
+    SelectAllEvents
+} from "@mendix/widget-plugin-grid/select-all/select-all.model";
+import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
+import { ComputedAtom, DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
+import { token } from "brandi";
 import { ListValue } from "mendix";
 import { ReactNode } from "react";
-import { SelectionCounterPositionEnum } from "../../typings/DatagridProps";
 import { MainGateProps } from "../../typings/MainGateProps";
 import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel";
 import { SelectAllBarViewModel } from "../features/select-all/SelectAllBar.viewModel";
-import { SelectAllGateProps } from "../features/select-all/SelectAllGateProps";
 import { SelectionProgressDialogViewModel } from "../features/select-all/SelectionProgressDialog.viewModel";
 import { ColumnGroupStore } from "../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../helpers/state/GridPersonalizationStore";
 import { DatasourceParamsController } from "../model/services/DatasourceParamsController";
 import { DatagridConfig } from "./configs/Datagrid.config";
-import { visibleColumnsCountAtom } from "./models/columns.model";
+import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./services/PaginationController";
 
-/** Tokens to resolve dependencies from the container. Please keep in alphabetical order. */
-export const TOKENS = {
-    basicDate: token<GridBasicData>("GridBasicData"),
+/** Tokens to resolve dependencies from the container. */
+
+/** Core tokens shared across containers through root container. */
+export const CORE_TOKENS = {
+    atoms: {
+        hasMoreItems: token<ComputedAtom<boolean | undefined>>("@computed:hasMoreItems"),
+        itemCount: token<ComputedAtom<number>>("@computed:itemCount"),
+        limit: token<ComputedAtom<number>>("@computed:limit"),
+        offset: token<ComputedAtom<number>>("@computed:offset"),
+        totalCount: token<ComputedAtom<number>>("@computed:totalCount"),
+        visibleColumnsCount: token<ComputedAtom<number>>("@computed:visibleColumnsCount"),
+        isAllItemsPresent: token<ComputedAtom<boolean>>("@computed:isAllItemsPresent")
+    },
     columnsStore: token<ColumnGroupStore>("ColumnGroupStore"),
+
+    config: token<DatagridConfig>("DatagridConfig"),
+
+    mainGate: token<DerivedPropsGate<MainGateProps>>("MainGate"),
+
+    selection: {
+        selectedCount: token<ComputedAtom<number>>("@computed:selectedCount"),
+        isAllItemsSelected: token<ComputedAtom<boolean>>("@computed:isAllItemsSelected"),
+        isCurrentPageSelected: token<ComputedAtom<boolean>>("@computed:isCurrentPageSelected"),
+        selectedCounterTextsStore: token<{
+            clearSelectionButtonLabel: string;
+            selectedCountText: string;
+        }>("@store:selectedCounterTextsStore")
+    },
+
+    setupService: token<DatagridSetupService>("DatagridSetupService")
+};
+
+/** Datagrid tokens. */
+export const DG_TOKENS = {
+    basicDate: token<GridBasicData>("GridBasicData"),
+
     combinedFilter: token<CombinedFilter>("CombinedFilter"),
     combinedFilterConfig: token<CombinedFilterConfig>("CombinedFilterKey"),
-    config: token<DatagridConfig>("DatagridConfig"),
+
     emptyPlaceholderVM: token<EmptyPlaceholderViewModel>("EmptyPlaceholderViewModel"),
     emptyPlaceholderWidgets: token<ComputedAtom<ReactNode>>("@computed:emptyPlaceholder"),
-    enableSelectAll: token<boolean>("enableSelectAll"),
+
     exportProgressService: token<TaskProgressService>("ExportProgressService"),
+
     filterAPI: token<FilterAPI>("FilterAPI"),
     filterHost: token<CustomFilterHost>("FilterHost"),
+
     loaderConfig: token<DerivedLoaderControllerConfig>("DatagridLoaderConfig"),
     loaderVM: token<DerivedLoaderController>("DatagridLoaderViewModel"),
-    mainGate: token<DerivedPropsGate<MainGateProps>>("MainGate"),
+
     paginationConfig: token<PaginationConfig>("PaginationConfig"),
     paginationService: token<PaginationController>("PaginationService"),
-    paramsService: token<DatasourceParamsController>("DatagridParamsService"),
+
     parentChannelName: token<string>("parentChannelName"),
+    refreshInterval: token<number>("refreshInterval"),
+
+    paramsService: token<DatasourceParamsController>("DatagridParamsService"),
     personalizationService: token<GridPersonalizationStore>("GridPersonalizationStore"),
+
     query: token<QueryService>("QueryService"),
     queryGate: token<DerivedPropsGate<{ datasource: ListValue }>>("GateForQueryService"),
-    refreshInterval: token<number>("refreshInterval"),
+
+    selectionCounterCfg: token<{ position: "top" | "bottom" | "off" }>("SelectionCounterConfig"),
+    selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel")
+};
+
+/** "Select all" module tokens. */
+export const SA_TOKENS = {
+    barStore: token<BarStore>("SelectAllBarStore"),
+    emitter: token<Emitter<SelectAllEvents>>("SelectAllEmitter"),
+    gate: token<DerivedPropsGate<MainGateProps>>("MainGateForSelectAllContainer"),
+    progressService: token<TaskProgressService>("SelectAllProgressService"),
+    selectAllTextsStore: token<ObservableSelectAllTexts>("SelectAllTextsStore"),
     selectAllBarVM: token<SelectAllBarViewModel>("SelectAllBarViewModel"),
-    selectAllGate: token<DerivedPropsGate<SelectAllGateProps>>("GateForSelectAllService"),
-    selectAllProgressService: token<TaskProgressService>("SelectAllProgressService"),
     selectAllService: token<SelectAllService>("SelectAllService"),
-    selectionCounterPosition: token<SelectionCounterPositionEnum>("SelectionCounterPositionEnum"),
-    selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
     selectionDialogVM: token<SelectionProgressDialogViewModel>("SelectionProgressDialogViewModel"),
-    setupService: token<SetupComponentHost>("DatagridSetupHost"),
-    visibleColumnsCount: token<ComputedAtom<number>>("@computed:visibleColumnsCount"),
-    visibleRowCount: token<ComputedAtom<number>>("@computed:visibleRowCount")
+    enableSelectAll: token<boolean>("enableSelectAllFeatureFlag"),
+    feature: token<SelectAllFeature>("SelectAllFeature")
 };
-
-/** Inject dependencies */
-
-injected(ColumnGroupStore, TOKENS.setupService, TOKENS.mainGate, TOKENS.config, TOKENS.filterHost);
-
-injected(GridBasicData, TOKENS.mainGate);
-
-injected(CombinedFilter, TOKENS.setupService, TOKENS.combinedFilterConfig);
-
-injected(WidgetFilterAPI, TOKENS.parentChannelName, TOKENS.filterHost);
-
-injected(DatasourceParamsController, TOKENS.setupService, TOKENS.query, TOKENS.combinedFilter, TOKENS.columnsStore);
-
-injected(GridPersonalizationStore, TOKENS.setupService, TOKENS.mainGate, TOKENS.columnsStore, TOKENS.filterHost);
-
-injected(PaginationController, TOKENS.setupService, TOKENS.paginationConfig, TOKENS.query);
-
-injected(DatasourceService, TOKENS.setupService, TOKENS.queryGate, TOKENS.refreshInterval.optional);
-
-injected(DerivedLoaderController, TOKENS.query, TOKENS.exportProgressService, TOKENS.columnsStore, TOKENS.loaderConfig);
-
-injected(SelectionCounterViewModel, TOKENS.mainGate, TOKENS.selectionCounterPosition);
-
-injected(SelectAllService, TOKENS.setupService, TOKENS.selectAllGate, TOKENS.query, TOKENS.selectAllProgressService);
-
-injected(
-    SelectAllBarViewModel,
-    TOKENS.setupService,
-    TOKENS.mainGate,
-    TOKENS.selectAllService,
-    TOKENS.selectionCounterVM,
-    TOKENS.enableSelectAll
-);
-
-injected(
-    SelectionProgressDialogViewModel,
-    TOKENS.setupService,
-    TOKENS.mainGate,
-    TOKENS.selectAllProgressService,
-    TOKENS.selectAllService
-);
-
-injected(EmptyPlaceholderViewModel, TOKENS.emptyPlaceholderWidgets, TOKENS.visibleColumnsCount, TOKENS.config);
-
-injected(visibleColumnsCountAtom, TOKENS.columnsStore);
-
-injected(itemCountAtom, TOKENS.mainGate);
-
-injected(emptyStateWidgetsAtom, TOKENS.mainGate, TOKENS.visibleRowCount);
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index 2f08c4fc2a..ba1c3bbba6 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -3,28 +3,27 @@ import { DatagridContainerProps } from "./DatagridProps";
 /** Type to declare props available through main gate. */
 export type MainGateProps = Pick<
     DatagridContainerProps,
-    | "name"
-    | "datasource"
-    | "refreshInterval"
-    | "refreshIndicator"
-    | "itemSelection"
+    | "allSelectedText"
+    | "cancelSelectionLabel"
+    | "clearSelectionButtonLabel"
     | "columns"
-    | "configurationStorageType"
-    | "storeFiltersInPersonalization"
     | "configurationAttribute"
+    | "configurationStorageType"
+    | "datasource"
+    | "datasource"
+    | "emptyPlaceholder"
+    | "enableSelectAll"
+    | "itemSelection"
+    | "name"
     | "pageSize"
     | "pagination"
-    | "showPagingButtons"
-    | "showNumberOfRows"
-    | "clearSelectionButtonLabel"
+    | "refreshIndicator"
+    | "refreshInterval"
+    | "selectAllRowsLabel"
     | "selectAllTemplate"
     | "selectAllText"
-    | "itemSelection"
-    | "datasource"
-    | "allSelectedText"
-    | "selectAllRowsLabel"
-    | "cancelSelectionLabel"
     | "selectionCounterPosition"
-    | "enableSelectAll"
-    | "emptyPlaceholder"
+    | "showNumberOfRows"
+    | "showPagingButtons"
+    | "storeFiltersInPersonalization"
 >;
diff --git a/packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts b/packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts
index df88d3cd49..23592fe084 100644
--- a/packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts
+++ b/packages/shared/widget-plugin-grid/src/core/__tests__/selectedCountMulti.spec.ts
@@ -1,5 +1,5 @@
 import { configure, observable } from "mobx";
-import { selectedCountMulti } from "../models/selection.model.js";
+import { selectedCountMultiAtom } from "../models/selection.model.js";
 
 describe("selectedCountMulti", () => {
     configure({
@@ -7,30 +7,32 @@ describe("selectedCountMulti", () => {
     });
 
     it("returns selection length when type is Multi", () => {
-        const gate = observable({ itemSelection: { type: "Multi", selection: [{ id: "1" }, { id: "2" }] } });
-        const atom = selectedCountMulti(gate);
+        const gate = observable({
+            props: { itemSelection: { type: "Multi" as const, selection: [{ id: "1" }, { id: "2" }] } }
+        });
+        const atom = selectedCountMultiAtom(gate);
         expect(atom.get()).toBe(2);
     });
 
     it("returns -1 when type is Single", () => {
-        const gate = observable({ itemSelection: { type: "Single", selection: [] } });
-        const atom = selectedCountMulti(gate);
+        const gate = observable({ props: { itemSelection: { type: "Single" as const, selection: [] } } });
+        const atom = selectedCountMultiAtom(gate);
         expect(atom.get()).toBe(-1);
     });
 
     it("returns -1 when itemSelection is undefined", () => {
-        const gate = observable({});
-        const atom = selectedCountMulti(gate);
+        const gate = observable({ props: {} });
+        const atom = selectedCountMultiAtom(gate);
         expect(atom.get()).toBe(-1);
     });
 
     it("updates reactively when selection changes", () => {
-        const gate = observable({ itemSelection: { type: "Multi", selection: [{ id: "1" }] } });
-        const atom = selectedCountMulti(gate);
+        const gate = observable({ props: { itemSelection: { type: "Multi" as const, selection: [{ id: "1" }] } } });
+        const atom = selectedCountMultiAtom(gate);
 
         expect(atom.get()).toBe(1);
 
-        gate.itemSelection.selection.push({ id: "2" });
+        gate.props.itemSelection.selection.push({ id: "2" });
         expect(atom.get()).toBe(2);
     });
 });
diff --git a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
index 7c2cfe811f..0a023e8e0b 100644
--- a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
+++ b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
@@ -2,16 +2,22 @@ import { atomFactory, ComputedAtom, DerivedPropsGate } from "@mendix/widget-plug
 import { DynamicValue } from "mendix";
 import { computed, observable } from "mobx";
 
+type Item = { id: string };
+type Selection = { type: "Single" } | { type: "Multi"; selection: Item[] };
+
 /**
  * Returns selected count in multi-selection mode and -1 otherwise.
  * @injectable
  */
-export function selectedCountMulti(gate: {
-    itemSelection?: { type: string; selection: { length: number } };
-}): ComputedAtom<number> {
+export function selectedCountMultiAtom(
+    gate: DerivedPropsGate<{
+        itemSelection?: Selection;
+    }>
+): ComputedAtom<number> {
     return computed(() => {
-        if (gate.itemSelection?.type === "Multi") {
-            return gate.itemSelection.selection.length;
+        const { itemSelection } = gate.props;
+        if (itemSelection?.type === "Multi") {
+            return itemSelection.selection.length;
         }
         return -1;
     });
@@ -43,8 +49,6 @@ export const isAllItemsSelectedAtom = atomFactory(
     isAllItemsSelected
 );
 
-type Item = { id: string };
-
 /** Return true if all items on current page selected. */
 export function isCurrentPageSelected(selection: Item[], items: Item[]): boolean {
     const pageIds = new Set(items.map(item => item.id));
@@ -58,7 +62,7 @@ export function isCurrentPageSelected(selection: Item[], items: Item[]): boolean
  */
 export function isCurrentPageSelectedAtom(
     gate: DerivedPropsGate<{
-        itemSelection?: { type: "Single" } | { type: "Multi"; selection: Item[] };
+        itemSelection?: Selection;
         datasource: { items?: Item[] };
     }>
 ): ComputedAtom<boolean> {
@@ -78,7 +82,7 @@ interface ObservableSelectorTexts {
     selectedCountText: string;
 }
 
-export function selectedCounterTextsStore(
+export function selectionCounterTextsStore(
     gate: DerivedPropsGate<{
         clearSelectionButtonLabel?: DynamicValue<string>;
         selectedCountTemplateSingular?: DynamicValue<string>;
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
index 50ab21528a..974e61b7ec 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
@@ -2,7 +2,7 @@ import { DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
 import { ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { action, computed, makeObservable, observable, when } from "mobx";
 import { QueryService } from "../interfaces/QueryService";
-import { ServiceEvents } from "./select-all.model";
+import { SelectAllEvents } from "./select-all.model";
 
 interface DynamicProps {
     itemSelection?: SelectionMultiValue | SelectionSingleValue;
@@ -16,7 +16,7 @@ export class SelectAllService {
     constructor(
         private gate: DerivedPropsGate<DynamicProps>,
         private query: QueryService,
-        private progress: Emitter<ServiceEvents>
+        private progress: Emitter<SelectAllEvents>
     ) {
         type PrivateMembers = "locked";
         makeObservable<this, PrivateMembers>(this, {
@@ -134,6 +134,8 @@ export class SelectAllService {
             performance.mark("SelectAll_End");
             const measure1 = performance.measure("Measure1", "SelectAll_Start", "SelectAll_End");
             console.debug(`Data grid 2: 'select all' took ${(measure1.duration / 1000).toFixed(2)} seconds.`);
+
+            this.progress.emit("done", { success });
             // eslint-disable-next-line no-unsafe-finally
             return { success };
         }
diff --git a/packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts b/packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts
index 183d6bb42b..3e8f02d5ba 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/select-all.feature.ts
@@ -1,22 +1,34 @@
-import { ComputedAtom, disposeBatch, Emitter, SetupComponent } from "@mendix/widget-plugin-mobx-kit/main";
+import {
+    ComputedAtom,
+    disposeBatch,
+    Emitter,
+    SetupComponent,
+    SetupComponentHost
+} from "@mendix/widget-plugin-mobx-kit/main";
 
+import { TaskProgressService } from "../main";
 import {
     BarStore,
     SelectAllEvents,
     SelectService,
     setupBarStore,
+    setupProgressService,
     setupSelectService,
     setupVisibilityEvents
 } from "./select-all.model";
 
 export class SelectAllFeature implements SetupComponent {
     constructor(
+        host: SetupComponentHost,
         private emitter: Emitter<SelectAllEvents>,
         private service: SelectService,
         private store: BarStore,
+        private progress: TaskProgressService,
         private isCurrentPageSelected: ComputedAtom<boolean>,
         private isAllSelected: ComputedAtom<boolean>
-    ) {}
+    ) {
+        host.add(this);
+    }
 
     setup(): () => void {
         const [add, disposeAll] = disposeBatch();
@@ -24,6 +36,7 @@ export class SelectAllFeature implements SetupComponent {
         add(setupBarStore(this.store, this.emitter));
         add(setupSelectService(this.service, this.emitter));
         add(setupVisibilityEvents(this.isCurrentPageSelected, this.isAllSelected, this.emitter));
+        add(setupProgressService(this.progress, this.emitter));
 
         return disposeAll;
     }
diff --git a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
index 8adcddbb28..f2d2adea55 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
@@ -33,7 +33,7 @@ export function selectAllEmitter(): Emitter<SelectAllEvents> {
     return createEmitter<SelectAllEvents>();
 }
 
-interface ObservableSelectAllTexts {
+export interface ObservableSelectAllTexts {
     selectionStatus: string;
     selectAllLabel: string;
 }
diff --git a/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts b/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts
index 88bb7ec9a3..7719ceb394 100644
--- a/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts
+++ b/packages/shared/widget-plugin-grid/src/selection-counter/SelectionCounter.viewModel-atoms.ts
@@ -9,18 +9,18 @@ export class SelectionCounterViewModel {
             clearSelectionButtonLabel: string;
             selectedCountText: string;
         },
-        private position: "top" | "bottom" | "off"
+        private options: { position: "top" | "bottom" | "off" } = { position: "top" }
     ) {
         makeAutoObservable(this);
     }
 
     get isTopCounterVisible(): boolean {
-        if (this.position !== "top") return false;
+        if (this.options.position !== "top") return false;
         return this.selected.get() > 0;
     }
 
     get isBottomCounterVisible(): boolean {
-        if (this.position !== "bottom") return false;
+        if (this.options.position !== "bottom") return false;
         return this.selected.get() > 0;
     }
 
diff --git a/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts b/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts
index c5e607546c..a53f5d1ae8 100644
--- a/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts
+++ b/packages/shared/widget-plugin-grid/src/selection-counter/__tests__/SelectionCounter.viewModel.spec.ts
@@ -6,7 +6,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns value from selected atom", () => {
             const selected = computed(() => 5);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "5 items selected" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "top" });
 
             expect(viewModel.selectedCount).toBe(5);
         });
@@ -14,7 +14,7 @@ describe("SelectionCounterViewModel", () => {
         it("updates reactively when atom changes", () => {
             const selectedBox = observable.box(3);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
-            const viewModel = new SelectionCounterViewModel(selectedBox, texts, "top");
+            const viewModel = new SelectionCounterViewModel(selectedBox, texts, { position: "top" });
 
             expect(viewModel.selectedCount).toBe(3);
 
@@ -27,7 +27,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns value from texts object", () => {
             const selected = computed(() => 5);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "5 items selected" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "top" });
 
             expect(viewModel.selectedCountText).toBe("5 items selected");
         });
@@ -37,7 +37,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns value from texts object", () => {
             const selected = computed(() => 0);
             const texts = { clearSelectionButtonLabel: "Clear selection", selectedCountText: "" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "top" });
 
             expect(viewModel.clearButtonLabel).toBe("Clear selection");
         });
@@ -47,7 +47,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns true when position is top and selectedCount > 0", () => {
             const selected = computed(() => 5);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "top" });
 
             expect(viewModel.isTopCounterVisible).toBe(true);
         });
@@ -55,7 +55,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns false when position is top but selectedCount is 0", () => {
             const selected = computed(() => 0);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "top" });
 
             expect(viewModel.isTopCounterVisible).toBe(false);
         });
@@ -63,7 +63,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns false when position is not top", () => {
             const selected = computed(() => 5);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "bottom");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "bottom" });
 
             expect(viewModel.isTopCounterVisible).toBe(false);
         });
@@ -73,7 +73,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns true when position is bottom and selectedCount > 0", () => {
             const selected = computed(() => 5);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "bottom");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "bottom" });
 
             expect(viewModel.isBottomCounterVisible).toBe(true);
         });
@@ -81,7 +81,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns false when position is bottom but selectedCount is 0", () => {
             const selected = computed(() => 0);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "bottom");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "bottom" });
 
             expect(viewModel.isBottomCounterVisible).toBe(false);
         });
@@ -89,7 +89,7 @@ describe("SelectionCounterViewModel", () => {
         it("returns false when position is not bottom", () => {
             const selected = computed(() => 5);
             const texts = { clearSelectionButtonLabel: "Clear", selectedCountText: "text" };
-            const viewModel = new SelectionCounterViewModel(selected, texts, "top");
+            const viewModel = new SelectionCounterViewModel(selected, texts, { position: "top" });
 
             expect(viewModel.isBottomCounterVisible).toBe(false);
         });

From 840e482af90d05ce5629ef1209bd3983f4acc5ac Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Thu, 13 Nov 2025 15:34:56 +0100
Subject: [PATCH 05/21] style: fix comment

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../datagrid-web/src/model/containers/Root.container.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
index b4cdcaef23..277cf65a7c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
@@ -42,7 +42,7 @@ injected(selectionCounterTextsStore, CORE.mainGate, CORE.selection.selectedCount
 /**
  * Root container for bindings that can be shared down the hierarchy.
  * Declare only bindings that needs to be shared across multiple containers.
- * @remark Don't bind constants or other things that depend on props here.
+ * @remark Don't bind constants or directly prop-dependent values here. Prop-derived atoms/stores via dependency injection are acceptable.
  */
 export class RootContainer extends Container {
     id = `DatagridRootContainer@${generateUUID()}`;

From af826255f696cc5c3c63dd0372f26e03c2119dd7 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Thu, 13 Nov 2025 16:37:42 +0100
Subject: [PATCH 06/21] style: fix comments & type

---
 .../src/model/services/MainGateProvider.service.ts          | 4 ++++
 .../pluggableWidgets/datagrid-web/typings/MainGateProps.ts  | 1 -
 .../widget-plugin-grid/src/select-all/SelectAll.service.ts  | 6 +++---
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts b/packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts
index 01d098442a..99552b2222 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/services/MainGateProvider.service.ts
@@ -11,6 +11,10 @@ export class MainGateProvider<T> extends GateProvider<T> {
         this.exportProgress = new ProgressService();
     }
 
+    /**
+     * @remark
+     * To avoid unwanted UI rerenders, we block prop updates during the "select all" action or export.
+     */
     setProps(props: T): void {
         if (this.exportProgress.inProgress) return;
         if (this.selectAllProgress.inProgress) return;
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index ba1c3bbba6..de4af19873 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -10,7 +10,6 @@ export type MainGateProps = Pick<
     | "configurationAttribute"
     | "configurationStorageType"
     | "datasource"
-    | "datasource"
     | "emptyPlaceholder"
     | "enableSelectAll"
     | "itemSelection"
diff --git a/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts b/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
index 974e61b7ec..dd88e9d319 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/SelectAll.service.ts
@@ -118,15 +118,15 @@ export class SelectAllService {
                 console.error(error);
             }
         } finally {
-            // Restore init view
-            // This step should be done before loadend to avoid UI flickering
+            // Restore init view. This step should be done before loadend to avoid UI flickering.
             await this.query.fetchPage({
                 limit: initLimit,
                 offset: initOffset
             });
+            // Reload selection to make sure setSelection is working as expected.
             await this.reloadSelection();
+
             this.progress.emit("loadend");
-            // Reload selection to make sure setSelection is working as expected.
             this.selection?.setSelection(success ? allItems : initSelection);
             this.locked = false;
             this.abortController = undefined;

From 1602b82ba827c5ee7d65df5362ea21c5dbce11e8 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Mon, 17 Nov 2025 09:47:25 +0100
Subject: [PATCH 07/21] fix: update test types

---
 .../datagrid-web/src/components/__tests__/Table.spec.tsx       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
index 8f9f717f6f..c0d379ab1e 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
@@ -137,8 +137,7 @@ describe.skip("Table", () => {
 
     it("renders the structure correctly with empty placeholder", () => {
         const component = renderWithRootContext({
-            ...mockWidgetProps(),
-            emptyPlaceholderRenderer: renderWrapper => renderWrapper(<div />)
+            ...mockWidgetProps()
         });
 
         expect(component.asFragment()).toMatchSnapshot();

From 763553cd152a501214c5600f3be79402bf09d1dd Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Mon, 17 Nov 2025 14:09:30 +0100
Subject: [PATCH 08/21] refactor: rewrite dg pagination

---
 .../datagrid-web/src/Datagrid.tsx             | 27 +-------
 .../datagrid-web/src/components/GridBody.tsx  | 27 ++++----
 .../src/components/Pagination.tsx             | 25 +++++++
 .../src/components/RowsRenderer.tsx           |  1 -
 .../datagrid-web/src/components/Widget.tsx    | 65 ++-----------------
 .../src/components/WidgetFooter.tsx           | 29 +++++----
 .../src/components/WidgetHeader.tsx           | 33 +++++++---
 .../src/components/WidgetHeaderContext.tsx    | 33 ----------
 .../src/components/WidgetTopBar.tsx           | 22 +++----
 .../src/helpers/SelectActionHelper.ts         | 12 ++--
 .../datagrid-web/src/helpers/root-context.ts  |  4 +-
 .../src/model/configs/Datagrid.config.ts      | 14 ++--
 .../model/containers/Datagrid.container.ts    | 18 ++++-
 .../src/model/hooks/injection-hooks.ts        |  1 +
 .../model/services/PaginationController.ts    | 16 ++++-
 .../model/services/SelectionGate.service.ts   | 20 ++++++
 .../datagrid-web/src/model/tokens.ts          | 17 +++--
 .../datagrid-web/src/utils/test-utils.tsx     |  7 --
 .../datagrid-web/typings/MainGateProps.ts     |  1 +
 .../src/interfaces/MultiSelectionService.ts   | 23 +++++++
 .../src/interfaces/SelectionDynamicProps.ts   |  7 ++
 .../src/interfaces/SelectionHelperService.ts  |  4 ++
 .../src/interfaces/SingleSelectionService.ts  |  8 +++
 .../shared/widget-plugin-grid/src/main.ts     |  4 ++
 .../src/selection/context.ts                  | 30 +++------
 .../src/selection/createSelectionHelper.ts    | 61 +++++++++++++++++
 .../src/selection/helpers.ts                  | 10 +--
 .../src/selection/select-action-handler.ts    |  4 +-
 .../widget-plugin-mobx-kit/src/MappedGate.ts  | 16 +++++
 .../shared/widget-plugin-mobx-kit/src/main.ts |  1 +
 30 files changed, 320 insertions(+), 220 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/components/Pagination.tsx
 delete mode 100644 packages/pluggableWidgets/datagrid-web/src/components/WidgetHeaderContext.tsx
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/interfaces/MultiSelectionService.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/interfaces/SingleSelectionService.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
 create mode 100644 packages/shared/widget-plugin-mobx-kit/src/MappedGate.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 49cfaaa2aa..3cfb003e7e 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -1,6 +1,5 @@
 import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
-import { useSelectionHelper } from "@mendix/widget-plugin-grid/selection";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { ContainerProvider } from "brandi-react";
@@ -9,7 +8,6 @@ import { ReactElement, useCallback, useMemo } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
-import { WidgetHeaderContext } from "./components/WidgetHeaderContext";
 import { useDataExport } from "./features/data-export/useDataExport";
 import { useCellEventsController } from "./features/row-interaction/CellEventsController";
 import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
@@ -21,26 +19,20 @@ import {
     useExportProgressService,
     useLoaderViewModel,
     useMainGate,
-    usePaginationService
+    useSelectionHelper
 } from "./model/hooks/injection-hooks";
 import { useDatagridContainer } from "./model/hooks/useDatagridContainer";
 
 const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
     const gate = useMainGate();
     const columnsStore = useColumnsStore();
-    const paginationService = usePaginationService();
     const exportProgress = useExportProgressService();
     const loaderVM = useLoaderViewModel();
     const items = gate.props.datasource.items ?? [];
 
     const [abortExport] = useDataExport(props, columnsStore, exportProgress);
 
-    const selectionHelper = useSelectionHelper(
-        gate.props.itemSelection,
-        gate.props.datasource,
-        props.onSelectionChange,
-        props.keepSelection ? "always keep" : "always clear"
-    );
+    const selectionHelper = useSelectionHelper();
 
     const selectActionHelper = useSelectActionHelper(props, selectionHelper);
 
@@ -92,27 +84,14 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                     [columnsStore.columnFilters]
                 )}
                 headerTitle={props.filterSectionTitle?.value}
-                headerContent={
-                    props.filtersPlaceholder && (
-                        <WidgetHeaderContext selectionHelper={selectionHelper}>
-                            {props.filtersPlaceholder}
-                        </WidgetHeaderContext>
-                    )
-                }
-                hasMoreItems={props.datasource.hasMoreItems ?? false}
+                headerContent={props.filtersPlaceholder}
                 headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
                 id={useMemo(() => `DataGrid${generateUUID()}`, [])}
                 numberOfItems={props.datasource.totalCount}
                 onExportCancel={abortExport}
-                page={paginationService.currentPage}
-                pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
-                paging={paginationService.showPagination}
-                pagingPosition={props.pagingPosition}
-                showPagingButtons={props.showPagingButtons}
                 rowClass={useCallback((value: any) => props.rowClass?.get(value)?.value ?? "", [props.rowClass])}
-                setPage={paginationService.setPage}
                 styles={props.style}
                 exporting={exportProgress.inProgress}
                 processedRows={exportProgress.loaded}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
index b9c3e76bb1..d30322478c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
@@ -1,9 +1,10 @@
+import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 import classNames from "classnames";
-import { Fragment, ReactElement, ReactNode } from "react";
-import { LoadingTypeEnum, PaginationEnum } from "../../typings/DatagridProps";
-import { SpinnerLoader } from "./loader/SpinnerLoader";
+import { Fragment, ReactElement, ReactNode, useCallback } from "react";
+import { LoadingTypeEnum } from "../../typings/DatagridProps";
+import { usePaginationService } from "../model/hooks/injection-hooks";
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
-import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
+import { SpinnerLoader } from "./loader/SpinnerLoader";
 
 interface Props {
     className?: string;
@@ -14,30 +15,30 @@ interface Props {
     columnsHidable: boolean;
     columnsSize: number;
     rowsSize: number;
-    pageSize: number;
-    pagination: PaginationEnum;
-    hasMoreItems: boolean;
-    setPage?: (update: (page: number) => number) => void;
 }
 
 export function GridBody(props: Props): ReactElement {
-    const { children, pagination, hasMoreItems, setPage } = props;
+    const { children } = props;
+
+    const paging = usePaginationService();
+    const pageSize = paging.pageSize;
+    const setPage = useCallback((cb: (n: number) => number) => paging.setPage(cb), [paging]);
 
-    const isInfinite = pagination === "virtualScrolling";
+    const isInfinite = paging.pagination === "virtualScrolling";
     const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
-        hasMoreItems,
+        hasMoreItems: paging.hasMoreItems,
         isInfinite,
         setPage
     });
 
     const content = (): ReactElement => {
         if (props.isFirstLoad) {
-            return <Loader {...props} rowsSize={props.rowsSize > 0 ? props.rowsSize : props.pageSize} />;
+            return <Loader {...props} rowsSize={props.rowsSize > 0 ? props.rowsSize : pageSize} />;
         }
         return (
             <Fragment>
                 {children}
-                {props.isFetchingNextBatch && <Loader {...props} rowsSize={props.pageSize} useBorderTop={false} />}
+                {props.isFetchingNextBatch && <Loader {...props} rowsSize={pageSize} useBorderTop={false} />}
             </Fragment>
         );
     };
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Pagination.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Pagination.tsx
new file mode 100644
index 0000000000..fb8200c6d8
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Pagination.tsx
@@ -0,0 +1,25 @@
+import { Pagination as PaginationComponent } from "@mendix/widget-plugin-grid/components/Pagination";
+import { observer } from "mobx-react-lite";
+import { ReactNode } from "react";
+import { usePaginationService } from "../model/hooks/injection-hooks";
+
+export const Pagination = observer(function Pagination(): ReactNode {
+    const paging = usePaginationService();
+
+    if (!paging.paginationVisible) return null;
+
+    return (
+        <PaginationComponent
+            canNextPage={paging.hasMoreItems}
+            canPreviousPage={paging.currentPage !== 0}
+            gotoPage={page => paging.setPage(page)}
+            nextPage={() => paging.setPage(n => n + 1)}
+            numberOfItems={paging.totalCount}
+            page={paging.currentPage}
+            pageSize={paging.pageSize}
+            showPagingButtons={paging.showPagingButtons}
+            previousPage={() => paging.setPage(n => n - 1)}
+            pagination={paging.pagination}
+        />
+    );
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
index 5e80900972..710401a460 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
@@ -14,7 +14,6 @@ interface RowsRendererProps {
     eventsController: EventsController;
     focusController: FocusTargetController;
     interactive: boolean;
-    pageSize: number;
     preview: boolean;
     rowClass?: (item: ObjectItem) => string;
     rows: ObjectItem[];
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 39604e653a..7193c56166 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -1,15 +1,9 @@
 import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator";
-import { Pagination } from "@mendix/widget-plugin-grid/components/Pagination";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { ListActionValue, ObjectItem } from "mendix";
 import { observer } from "mobx-react-lite";
 import { CSSProperties, Fragment, ReactElement, ReactNode } from "react";
-import {
-    LoadingTypeEnum,
-    PaginationEnum,
-    PagingPositionEnum,
-    ShowPagingButtonsEnum
-} from "../../typings/DatagridProps";
+import { LoadingTypeEnum, PaginationEnum } from "../../typings/DatagridProps";
 
 import { EmptyPlaceholder } from "../features/empty-message/EmptyPlaceholder";
 import { SelectAllBar } from "../features/select-all/SelectAllBar";
@@ -40,28 +34,19 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     data: T[];
     exporting: boolean;
     filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
-    hasMoreItems: boolean;
     headerContent?: ReactNode;
     headerTitle?: string;
     headerWrapperRenderer: (columnIndex: number, header: ReactElement) => ReactElement;
     id: string;
     numberOfItems?: number;
     onExportCancel?: () => void;
-    page: number;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
 
-    pageSize: number;
-    paging: boolean;
-    pagingPosition: PagingPositionEnum;
-    showPagingButtons: ShowPagingButtonsEnum;
-    preview?: boolean;
     processedRows: number;
     rowClass?: (item: T) => string;
-    setPage?: (computePage: (prevPage: number) => number) => void;
     styles?: CSSProperties;
     rowAction?: ListActionValue;
-    showSelectAllToggle?: boolean;
     isFirstLoad: boolean;
     isFetchingNextBatch: boolean;
     loadingType: LoadingTypeEnum;
@@ -116,43 +101,16 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         CellComponent,
         columnsHidable,
         data: rows,
-        hasMoreItems,
         headerContent,
         headerTitle,
         loadMoreButtonCaption,
-        numberOfItems,
-        page,
-        pageSize,
-        paginationType,
-        paging,
-        pagingPosition,
         showRefreshIndicator,
         selectActionHelper,
-        setPage,
         visibleColumns
     } = props;
 
     const basicData = useBasicData();
 
-    const showHeader = !!headerContent;
-    const showTopBarPagination = paging && (pagingPosition === "top" || pagingPosition === "both");
-    const showFooterPagination = paging && (pagingPosition === "bottom" || pagingPosition === "both");
-
-    const pagination = paging ? (
-        <Pagination
-            canNextPage={hasMoreItems}
-            canPreviousPage={page !== 0}
-            gotoPage={(page: number) => setPage && setPage(() => page)}
-            nextPage={() => setPage && setPage(prev => prev + 1)}
-            numberOfItems={numberOfItems}
-            page={page}
-            pageSize={pageSize}
-            showPagingButtons={props.showPagingButtons}
-            previousPage={() => setPage && setPage(prev => prev - 1)}
-            pagination={paginationType}
-        />
-    ) : null;
-
     const cssGridStyles = gridStyle(visibleColumns, {
         selectItemColumn: selectActionHelper.showCheckboxColumn,
         visibilitySelectorColumn: columnsHidable
@@ -162,8 +120,8 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     return (
         <Fragment>
-            <WidgetTopBar pagination={showTopBarPagination ? pagination : undefined} />
-            {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
+            <WidgetTopBar />
+            <WidgetHeader headerTitle={headerTitle} headerContent={headerContent} />
             <WidgetContent>
                 <Grid
                     aria-multiselectable={selectionEnabled ? selectActionHelper.selectionType === "Multi" : undefined}
@@ -183,7 +141,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         headerWrapperRenderer={props.headerWrapperRenderer}
                         id={props.id}
                         isLoading={props.columnsLoading}
-                        preview={props.preview}
+                        preview={false}
                     />
                     <SelectAllBar />
                     {showRefreshIndicator ? <RefreshIndicator /> : null}
@@ -194,13 +152,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         columnsHidable={columnsHidable}
                         columnsSize={visibleColumns.length}
                         rowsSize={rows.length}
-                        pageSize={pageSize}
-                        pagination={props.paginationType}
-                        hasMoreItems={hasMoreItems}
-                        setPage={setPage}
                     >
                         <RowsRenderer
-                            preview={props.preview ?? false}
+                            preview={false}
                             interactive={basicData.gridInteractive}
                             Cell={CellComponent}
                             columns={visibleColumns}
@@ -211,19 +165,12 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                             selectActionHelper={selectActionHelper}
                             focusController={props.focusController}
                             eventsController={props.cellEventsController}
-                            pageSize={props.pageSize}
                         />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>
             </WidgetContent>
-            <WidgetFooter
-                pagination={showFooterPagination ? pagination : undefined}
-                paginationType={paginationType}
-                loadMoreButtonCaption={loadMoreButtonCaption}
-                hasMoreItems={hasMoreItems}
-                setPage={setPage}
-            />
+            <WidgetFooter loadMoreButtonCaption={loadMoreButtonCaption} />
         </Fragment>
     );
 });
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
index 161cde501f..c8a546e060 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -1,42 +1,45 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
-import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
-import { PaginationEnum } from "../../typings/DatagridProps";
+import { ReactElement } from "react";
 import { SelectionCounter } from "../features/selection-counter/SelectionCounter";
 import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks";
+import { useDatagridConfig, usePaginationService } from "../model/hooks/injection-hooks";
+import { Pagination } from "./Pagination";
 
 type WidgetFooterProps = {
-    pagination: ReactNode;
-    paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    hasMoreItems: boolean;
-    setPage?: (computePage: (prevPage: number) => number) => void;
-} & ComponentPropsWithoutRef<"div">;
+};
 
 export const WidgetFooter = observer(function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const { pagination, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
+    const config = useDatagridConfig();
+    const paging = usePaginationService();
+    const { loadMoreButtonCaption } = props;
     const selectionCounterVM = useSelectionCounterViewModel();
 
     return (
-        <div {...rest} className="widget-datagrid-footer table-footer">
+        <div className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
                 <div className="widget-datagrid-pb-start">
                     <If condition={selectionCounterVM.isBottomCounterVisible}>
                         <SelectionCounter />
                     </If>
                 </div>
-                {hasMoreItems && paginationType === "loadMore" && (
+                <If condition={paging.hasMoreItems && paging.pagination === "loadMore"}>
                     <div className="widget-datagrid-pb-middle">
                         <button
                             className="btn btn-primary widget-datagrid-load-more"
-                            onClick={() => setPage && setPage(prev => prev + 1)}
+                            onClick={() => paging.setPage(n => n + 1)}
                             tabIndex={0}
                         >
                             {loadMoreButtonCaption}
                         </button>
                     </div>
-                )}
-                <div className="widget-datagrid-pb-end">{pagination}</div>
+                </If>
+                <div className="widget-datagrid-pb-end">
+                    <If condition={config.pagingPosition !== "top"}>
+                        <Pagination />
+                    </If>
+                </div>
             </div>
         </div>
     );
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx
index f55c0db551..2cb3859f91 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx
@@ -1,19 +1,34 @@
-import { ComponentPropsWithoutRef, ReactElement } from "react";
+import { getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context";
+import { getGlobalSelectionContext, useCreateSelectionContextValue } from "@mendix/widget-plugin-grid/selection";
+import { PropsWithChildren, ReactElement, ReactNode } from "react";
+import { useDatagridFilterAPI, useSelectionHelper } from "../model/hooks/injection-hooks";
 
 type WidgetHeaderProps = {
     headerTitle?: string;
-} & ComponentPropsWithoutRef<"div">;
+    headerContent?: ReactNode;
+};
 
-export function WidgetHeader(props: WidgetHeaderProps): ReactElement | null {
-    const { children, headerTitle, ...rest } = props;
+const Selection = getGlobalSelectionContext();
+const FilterAPI = getGlobalFilterContextObject();
 
-    if (!children) {
-        return null;
-    }
+function HeaderContainer(props: PropsWithChildren): ReactElement {
+    const filterAPI = useDatagridFilterAPI();
+    const selectionContext = useCreateSelectionContextValue(useSelectionHelper());
+    return (
+        <FilterAPI.Provider value={filterAPI}>
+            <Selection.Provider value={selectionContext}>{props.children}</Selection.Provider>
+        </FilterAPI.Provider>
+    );
+}
+
+export function WidgetHeader(props: WidgetHeaderProps): ReactNode {
+    const { headerContent, headerTitle } = props;
+
+    if (!headerContent) return null;
 
     return (
-        <div {...rest} className="widget-datagrid-header header-filters" aria-label={headerTitle || undefined}>
-            {children}
+        <div className="widget-datagrid-header header-filters" aria-label={headerTitle || undefined}>
+            <HeaderContainer>{headerContent}</HeaderContainer>
         </div>
     );
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeaderContext.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeaderContext.tsx
deleted file mode 100644
index 794f86029f..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeaderContext.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context";
-import {
-    getGlobalSelectionContext,
-    SelectionHelper,
-    useCreateSelectionContextValue
-} from "@mendix/widget-plugin-grid/selection";
-import { memo, ReactElement, ReactNode } from "react";
-import { useDatagridFilterAPI } from "../model/hooks/injection-hooks";
-
-interface WidgetHeaderContextProps {
-    children?: ReactNode;
-    selectionHelper?: SelectionHelper;
-}
-
-const SelectionContext = getGlobalSelectionContext();
-const FilterContext = getGlobalFilterContextObject();
-
-function HeaderContainer(props: WidgetHeaderContextProps): ReactElement {
-    const filterAPI = useDatagridFilterAPI();
-    const selectionContext = useCreateSelectionContextValue(props.selectionHelper);
-    return (
-        <FilterContext.Provider value={filterAPI}>
-            <SelectionContext.Provider value={selectionContext}>{props.children}</SelectionContext.Provider>
-        </FilterContext.Provider>
-    );
-}
-
-const component = memo(HeaderContainer);
-
-component.displayName = "WidgetHeaderContext";
-
-// Override NamedExoticComponent type
-export const WidgetHeaderContext = component as (props: WidgetHeaderContextProps) => ReactElement;
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
index cdf48e1cd3..390194bc0c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
@@ -1,27 +1,27 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
-import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 import { SelectionCounter } from "../features/selection-counter/SelectionCounter";
 import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks";
+import { useDatagridConfig } from "../model/hooks/injection-hooks";
+import { Pagination } from "./Pagination";
 
-type WidgetTopBarProps = {
-    pagination: ReactNode;
-} & ComponentPropsWithoutRef<"div">;
-
-export const WidgetTopBar = observer(function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
-    const { pagination, ...rest } = props;
-    const selectionCounterVM = useSelectionCounterViewModel();
+export const WidgetTopBar = observer(function WidgetTopBar(): ReactElement {
+    const config = useDatagridConfig();
+    const selectionCounter = useSelectionCounterViewModel();
 
     return (
-        <div {...rest} className="widget-datagrid-top-bar table-header">
+        <div className="widget-datagrid-top-bar table-header">
             <div className="widget-datagrid-padding-top">
                 <div className="widget-datagrid-tb-start">
-                    <If condition={selectionCounterVM.isTopCounterVisible}>
+                    <If condition={selectionCounter.isTopCounterVisible}>
                         <SelectionCounter />
                     </If>
                 </div>
                 <div className="widget-datagrid-tb-end">
-                    <If condition={!!pagination}>{pagination}</If>
+                    <If condition={config.pagingPosition !== "bottom"}>
+                        <Pagination />
+                    </If>
                 </div>
             </div>
         </div>
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts
index 9b4b28a056..c14d8492b1 100644
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts
@@ -1,10 +1,6 @@
+import { SelectionHelperService } from "@mendix/widget-plugin-grid/main";
+import { SelectActionHandler, SelectionMode, WidgetSelectionProperty } from "@mendix/widget-plugin-grid/selection";
 import { useMemo } from "react";
-import {
-    SelectActionHandler,
-    SelectionHelper,
-    SelectionMode,
-    WidgetSelectionProperty
-} from "@mendix/widget-plugin-grid/selection";
 import { DatagridContainerProps, DatagridPreviewProps, ItemSelectionMethodEnum } from "../../typings/DatagridProps";
 export type SelectionMethod = "rowClick" | "checkbox" | "none";
 
@@ -15,7 +11,7 @@ export class SelectActionHelper extends SelectActionHandler {
 
     constructor(
         selection: WidgetSelectionProperty,
-        selectionHelper: SelectionHelper | undefined,
+        selectionHelper: SelectionHelperService | undefined,
         _selectionMethod: ItemSelectionMethodEnum,
         _showSelectAllToggle: boolean,
         pageSize: number,
@@ -49,7 +45,7 @@ export function useSelectActionHelper(
         DatagridContainerProps | DatagridPreviewProps,
         "itemSelection" | "itemSelectionMethod" | "showSelectAllToggle" | "pageSize" | "itemSelectionMode"
     >,
-    selectionHelper?: SelectionHelper
+    selectionHelper?: SelectionHelperService
 ): SelectActionHelper {
     return useMemo(
         () =>
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
index e5780ebda8..aa7e4c5664 100644
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
@@ -1,11 +1,11 @@
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
-import { SelectionHelper } from "@mendix/widget-plugin-grid/selection";
+import { SelectionHelperService } from "@mendix/widget-plugin-grid/main";
 import { createContext, useContext } from "react";
 import { EventsController } from "../typings/CellComponent";
 import { SelectActionHelper } from "./SelectActionHelper";
 
 export interface LegacyRootScope {
-    selectionHelper: SelectionHelper | undefined;
+    selectionHelper: SelectionHelperService | undefined;
     selectActionHelper: SelectActionHelper;
     cellEventsController: EventsController;
     checkboxEventsController: EventsController;
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index 0daaf02546..c45412110c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -1,5 +1,5 @@
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { DatagridContainerProps } from "../../../typings/DatagridProps";
+import { DatagridContainerProps, PagingPositionEnum } from "../../../typings/DatagridProps";
 
 /** Config for static values that don't change at runtime. */
 export interface DatagridConfig {
@@ -13,12 +13,14 @@ export interface DatagridConfig {
     selectorColumnEnabled: boolean;
     settingsStorageEnabled: boolean;
     enableSelectAll: boolean;
+    keepSelection: boolean;
+    pagingPosition: PagingPositionEnum;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
     const id = `${props.name}:Datagrid@${generateUUID()}`;
 
-    return Object.freeze({
+    const config: DatagridConfig = {
         checkboxColumnEnabled: isCheckboxColumnEnabled(props),
         filtersChannelName: `${id}:events`,
         id,
@@ -28,8 +30,12 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         selectionEnabled: isSelectionEnabled(props),
         selectorColumnEnabled: props.columnsHidable,
         settingsStorageEnabled: isSettingsStorageEnabled(props),
-        enableSelectAll: props.enableSelectAll
-    });
+        enableSelectAll: props.enableSelectAll,
+        keepSelection: props.keepSelection,
+        pagingPosition: props.pagingPosition
+    };
+
+    return Object.freeze(config);
 }
 
 function isSelectionEnabled(props: DatagridContainerProps): boolean {
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
index 1878ef2326..d0f032738f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -2,7 +2,7 @@ import { WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
 import { emptyStateWidgetsAtom } from "@mendix/widget-plugin-grid/core/models/empty-state.model";
-import { DatasourceService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
+import { createSelectionHelper, DatasourceService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
 import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
@@ -17,6 +17,7 @@ import { DatagridConfig } from "../configs/Datagrid.config";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
+import { SelectionGate } from "../services/SelectionGate.service";
 import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens";
 
 injected(ColumnGroupStore, CORE.setupService, CORE.mainGate, CORE.config, DG.filterHost);
@@ -30,6 +31,8 @@ injected(GridPersonalizationStore, CORE.setupService, CORE.mainGate, CORE.column
 injected(PaginationController, CORE.setupService, DG.paginationConfig, DG.query);
 injected(WidgetFilterAPI, DG.parentChannelName, DG.filterHost);
 injected(emptyStateWidgetsAtom, CORE.mainGate, CORE.atoms.itemCount);
+injected(SelectionGate, CORE.mainGate);
+injected(createSelectionHelper, CORE.setupService, DG.selectionGate, CORE.config.optional);
 
 injected(
     SelectionCounterViewModel,
@@ -69,6 +72,11 @@ export class DatagridContainer extends Container {
         // Empty placeholder
         this.bind(DG.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inSingletonScope();
         this.bind(DG.emptyPlaceholderWidgets).toInstance(emptyStateWidgetsAtom).inTransientScope();
+
+        // Selection gate
+        this.bind(DG.selectionGate).toInstance(SelectionGate).inTransientScope();
+        // Selection helper
+        this.bind(DG.selectionHelper).toInstance(createSelectionHelper).inSingletonScope();
     }
 
     /**
@@ -143,6 +151,14 @@ export class DatagridContainer extends Container {
             this.get(DG.personalizationService);
         }
 
+        if (config.selectionEnabled) {
+            // Create selection helper singleton
+            this.get(DG.selectionHelper);
+        } else {
+            // Override selection helper with undefined to disable selection features
+            this.bind(DG.selectionHelper).toConstant(undefined);
+        }
+
         // Hydrate filters from props
         this.get(DG.combinedFilter).hydrate(props.datasource.filter);
     }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index b23babaf98..3f5641510e 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -9,3 +9,4 @@ export const [useExportProgressService] = createInjectionHooks(DG.exportProgress
 export const [useLoaderViewModel] = createInjectionHooks(DG.loaderVM);
 export const [useMainGate] = createInjectionHooks(CORE.mainGate);
 export const [usePaginationService] = createInjectionHooks(DG.paginationService);
+export const [useSelectionHelper] = createInjectionHooks(DG.selectionHelper);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/services/PaginationController.ts b/packages/pluggableWidgets/datagrid-web/src/model/services/PaginationController.ts
index c192303b6c..8f2baff57c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/services/PaginationController.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/services/PaginationController.ts
@@ -14,6 +14,7 @@ type PaginationKind = `${PaginationEnum}.${ShowPagingButtonsEnum}`;
 export class PaginationController implements SetupComponent {
     readonly pagination: PaginationEnum;
     readonly paginationKind: PaginationKind;
+    readonly showPagingButtons: ShowPagingButtonsEnum;
 
     constructor(
         host: SetupComponentHost,
@@ -23,6 +24,7 @@ export class PaginationController implements SetupComponent {
         host.add(this);
         this.pagination = config.pagination;
         this.paginationKind = `${this.pagination}.${config.showPagingButtons}`;
+        this.showPagingButtons = config.showPagingButtons;
         this.setInitParams();
     }
 
@@ -42,7 +44,7 @@ export class PaginationController implements SetupComponent {
         return this.isLimitBased ? limit / pageSize : offset / pageSize;
     }
 
-    get showPagination(): boolean {
+    get paginationVisible(): boolean {
         switch (this.paginationKind) {
             case "buttons.always":
                 return true;
@@ -55,6 +57,14 @@ export class PaginationController implements SetupComponent {
         }
     }
 
+    get hasMoreItems(): boolean {
+        return this.query.hasMoreItems;
+    }
+
+    get totalCount(): number | undefined {
+        return this.query.totalCount;
+    }
+
     private setInitParams(): void {
         if (this.pagination === "buttons" || this.config.showNumberOfRows) {
             this.query.requestTotalCount(true);
@@ -65,8 +75,8 @@ export class PaginationController implements SetupComponent {
 
     setup(): void {}
 
-    setPage = (computePage: (prevPage: number) => number): void => {
-        const newPage = computePage(this.currentPage);
+    setPage = (computePage: ((prevPage: number) => number) | number): void => {
+        const newPage = typeof computePage === "function" ? computePage(this.currentPage) : computePage;
         if (this.isLimitBased) {
             this.query.setLimit(newPage * this.pageSize);
         } else {
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts b/packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts
new file mode 100644
index 0000000000..4e0674d73b
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts
@@ -0,0 +1,20 @@
+import { SelectionDynamicProps } from "@mendix/widget-plugin-grid/main";
+import { DerivedPropsGate, MappedGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { MainGateProps } from "../../../typings/MainGateProps";
+
+export class SelectionGate extends MappedGate<MainGateProps, SelectionDynamicProps> {
+    constructor(gate: DerivedPropsGate<MainGateProps>) {
+        super(gate, map);
+    }
+}
+
+function map(props: MainGateProps): SelectionDynamicProps {
+    if (!props.itemSelection) {
+        throw new Error("'itemSelection' prop is required for SelectionGate");
+    }
+    return {
+        selection: props.itemSelection,
+        datasource: props.datasource,
+        onSelectionChange: props.onSelectionChange
+    };
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index 8b4ecf3e3a..ce96da5d6a 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -1,7 +1,13 @@
 import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter, CombinedFilterConfig } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
-import { QueryService, SelectAllService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
+import {
+    QueryService,
+    SelectAllService,
+    SelectionDynamicProps,
+    SelectionHelperService,
+    TaskProgressService
+} from "@mendix/widget-plugin-grid/main";
 import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
 import {
     BarStore,
@@ -43,7 +49,7 @@ export const CORE_TOKENS = {
 
     config: token<DatagridConfig>("DatagridConfig"),
 
-    mainGate: token<DerivedPropsGate<MainGateProps>>("MainGate"),
+    mainGate: token<DerivedPropsGate<MainGateProps>>("@gate:MainGate"),
 
     selection: {
         selectedCount: token<ComputedAtom<number>>("@computed:selectedCount"),
@@ -86,10 +92,13 @@ export const DG_TOKENS = {
     personalizationService: token<GridPersonalizationStore>("GridPersonalizationStore"),
 
     query: token<QueryService>("QueryService"),
-    queryGate: token<DerivedPropsGate<{ datasource: ListValue }>>("GateForQueryService"),
+    queryGate: token<DerivedPropsGate<{ datasource: ListValue }>>("@gate:GateForQueryService"),
 
     selectionCounterCfg: token<{ position: "top" | "bottom" | "off" }>("SelectionCounterConfig"),
-    selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel")
+    selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
+
+    selectionGate: token<DerivedPropsGate<SelectionDynamicProps>>("@gate:GateForSelectionHelper"),
+    selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService")
 };
 
 /** "Select all" module tokens. */
diff --git a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
index 9fe9f153d5..dd421de1c2 100644
--- a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
@@ -84,21 +84,14 @@ export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
         data: [{ id: "123456" as GUID }],
         exporting: false,
         filterRenderer: () => <input type="text" defaultValue="dummy" />,
-        hasMoreItems: false,
         headerWrapperRenderer: (_index, header) => header,
         id,
         onExportCancel: jest.fn(),
-        page: 1,
-        pageSize: 10,
         paginationType: "buttons",
-        paging: false,
-        pagingPosition: "bottom",
-        showPagingButtons: "auto",
         visibleColumns: columns,
         availableColumns: columns,
         columnsSwap: jest.fn(),
         setIsResizing: jest.fn(),
-        setPage: jest.fn(),
         processedRows: 0,
         selectActionHelper: mockSelectionProps(),
         cellEventsController: { getProps: () => Object.create({}) },
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index de4af19873..1f666afc4a 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -14,6 +14,7 @@ export type MainGateProps = Pick<
     | "enableSelectAll"
     | "itemSelection"
     | "name"
+    | "onSelectionChange"
     | "pageSize"
     | "pagination"
     | "refreshIndicator"
diff --git a/packages/shared/widget-plugin-grid/src/interfaces/MultiSelectionService.ts b/packages/shared/widget-plugin-grid/src/interfaces/MultiSelectionService.ts
new file mode 100644
index 0000000000..bc6a321fab
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/interfaces/MultiSelectionService.ts
@@ -0,0 +1,23 @@
+import { ObjectItem } from "mendix";
+import { MoveEvent1D, MoveEvent2D, MultiSelectionStatus, SelectionMode } from "../selection/types";
+
+export interface MultiSelectionService {
+    type: "Multi";
+    selectionStatus: MultiSelectionStatus;
+    togglePageSelection(): void;
+    isSelected(item: ObjectItem): boolean;
+    add(item: ObjectItem): void;
+    remove(item: ObjectItem): void;
+    reduceTo(item: ObjectItem): void;
+    clearSelection(): void;
+    selectAll(): void;
+    selectNone(): void;
+    selectUpTo(item: ObjectItem, mode: SelectionMode): void;
+    selectUpToAdjacent(
+        item: ObjectItem,
+        shiftKey: boolean,
+        mode: SelectionMode,
+        event: MoveEvent1D | MoveEvent2D
+    ): void;
+    togglePageSelection(): void;
+}
diff --git a/packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts b/packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts
new file mode 100644
index 0000000000..b94fc7a40a
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts
@@ -0,0 +1,7 @@
+import { ActionValue, ListValue, SelectionMultiValue, SelectionSingleValue } from "mendix";
+
+export interface SelectionDynamicProps {
+    selection: SelectionSingleValue | SelectionMultiValue;
+    datasource: ListValue;
+    onSelectionChange: ActionValue | undefined;
+}
diff --git a/packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts b/packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts
new file mode 100644
index 0000000000..45977b2368
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts
@@ -0,0 +1,4 @@
+import { MultiSelectionService } from "./MultiSelectionService";
+import { SingleSelectionService } from "./SingleSelectionService";
+
+export type SelectionHelperService = MultiSelectionService | SingleSelectionService;
diff --git a/packages/shared/widget-plugin-grid/src/interfaces/SingleSelectionService.ts b/packages/shared/widget-plugin-grid/src/interfaces/SingleSelectionService.ts
new file mode 100644
index 0000000000..24cffaadda
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/interfaces/SingleSelectionService.ts
@@ -0,0 +1,8 @@
+import { ObjectItem } from "mendix";
+
+export interface SingleSelectionService {
+    type: "Single";
+    isSelected(item: ObjectItem): boolean;
+    reduceTo(item: ObjectItem): void;
+    remove(): void;
+}
diff --git a/packages/shared/widget-plugin-grid/src/main.ts b/packages/shared/widget-plugin-grid/src/main.ts
index 2b90b358d6..aeda935552 100644
--- a/packages/shared/widget-plugin-grid/src/main.ts
+++ b/packages/shared/widget-plugin-grid/src/main.ts
@@ -1,6 +1,10 @@
 export { DatasourceService } from "./core/Datasource.service";
 export { ProgressService } from "./core/Progress.service";
 export type { QueryService } from "./interfaces/QueryService";
+export type { SelectionDynamicProps } from "./interfaces/SelectionDynamicProps";
+export { type SelectionHelperService } from "./interfaces/SelectionHelperService";
 export type { TaskProgressService } from "./interfaces/TaskProgressService";
 export { SelectAllService } from "./select-all/SelectAll.service";
 export { SelectionCounterViewModel } from "./selection-counter/SelectionCounter.viewModel";
+export * from "./selection/context";
+export { createSelectionHelper } from "./selection/createSelectionHelper";
diff --git a/packages/shared/widget-plugin-grid/src/selection/context.ts b/packages/shared/widget-plugin-grid/src/selection/context.ts
index 851bbb8c25..ac17f5a547 100644
--- a/packages/shared/widget-plugin-grid/src/selection/context.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/context.ts
@@ -1,17 +1,11 @@
 import { Context, createContext, useContext, useMemo } from "react";
-import { SelectionHelper } from "./helpers.js";
+import { MultiSelectionService } from "../interfaces/MultiSelectionService.js";
+import { SelectionHelperService } from "../interfaces/SelectionHelperService.js";
 import { error, Result, value } from "./result-meta.js";
-import { MultiSelectionStatus } from "./types.js";
 
 const CONTEXT_OBJECT_PATH = "com.mendix.widgets.web.selectable.selectionContext" as const;
 
-interface SelectionStore {
-    /** @observable */
-    selectionStatus: MultiSelectionStatus;
-    togglePageSelection(): void;
-}
-
-type SelectionContextObject = Context<SelectionStore | undefined>;
+type SelectionContextObject = Context<MultiSelectionService | undefined>;
 
 declare global {
     interface Window {
@@ -20,24 +14,16 @@ declare global {
 }
 
 export function getGlobalSelectionContext(): SelectionContextObject {
-    return (window[CONTEXT_OBJECT_PATH] ??= createContext<SelectionStore | undefined>(undefined));
+    return (window[CONTEXT_OBJECT_PATH] ??= createContext<MultiSelectionService | undefined>(undefined));
 }
 
-type UseCreateSelectionContextValueReturn = SelectionStore | undefined;
-
 export function useCreateSelectionContextValue(
-    selection: SelectionHelper | undefined
-): UseCreateSelectionContextValueReturn {
-    return useMemo(() => {
-        if (selection?.type === "Multi") {
-            return selection;
-        }
-
-        return undefined;
-    }, [selection]);
+    selection: SelectionHelperService | undefined
+): MultiSelectionService | undefined {
+    return useMemo(() => (selection?.type === "Multi" ? selection : undefined), [selection]);
 }
 
-export function useSelectionContextValue(): Result<SelectionStore, OutOfContextError> {
+export function useSelectionContextValue(): Result<MultiSelectionService, OutOfContextError> {
     const context = getGlobalSelectionContext();
     const contextValue = useContext(context);
 
diff --git a/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts b/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
new file mode 100644
index 0000000000..ab5cf21051
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
@@ -0,0 +1,61 @@
+import { DerivedPropsGate, disposeBatch, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
+import { autorun, comparer, reaction } from "mobx";
+import { SelectionHelperService } from "../interfaces/SelectionHelperService";
+import { SelectionDynamicProps } from "../main";
+import { MultiSelectionHelper, SingleSelectionHelper } from "./helpers";
+
+export function createSelectionHelper(
+    host: SetupComponentHost,
+    gate: DerivedPropsGate<SelectionDynamicProps>,
+    config: { keepSelection: boolean } = { keepSelection: false }
+): SelectionHelperService {
+    const { selection, datasource } = gate.props;
+
+    let helper: SelectionHelperService;
+    if (selection.type === "Multi") {
+        helper = new MultiSelectionHelper(selection, datasource.items ?? []);
+    } else {
+        helper = new SingleSelectionHelper(selection);
+    }
+    if (config.keepSelection) {
+        selection.setKeepSelection(() => true);
+    }
+
+    function setup(): () => void {
+        const [add, disposeAll] = disposeBatch();
+
+        add(
+            autorun(() => {
+                const { selection, datasource } = gate.props;
+                if (helper instanceof MultiSelectionHelper) {
+                    helper.updateProps(selection as SelectionMultiValue, datasource.items ?? []);
+                }
+                if (helper instanceof SingleSelectionHelper) {
+                    helper.updateProps(selection as SelectionSingleValue);
+                }
+            })
+        );
+
+        if (gate.props.onSelectionChange) {
+            const cleanup = reaction(
+                (): ObjectItem[] => {
+                    const selected = gate.props.selection.selection;
+                    if (Array.isArray(selected)) return selected;
+                    if (selected !== undefined) return [selected];
+                    return [];
+                },
+                () => executeAction(gate.props.onSelectionChange),
+                { equals: comparer.structural }
+            );
+            add(cleanup);
+        }
+
+        return disposeAll;
+    }
+
+    host.add({ setup });
+
+    return helper;
+}
diff --git a/packages/shared/widget-plugin-grid/src/selection/helpers.ts b/packages/shared/widget-plugin-grid/src/selection/helpers.ts
index 05738b5416..507e1f7bda 100644
--- a/packages/shared/widget-plugin-grid/src/selection/helpers.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/helpers.ts
@@ -2,9 +2,11 @@ import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-
 import type { ActionValue, ListValue, ObjectItem, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { action, computed, makeObservable, observable } from "mobx";
 import { useEffect, useRef, useState } from "react";
+import { MultiSelectionService } from "../interfaces/MultiSelectionService";
+import { SingleSelectionService } from "../interfaces/SingleSelectionService";
 import { Direction, MoveEvent1D, MoveEvent2D, MultiSelectionStatus, ScrollKeyCode, SelectionMode, Size } from "./types";
 
-class SingleSelectionHelper {
+export class SingleSelectionHelper implements SingleSelectionService {
     type = "Single" as const;
     constructor(private selectionValue: SelectionSingleValue) {}
 
@@ -18,12 +20,12 @@ class SingleSelectionHelper {
     reduceTo(value: ObjectItem): void {
         this.selectionValue.setSelection(value);
     }
-    remove(_value: ObjectItem): void {
+    remove(): void {
         this.selectionValue.setSelection(undefined);
     }
 }
 
-export class MultiSelectionHelper {
+export class MultiSelectionHelper implements MultiSelectionService {
     type = "Multi" as const;
     private rangeStart: number | undefined;
     private rangeEnd: number | undefined;
@@ -339,6 +341,7 @@ export class MultiSelectionHelper {
 
 const clamp = (num: number, min: number, max: number): number => Math.min(Math.max(num, min), max);
 
+/** @deprecated use container and createSelectionHelper instead. */
 export function useSelectionHelper(
     selection: SelectionSingleValue | SelectionMultiValue | undefined,
     dataSource: ListValue,
@@ -400,7 +403,6 @@ function selectionStateHandler(
     return keepSelection === "always keep" ? () => true : () => false;
 }
 
-export type { SingleSelectionHelper };
 export type SelectionHelper = SingleSelectionHelper | MultiSelectionHelper;
 
 function objectListEqual(a: ObjectItem[], b: ObjectItem[]): boolean {
diff --git a/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts b/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
index 5e35c57966..08c4c48bad 100644
--- a/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
@@ -1,11 +1,11 @@
 import { ObjectItem } from "mendix";
-import { SelectionHelper } from "./helpers";
+import { SelectionHelperService } from "../interfaces/SelectionHelperService";
 import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType, WidgetSelectionProperty } from "./types";
 
 export class SelectActionHandler {
     constructor(
         private selection: WidgetSelectionProperty,
-        protected selectionHelper: SelectionHelper | undefined
+        protected selectionHelper: SelectionHelperService | undefined
     ) {}
 
     get selectionType(): SelectionType {
diff --git a/packages/shared/widget-plugin-mobx-kit/src/MappedGate.ts b/packages/shared/widget-plugin-mobx-kit/src/MappedGate.ts
new file mode 100644
index 0000000000..8c6061291b
--- /dev/null
+++ b/packages/shared/widget-plugin-mobx-kit/src/MappedGate.ts
@@ -0,0 +1,16 @@
+import { computed, makeObservable } from "mobx";
+import { DerivedPropsGate } from "./interfaces/DerivedPropsGate";
+
+/** Helper class to create gate that map props from another gate. */
+export class MappedGate<T1, T2> implements DerivedPropsGate<T2> {
+    constructor(
+        private gate: DerivedPropsGate<T1>,
+        private map: (props: T1) => T2
+    ) {
+        makeObservable(this, { props: computed });
+    }
+
+    get props(): T2 {
+        return this.map(this.gate.props);
+    }
+}
diff --git a/packages/shared/widget-plugin-mobx-kit/src/main.ts b/packages/shared/widget-plugin-mobx-kit/src/main.ts
index 75711e90fd..8bc783868c 100644
--- a/packages/shared/widget-plugin-mobx-kit/src/main.ts
+++ b/packages/shared/widget-plugin-mobx-kit/src/main.ts
@@ -10,4 +10,5 @@ export { autoEffect } from "./lib/autoEffect";
 export { createEmitter } from "./lib/createEmitter";
 export type { Emitter } from "./lib/createEmitter";
 export { disposeBatch } from "./lib/disposeBatch";
+export { MappedGate } from "./MappedGate";
 export { SetupHost } from "./SetupHost";

From 277310098d8927c67c6fdbecf2b8d152e5c19545 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Mon, 17 Nov 2025 14:48:20 +0100
Subject: [PATCH 09/21] refactor: rewrite grid style to atom

---
 .../datagrid-web/src/components/Grid.tsx      | 28 ++++++-------
 .../datagrid-web/src/components/Widget.tsx    | 37 +----------------
 .../src/model/configs/Datagrid.config.ts      |  9 ++++-
 .../model/containers/Datagrid.container.ts    |  4 ++
 .../src/model/hooks/injection-hooks.ts        |  1 +
 .../src/model/models/grid.model.ts            | 40 +++++++++++++++++++
 .../datagrid-web/src/model/tokens.ts          |  6 ++-
 7 files changed, 72 insertions(+), 53 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx
index 96948a3bca..015fb3f539 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx
@@ -1,18 +1,18 @@
-import classNames from "classnames";
-import { ComponentPropsWithoutRef, ReactElement } from "react";
-
-type P = Omit<ComponentPropsWithoutRef<"div">, "role">;
-
-export interface GridProps extends P {
-    className?: string;
-}
-
-export function Grid(props: GridProps): ReactElement {
-    const { className, style, children, ...rest } = props;
+import { observer } from "mobx-react-lite";
+import { PropsWithChildren, ReactElement } from "react";
+import { useDatagridConfig, useGridStyle } from "../model/hooks/injection-hooks";
 
+export const Grid = observer(function Grid(props: PropsWithChildren): ReactElement {
+    const config = useDatagridConfig();
+    const style = useGridStyle().get();
     return (
-        <div className={classNames("widget-datagrid-grid table", className)} role="grid" style={style} {...rest}>
-            {children}
+        <div
+            aria-multiselectable={config.multiselectable}
+            className={"widget-datagrid-grid table"}
+            role="grid"
+            style={style}
+        >
+            {props.children}
         </div>
     );
-}
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 7193c56166..ea9c0dcfaa 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -111,22 +111,12 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     const basicData = useBasicData();
 
-    const cssGridStyles = gridStyle(visibleColumns, {
-        selectItemColumn: selectActionHelper.showCheckboxColumn,
-        visibilitySelectorColumn: columnsHidable
-    });
-
-    const selectionEnabled = selectActionHelper.selectionType !== "None";
-
     return (
         <Fragment>
             <WidgetTopBar />
             <WidgetHeader headerTitle={headerTitle} headerContent={headerContent} />
             <WidgetContent>
-                <Grid
-                    aria-multiselectable={selectionEnabled ? selectActionHelper.selectionType === "Multi" : undefined}
-                    style={cssGridStyles}
-                >
+                <Grid>
                     <GridHeader
                         availableColumns={props.availableColumns}
                         columns={visibleColumns}
@@ -174,28 +164,3 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         </Fragment>
     );
 });
-
-function gridStyle(columns: GridColumn[], optional: OptionalColumns): CSSProperties {
-    const columnSizes = columns.map(c => c.getCssWidth());
-
-    const sizes: string[] = [];
-
-    if (optional.selectItemColumn) {
-        sizes.push("48px");
-    }
-
-    sizes.push(...columnSizes);
-
-    if (optional.visibilitySelectorColumn) {
-        sizes.push("54px");
-    }
-
-    return {
-        gridTemplateColumns: sizes.join(" ")
-    };
-}
-
-type OptionalColumns = {
-    selectItemColumn?: boolean;
-    visibilitySelectorColumn?: boolean;
-};
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index c45412110c..858d35fe01 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -15,6 +15,7 @@ export interface DatagridConfig {
     enableSelectAll: boolean;
     keepSelection: boolean;
     pagingPosition: PagingPositionEnum;
+    multiselectable: true | undefined;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
@@ -32,12 +33,18 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         settingsStorageEnabled: isSettingsStorageEnabled(props),
         enableSelectAll: props.enableSelectAll,
         keepSelection: props.keepSelection,
-        pagingPosition: props.pagingPosition
+        pagingPosition: props.pagingPosition,
+        multiselectable: isMultiselectable(props)
     };
 
     return Object.freeze(config);
 }
 
+function isMultiselectable(props: DatagridContainerProps): true | undefined {
+    const type = props.itemSelection?.type;
+    return type === "Multi" ? true : undefined;
+}
+
 function isSelectionEnabled(props: DatagridContainerProps): boolean {
     return props.itemSelection !== undefined;
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
index d0f032738f..ca8d9ba411 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -14,6 +14,7 @@ import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
+import { gridStyleAtom } from "../models/grid.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
@@ -33,6 +34,7 @@ injected(WidgetFilterAPI, DG.parentChannelName, DG.filterHost);
 injected(emptyStateWidgetsAtom, CORE.mainGate, CORE.atoms.itemCount);
 injected(SelectionGate, CORE.mainGate);
 injected(createSelectionHelper, CORE.setupService, DG.selectionGate, CORE.config.optional);
+injected(gridStyleAtom, CORE.columnsStore, CORE.config);
 
 injected(
     SelectionCounterViewModel,
@@ -72,6 +74,8 @@ export class DatagridContainer extends Container {
         // Empty placeholder
         this.bind(DG.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inSingletonScope();
         this.bind(DG.emptyPlaceholderWidgets).toInstance(emptyStateWidgetsAtom).inTransientScope();
+        // Grid columns style
+        this.bind(DG.gridColumnsStyle).toInstance(gridStyleAtom).inTransientScope();
 
         // Selection gate
         this.bind(DG.selectionGate).toInstance(SelectionGate).inTransientScope();
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index 3f5641510e..f157e37850 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -10,3 +10,4 @@ export const [useLoaderViewModel] = createInjectionHooks(DG.loaderVM);
 export const [useMainGate] = createInjectionHooks(CORE.mainGate);
 export const [usePaginationService] = createInjectionHooks(DG.paginationService);
 export const [useSelectionHelper] = createInjectionHooks(DG.selectionHelper);
+export const [useGridStyle] = createInjectionHooks(DG.gridColumnsStyle);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
new file mode 100644
index 0000000000..559b2bf366
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
@@ -0,0 +1,40 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+import { CSSProperties } from "react";
+import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
+import { DatagridConfig } from "../configs/Datagrid.config";
+
+export function gridStyleAtom(columns: ColumnGroupStore, config: DatagridConfig): ComputedAtom<CSSProperties> {
+    return computed(() => {
+        return gridStyle(columns.visibleColumns, {
+            checkboxColumn: config.checkboxColumnEnabled,
+            selectorColumn: config.selectorColumnEnabled
+        });
+    });
+}
+
+function gridStyle(
+    columns: Array<{ getCssWidth(): string }>,
+    optional: {
+        checkboxColumn?: boolean;
+        selectorColumn?: boolean;
+    }
+): CSSProperties {
+    const columnSizes = columns.map(c => c.getCssWidth());
+
+    const sizes: string[] = [];
+
+    if (optional.checkboxColumn) {
+        sizes.push("48px");
+    }
+
+    sizes.push(...columnSizes);
+
+    if (optional.selectorColumn) {
+        sizes.push("54px");
+    }
+
+    return {
+        gridTemplateColumns: sizes.join(" ")
+    };
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index ce96da5d6a..6e28788afe 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -18,7 +18,7 @@ import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-
 import { ComputedAtom, DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
 import { token } from "brandi";
 import { ListValue } from "mendix";
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { MainGateProps } from "../../typings/MainGateProps";
 import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel";
 import { SelectAllBarViewModel } from "../features/select-all/SelectAllBar.viewModel";
@@ -98,7 +98,9 @@ export const DG_TOKENS = {
     selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
 
     selectionGate: token<DerivedPropsGate<SelectionDynamicProps>>("@gate:GateForSelectionHelper"),
-    selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService")
+    selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService"),
+
+    gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle")
 };
 
 /** "Select all" module tokens. */

From f44bf6f18faa4f74d3e827aa2d39303e8f5f2729 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Tue, 18 Nov 2025 13:45:53 +0100
Subject: [PATCH 10/21] refactor: rewrite grid body

---
 .../datagrid-web/src/components/GridBody.tsx  | 145 ++++++++++--------
 .../datagrid-web/src/components/Widget.tsx    |   9 +-
 .../src/model/configs/Datagrid.config.ts      |  16 +-
 .../src/model/hooks/injection-hooks.ts        |   3 +
 4 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
index d30322478c..807d830907 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
@@ -1,88 +1,107 @@
 import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 import classNames from "classnames";
-import { Fragment, ReactElement, ReactNode, useCallback } from "react";
-import { LoadingTypeEnum } from "../../typings/DatagridProps";
-import { usePaginationService } from "../model/hooks/injection-hooks";
+import { observer } from "mobx-react-lite";
+import { Fragment, PropsWithChildren, ReactElement, ReactNode, RefObject, UIEventHandler, useCallback } from "react";
+import {
+    useDatagridConfig,
+    useItemCount,
+    useLoaderViewModel,
+    usePaginationService,
+    useVisibleColumnsCount
+} from "../model/hooks/injection-hooks";
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
 import { SpinnerLoader } from "./loader/SpinnerLoader";
 
-interface Props {
-    className?: string;
-    children?: ReactNode;
-    loadingType: LoadingTypeEnum;
-    isFirstLoad: boolean;
-    isFetchingNextBatch?: boolean;
-    columnsHidable: boolean;
-    columnsSize: number;
-    rowsSize: number;
-}
-
-export function GridBody(props: Props): ReactElement {
+export function GridBody(props: PropsWithChildren): ReactElement {
     const { children } = props;
-
-    const paging = usePaginationService();
-    const pageSize = paging.pageSize;
-    const setPage = useCallback((cb: (n: number) => number) => paging.setPage(cb), [paging]);
-
-    const isInfinite = paging.pagination === "virtualScrolling";
-    const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
-        hasMoreItems: paging.hasMoreItems,
-        isInfinite,
-        setPage
-    });
-
-    const content = (): ReactElement => {
-        if (props.isFirstLoad) {
-            return <Loader {...props} rowsSize={props.rowsSize > 0 ? props.rowsSize : pageSize} />;
-        }
-        return (
-            <Fragment>
-                {children}
-                {props.isFetchingNextBatch && <Loader {...props} rowsSize={pageSize} useBorderTop={false} />}
-            </Fragment>
-        );
-    };
+    const { bodySize, containerRef, isInfinite, handleScroll } = useBodyScroll();
 
     return (
         <div
-            className={classNames(
-                "widget-datagrid-grid-body table-content",
-                { "infinite-loading": isInfinite },
-                props.className
-            )}
+            className={classNames("widget-datagrid-grid-body table-content", { "infinite-loading": isInfinite })}
             style={isInfinite && bodySize > 0 ? { maxHeight: `${bodySize}px` } : {}}
             role="rowgroup"
             ref={containerRef}
-            onScroll={isInfinite ? trackScrolling : undefined}
+            onScroll={handleScroll}
         >
-            {content()}
+            <ContentGuard>{children}</ContentGuard>
         </div>
     );
 }
 
-interface LoaderProps {
-    loadingType: LoadingTypeEnum;
-    columnsHidable: boolean;
-    columnsSize: number;
-    rowsSize: number;
-    useBorderTop?: boolean;
-}
+const ContentGuard = observer(function ContentGuard(props: PropsWithChildren): ReactNode {
+    const loaderVM = useLoaderViewModel();
+    const { pageSize } = usePaginationService();
+    const config = useDatagridConfig();
+    const columnsCount = useVisibleColumnsCount().get();
+    const itemCount = useItemCount().get();
 
-function Loader(props: LoaderProps): ReactElement {
-    if (props.loadingType === "spinner") {
+    if (loaderVM.isFirstLoad && config.loadingType === "spinner") {
+        return <Spinner />;
+    }
+
+    if (loaderVM.isFirstLoad) {
         return (
-            <div className="widget-datagrid-loader-container">
-                <SpinnerLoader withMargins size="large" />
-            </div>
+            <RowSkeletonLoader
+                columnsHidable={config.columnsHidable}
+                columnsSize={columnsCount}
+                pageSize={itemCount > 0 ? itemCount : pageSize}
+                useBorderTop
+            />
         );
     }
 
     return (
-        <RowSkeletonLoader
-            columnsHidable={props.columnsHidable}
-            columnsSize={props.columnsSize}
-            pageSize={props.rowsSize}
-            useBorderTop={props.useBorderTop}
-        />
+        <Fragment>
+            {props.children}
+            {(() => {
+                if (loaderVM.isFetchingNextBatch && config.loadingType === "spinner") {
+                    return <Spinner />;
+                }
+
+                if (loaderVM.isFetchingNextBatch) {
+                    return (
+                        <RowSkeletonLoader
+                            columnsHidable={config.columnsHidable}
+                            columnsSize={columnsCount}
+                            pageSize={pageSize}
+                            useBorderTop={false}
+                        />
+                    );
+                }
+
+                return null;
+            })()}
+        </Fragment>
     );
+});
+
+function useBodyScroll(): {
+    handleScroll: UIEventHandler<HTMLDivElement> | undefined;
+    bodySize: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    isInfinite: boolean;
+} {
+    const paging = usePaginationService();
+    const setPage = useCallback((cb: (n: number) => number) => paging.setPage(cb), [paging]);
+
+    const isInfinite = paging.pagination === "virtualScrolling";
+    const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
+        hasMoreItems: paging.hasMoreItems,
+        isInfinite,
+        setPage
+    });
+
+    return {
+        handleScroll: isInfinite ? trackScrolling : undefined,
+        bodySize,
+        containerRef,
+        isInfinite
+    };
 }
+
+const Spinner = (): ReactNode => (
+    <div className="widget-datagrid-loader-container">
+        <SpinnerLoader withMargins size="large" />
+    </div>
+);
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index ea9c0dcfaa..a3bca322da 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -135,14 +135,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                     />
                     <SelectAllBar />
                     {showRefreshIndicator ? <RefreshIndicator /> : null}
-                    <GridBody
-                        isFirstLoad={props.isFirstLoad}
-                        isFetchingNextBatch={props.isFetchingNextBatch}
-                        loadingType={props.loadingType}
-                        columnsHidable={columnsHidable}
-                        columnsSize={visibleColumns.length}
-                        rowsSize={rows.length}
-                    >
+                    <GridBody>
                         <RowsRenderer
                             preview={false}
                             interactive={basicData.gridInteractive}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index 858d35fe01..4268e2561e 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -1,5 +1,5 @@
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { DatagridContainerProps, PagingPositionEnum } from "../../../typings/DatagridProps";
+import { DatagridContainerProps, LoadingTypeEnum, PagingPositionEnum } from "../../../typings/DatagridProps";
 
 /** Config for static values that don't change at runtime. */
 export interface DatagridConfig {
@@ -16,6 +16,12 @@ export interface DatagridConfig {
     keepSelection: boolean;
     pagingPosition: PagingPositionEnum;
     multiselectable: true | undefined;
+    loadingType: LoadingTypeEnum;
+    columnsDraggable: boolean;
+    columnsFilterable: boolean;
+    columnsHidable: boolean;
+    columnsResizable: boolean;
+    columnsSortable: boolean;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
@@ -34,7 +40,13 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         enableSelectAll: props.enableSelectAll,
         keepSelection: props.keepSelection,
         pagingPosition: props.pagingPosition,
-        multiselectable: isMultiselectable(props)
+        multiselectable: isMultiselectable(props),
+        loadingType: props.loadingType,
+        columnsHidable: props.columnsHidable,
+        columnsDraggable: props.columnsDraggable,
+        columnsFilterable: props.columnsFilterable,
+        columnsResizable: props.columnsResizable,
+        columnsSortable: props.columnsSortable
     };
 
     return Object.freeze(config);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index f157e37850..01506591f9 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -11,3 +11,6 @@ export const [useMainGate] = createInjectionHooks(CORE.mainGate);
 export const [usePaginationService] = createInjectionHooks(DG.paginationService);
 export const [useSelectionHelper] = createInjectionHooks(DG.selectionHelper);
 export const [useGridStyle] = createInjectionHooks(DG.gridColumnsStyle);
+export const [useQueryService] = createInjectionHooks(DG.query);
+export const [useVisibleColumnsCount] = createInjectionHooks(CORE.atoms.visibleColumnsCount);
+export const [useItemCount] = createInjectionHooks(CORE.atoms.itemCount);

From c7a3360db550de90089d980cb94fa719b5d79812 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Tue, 18 Nov 2025 11:12:38 +0100
Subject: [PATCH 11/21] test: add new tests

---
 .../src/components/__tests__/Table.spec.tsx   |  690 ------
 .../__snapshots__/Table.spec.tsx.snap         | 1926 -----------------
 .../model/configs/__tests__/config.spec.ts    |   84 +
 .../__tests__/createDatagridContainer.spec.ts |   58 +
 .../containers/createDatagridContainer.ts     |   34 +
 .../src/model/hooks/useDatagridContainer.ts   |   32 +-
 .../datagrid-web/src/utils/test-utils.tsx     |   45 +-
 7 files changed, 219 insertions(+), 2650 deletions(-)
 delete mode 100644 packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
 delete mode 100644 packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/configs/__tests__/config.spec.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/containers/__tests__/createDatagridContainer.spec.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/containers/createDatagridContainer.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
deleted file mode 100644
index c0d379ab1e..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
+++ /dev/null
@@ -1,690 +0,0 @@
-import { ClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
-import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/main";
-import { MultiSelectionStatus, useSelectionHelper } from "@mendix/widget-plugin-grid/selection";
-import { list, listWidget, objectItems, SelectionMultiValueBuilder } from "@mendix/widget-plugin-test-utils";
-import "@testing-library/jest-dom";
-import { cleanup, getAllByRole, getByRole, queryByRole, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ListValue, ObjectItem, SelectionMultiValue } from "mendix";
-import { ReactElement } from "react";
-import { ItemSelectionMethodEnum } from "typings/DatagridProps";
-import { CellEventsController, useCellEventsController } from "../../features/row-interaction/CellEventsController";
-import {
-    CheckboxEventsController,
-    useCheckboxEventsController
-} from "../../features/row-interaction/CheckboxEventsController";
-import { SelectActionHelper, useSelectActionHelper } from "../../helpers/SelectActionHelper";
-import { LegacyContext, LegacyRootScope } from "../../helpers/root-context";
-import { GridBasicData } from "../../helpers/state/GridBasicData";
-import { GridColumn } from "../../typings/GridColumn";
-import { column, mockGridColumn, mockWidgetProps } from "../../utils/test-utils";
-import { Widget, WidgetProps } from "../Widget";
-
-// you can also pass the mock implementation
-// to jest.fn as an argument
-window.IntersectionObserver = jest.fn(() => ({
-    root: null,
-    rootMargin: "",
-    thresholds: [0, 1],
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    takeRecords: jest.fn()
-}));
-
-function withCtx(
-    widgetProps: WidgetProps<GridColumn, ObjectItem>,
-    contextOverrides: Partial<LegacyRootScope> = {}
-): ReactElement {
-    const defaultBasicData = {
-        gridInteractive: false,
-        selectionStatus: "none" as const,
-        setSelectionHelper: jest.fn(),
-        exportDialogLabel: undefined,
-        cancelExportLabel: undefined,
-        selectRowLabel: undefined,
-        selectAllRowsLabel: undefined
-    };
-
-    const defaultSelectionCountStore = {
-        selectedCount: 0,
-        displayCount: "",
-        fmtSingular: "%d row selected",
-        fmtPlural: "%d rows selected"
-    };
-
-    const mockContext = {
-        basicData: defaultBasicData as unknown as GridBasicData,
-        selectionHelper: undefined,
-        selectActionHelper: widgetProps.selectActionHelper,
-        cellEventsController: widgetProps.cellEventsController,
-        checkboxEventsController: widgetProps.checkboxEventsController,
-        focusController: widgetProps.focusController,
-        selectionCountStore: defaultSelectionCountStore as unknown as SelectionCounterViewModel,
-        ...contextOverrides
-    };
-
-    return (
-        <LegacyContext.Provider value={mockContext}>
-            <Widget {...widgetProps} />
-        </LegacyContext.Provider>
-    );
-}
-
-// Helper function to render Widget with root context
-function renderWithRootContext(
-    widgetProps: WidgetProps<GridColumn, ObjectItem>,
-    contextOverrides: Partial<LegacyRootScope> = {}
-): ReturnType<typeof render> {
-    return render(withCtx(widgetProps, contextOverrides));
-}
-
-// TODO: Rewrite or delete these tests
-// eslint-disable-next-line jest/no-disabled-tests
-describe.skip("Table", () => {
-    it("renders the structure correctly", () => {
-        const component = renderWithRootContext(mockWidgetProps());
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with sorting", () => {
-        const component = renderWithRootContext({ ...mockWidgetProps(), columnsSortable: true });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with resizing", () => {
-        const component = renderWithRootContext({ ...mockWidgetProps(), columnsResizable: true });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with dragging", () => {
-        const component = renderWithRootContext({ ...mockWidgetProps(), columnsDraggable: true });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with filtering", () => {
-        const component = renderWithRootContext({ ...mockWidgetProps(), columnsFilterable: true });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with hiding", () => {
-        const component = renderWithRootContext({ ...mockWidgetProps(), columnsHidable: true });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with paging", () => {
-        const component = renderWithRootContext({ ...mockWidgetProps(), paging: true });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with custom filtering", () => {
-        const props = mockWidgetProps();
-        const columns = [column("Test")].map((col, index) => mockGridColumn(col, index));
-        props.columnsFilterable = true;
-        props.visibleColumns = columns;
-        props.availableColumns = columns;
-        const component = renderWithRootContext(props);
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with empty placeholder", () => {
-        const component = renderWithRootContext({
-            ...mockWidgetProps()
-        });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with column alignments", () => {
-        const props = mockWidgetProps();
-        const columns = [
-            column("Test", col => {
-                col.alignment = "center";
-            }),
-            column("Test 2", col => (col.alignment = "right"))
-        ].map((col, index) => mockGridColumn(col, index));
-
-        props.visibleColumns = columns;
-        props.availableColumns = columns;
-
-        const component = renderWithRootContext(props);
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with dynamic row class", () => {
-        const component = renderWithRootContext({ ...mockWidgetProps(), rowClass: () => "myclass" });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly for preview when no header is provided", () => {
-        const props = mockWidgetProps();
-        const columns = [column("", col => (col.alignment = "center"))].map((col, index) => mockGridColumn(col, index));
-        props.preview = true;
-        props.visibleColumns = columns;
-        props.availableColumns = columns;
-
-        const component = renderWithRootContext(props);
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with header wrapper", () => {
-        const component = renderWithRootContext({
-            ...mockWidgetProps(),
-            headerWrapperRenderer: (index, header) => (
-                <div key={`header_wrapper_${index}`} className="my-custom-header">
-                    {header}
-                </div>
-            )
-        });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders the structure correctly with header filters and a11y", () => {
-        const component = renderWithRootContext({
-            ...mockWidgetProps(),
-            headerContent: (
-                <div className="my-custom-filters">
-                    <span />
-                </div>
-            ),
-            headerTitle: "filter title"
-        });
-
-        expect(component.asFragment()).toMatchSnapshot();
-    });
-
-    describe("with selection method checkbox", () => {
-        let props: ReturnType<typeof mockWidgetProps>;
-
-        beforeEach(() => {
-            props = mockWidgetProps();
-            props.selectActionHelper = new SelectActionHelper("Single", undefined, "checkbox", false, 5, "clear");
-            props.paging = true;
-            props.data = objectItems(3);
-        });
-
-        it("render method class", () => {
-            const { container } = renderWithRootContext(props, {});
-
-            expect(container.firstChild).toHaveClass("widget-datagrid-selection-method-checkbox");
-        });
-
-        it("render an extra column and add class to each selected row", () => {
-            props.selectActionHelper.isSelected = () => true;
-
-            const { asFragment } = renderWithRootContext(props, {});
-
-            expect(asFragment()).toMatchSnapshot();
-        });
-
-        it("render correct number of checked checkboxes", () => {
-            const [a, b, c, d, e, f] = (props.data = objectItems(6));
-            let selection: ObjectItem[] = [];
-            props.selectActionHelper.isSelected = item => selection.includes(item);
-
-            // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-            const getChecked = () => screen.getAllByRole<HTMLInputElement>("checkbox").filter(elt => elt.checked);
-
-            const { rerender } = render(withCtx(props));
-
-            expect(getChecked()).toHaveLength(0);
-
-            selection = [a, b, c];
-            rerender(withCtx({ ...props, data: [a, b, c, d, e, f] }));
-            expect(getChecked()).toHaveLength(3);
-
-            selection = [c];
-            rerender(withCtx({ ...props, data: [a, b, c, d, e, f] }));
-            expect(getChecked()).toHaveLength(1);
-
-            selection = [d, e];
-            rerender(withCtx({ ...props, data: [a, b, c, d, e, f] }));
-            expect(getChecked()).toHaveLength(2);
-
-            selection = [f, e, d, a];
-            rerender(withCtx({ ...props, data: [a, b, c, d, e, f] }));
-            expect(getChecked()).toHaveLength(4);
-        });
-
-        it("call onSelect when checkbox is clicked", async () => {
-            const items = props.data;
-            const onSelect = jest.fn();
-            props.selectActionHelper.onSelect = onSelect;
-            props.checkboxEventsController = new CheckboxEventsController(
-                item => ({
-                    item,
-                    selectionMethod: props.selectActionHelper.selectionMethod,
-                    selectionType: "Single",
-                    selectionMode: "clear",
-                    pageSize: props.pageSize
-                }),
-                onSelect,
-                jest.fn(),
-                jest.fn(),
-                jest.fn()
-            );
-
-            // renderWithRootContext(props, {
-            //     basicData: { gridInteractive: true } as unknown as GridBasicData
-            // });
-
-            const checkbox1 = screen.getAllByRole("checkbox")[0];
-            const checkbox3 = screen.getAllByRole("checkbox")[2];
-
-            await userEvent.click(checkbox1);
-            expect(onSelect).toHaveBeenCalledTimes(1);
-            expect(onSelect).toHaveBeenLastCalledWith(items[0], false, true);
-
-            await userEvent.click(checkbox1);
-            expect(onSelect).toHaveBeenCalledTimes(2);
-            expect(onSelect).toHaveBeenLastCalledWith(items[0], false, true);
-
-            await userEvent.click(checkbox3);
-            expect(onSelect).toHaveBeenCalledTimes(3);
-            expect(onSelect).toHaveBeenLastCalledWith(items[2], false, true);
-
-            await userEvent.click(checkbox3);
-            expect(onSelect).toHaveBeenCalledTimes(4);
-            expect(onSelect).toHaveBeenLastCalledWith(items[2], false, true);
-        });
-    });
-
-    it("not render header checkbox when showCheckboxColumn is false", () => {
-        const props = mockWidgetProps();
-        props.data = objectItems(5);
-        props.paging = true;
-        props.selectActionHelper = new SelectActionHelper("Multi", undefined, "checkbox", false, 5, "clear");
-        renderWithRootContext(props);
-
-        const colheader = screen.getAllByRole("columnheader")[0];
-        expect(queryByRole(colheader, "checkbox")).toBeNull();
-    });
-
-    describe("with multi selection helper", () => {
-        it("render header checkbox if helper is given and checkbox state depends on the helper status", () => {
-            const props = mockWidgetProps();
-            props.data = objectItems(5);
-            props.paging = true;
-            props.selectActionHelper = new SelectActionHelper("Multi", undefined, "checkbox", true, 5, "clear");
-
-            const renderWithStatus = (_status: MultiSelectionStatus): ReturnType<typeof render> => {
-                return renderWithRootContext(props);
-            };
-
-            renderWithStatus("none");
-            expect(queryByRole(screen.getAllByRole("columnheader")[0], "checkbox")).not.toBeChecked();
-
-            cleanup();
-            renderWithStatus("some");
-            expect(queryByRole(screen.getAllByRole("columnheader")[0], "checkbox")).toBeChecked();
-
-            cleanup();
-            renderWithStatus("all");
-            expect(queryByRole(screen.getAllByRole("columnheader")[0], "checkbox")).toBeChecked();
-        });
-
-        it("not render header checkbox if method is rowClick", () => {
-            const props = mockWidgetProps();
-            props.selectActionHelper = new SelectActionHelper("Multi", undefined, "rowClick", false, 5, "clear");
-
-            renderWithRootContext(props);
-
-            const colheader = screen.getAllByRole("columnheader")[0];
-            expect(queryByRole(colheader, "checkbox")).toBeNull();
-        });
-
-        it("call onSelectAll when header checkbox is clicked", async () => {
-            const props = mockWidgetProps();
-            props.selectActionHelper = new SelectActionHelper("Multi", undefined, "checkbox", true, 5, "clear");
-            props.selectActionHelper.onSelectAll = jest.fn();
-
-            renderWithRootContext(props, {});
-
-            const checkbox = screen.getAllByRole("checkbox")[0];
-
-            await userEvent.click(checkbox);
-            expect(props.selectActionHelper.onSelectAll).toHaveBeenCalledTimes(1);
-
-            await userEvent.click(checkbox);
-            expect(props.selectActionHelper.onSelectAll).toHaveBeenCalledTimes(2);
-        });
-    });
-
-    describe("with selection method rowClick", () => {
-        let props: ReturnType<typeof mockWidgetProps>;
-
-        beforeEach(() => {
-            props = mockWidgetProps();
-            props.selectActionHelper = new SelectActionHelper("Single", undefined, "rowClick", true, 5, "clear");
-            props.paging = true;
-            props.data = objectItems(3);
-        });
-
-        it("render method class", () => {
-            const { container } = renderWithRootContext(props, {});
-
-            expect(container.firstChild).toHaveClass("widget-datagrid-selection-method-click");
-        });
-
-        it("add class to each selected cell", () => {
-            props.selectActionHelper.isSelected = () => true;
-
-            const { asFragment } = renderWithRootContext(props, {});
-
-            expect(asFragment()).toMatchSnapshot();
-        });
-
-        it("call onSelect when cell is clicked", async () => {
-            const items = props.data;
-            const onSelect = jest.fn();
-            const columns = [column("Column A"), column("Column B")].map((col, index) => mockGridColumn(col, index));
-            props.visibleColumns = columns;
-            props.availableColumns = columns;
-            props.cellEventsController = new CellEventsController(
-                item => ({
-                    item,
-                    selectionType: props.selectActionHelper.selectionType,
-                    selectionMethod: props.selectActionHelper.selectionMethod,
-                    selectionMode: "clear",
-                    clickTrigger: "none",
-                    pageSize: props.pageSize
-                }),
-                onSelect,
-                jest.fn(),
-                jest.fn(),
-                jest.fn(),
-                jest.fn()
-            );
-
-            renderWithRootContext(props, {});
-
-            const rows = screen.getAllByRole("row").slice(1);
-            expect(rows).toHaveLength(3);
-
-            const [row1, row2] = rows;
-            const [cell1, cell2] = getAllByRole(row1, "gridcell");
-            const [cell3, cell4] = getAllByRole(row2, "gridcell");
-
-            const sleep = (t: number): Promise<void> => new Promise(res => setTimeout(res, t));
-
-            // Click cell1 two times
-            await userEvent.click(cell1);
-            expect(onSelect).toHaveBeenCalledTimes(1);
-            expect(onSelect).toHaveBeenLastCalledWith(items[0], false, false);
-            await sleep(320);
-
-            await userEvent.click(cell1);
-            expect(onSelect).toHaveBeenCalledTimes(2);
-            expect(onSelect).toHaveBeenLastCalledWith(items[0], false, false);
-            await sleep(320);
-
-            // Click cell2
-            await userEvent.click(cell2);
-            expect(onSelect).toHaveBeenCalledTimes(3);
-            expect(onSelect).toHaveBeenLastCalledWith(items[0], false, false);
-            await sleep(320);
-
-            // Click cell3 and cell4
-            await userEvent.click(cell4);
-            expect(onSelect).toHaveBeenCalledTimes(4);
-            expect(onSelect).toHaveBeenLastCalledWith(items[1], false, false);
-            await sleep(320);
-
-            await userEvent.click(cell3);
-            expect(onSelect).toHaveBeenCalledTimes(5);
-            expect(onSelect).toHaveBeenLastCalledWith(items[1], false, false);
-        });
-    });
-
-    describe("when selecting is enabled, allow the user to select multiple rows", () => {
-        let items: ReturnType<typeof objectItems>;
-        let props: ReturnType<typeof mockWidgetProps>;
-        let selection: SelectionMultiValue;
-        let ds: ListValue;
-
-        function WidgetWithSelectionHelper({
-            selectionMethod,
-            ...props
-        }: WidgetProps<GridColumn, ObjectItem> & {
-            selectionMethod: ItemSelectionMethodEnum;
-        }): ReactElement {
-            const helper = useSelectionHelper(selection, ds, undefined, "always clear");
-            const selectHelper = useSelectActionHelper(
-                {
-                    itemSelection: selection,
-                    itemSelectionMethod: selectionMethod,
-                    itemSelectionMode: "clear",
-                    showSelectAllToggle: false,
-                    pageSize: 5
-                },
-                helper
-            );
-            const cellEventsController = useCellEventsController(
-                selectHelper,
-                new ClickActionHelper("single", null),
-                props.focusController
-            );
-
-            const checkboxEventsController = useCheckboxEventsController(selectHelper, props.focusController);
-
-            const contextValue = {
-                basicData: {
-                    gridInteractive: true,
-                    selectionStatus: helper?.type === "Multi" ? helper.selectionStatus : "unknown"
-                } as unknown as GridBasicData,
-                selectionHelper: helper,
-                selectActionHelper: selectHelper,
-                cellEventsController,
-                checkboxEventsController,
-                focusController: props.focusController,
-                selectionCountStore: {} as unknown as SelectionCounterViewModel
-            };
-
-            return (
-                <LegacyContext.Provider value={contextValue}>
-                    <Widget
-                        {...props}
-                        selectActionHelper={selectHelper}
-                        cellEventsController={cellEventsController}
-                        checkboxEventsController={checkboxEventsController}
-                    />
-                </LegacyContext.Provider>
-            );
-        }
-
-        function setup(
-            jsx: ReactElement
-        ): ReturnType<typeof render> & { rows: HTMLElement[]; user: ReturnType<typeof userEvent.setup> } {
-            const result = render(jsx);
-            const user = userEvent.setup();
-            const rows = screen.getAllByRole("row").slice(1);
-
-            return {
-                user,
-                rows,
-                ...result
-            };
-        }
-
-        beforeEach(() => {
-            ds = list(20);
-            items = ds.items!;
-            props = mockWidgetProps();
-            selection = new SelectionMultiValueBuilder().build();
-            props.data = items;
-            const columns = [
-                column("Name"),
-                column("Description"),
-                column("Amount", col => {
-                    col.showContentAs = "customContent";
-                    col.content = listWidget(() => <input />);
-                })
-            ].map((col, index) => mockGridColumn(col, index));
-
-            props.visibleColumns = columns;
-            props.availableColumns = columns;
-        });
-
-        it("selects multiple rows with shift+click on a row", async () => {
-            const { rows, user } = setup(<WidgetWithSelectionHelper selectionMethod="rowClick" {...props} />);
-
-            expect(rows).toHaveLength(20);
-
-            await user.click(rows[10].children[2]);
-            expect(selection.selection).toEqual([items[10]]);
-
-            await user.keyboard("[ShiftLeft>]");
-
-            await user.click(rows[14].children[2]);
-            expect(selection.selection).toHaveLength(5);
-            expect(selection.selection).toEqual(items.slice(10, 15));
-
-            await user.click(rows[4].children[2]);
-            expect(selection.selection).toHaveLength(7);
-            expect(selection.selection).toEqual(items.slice(4, 11));
-
-            await user.click(rows[8].children[2]);
-            expect(selection.selection).toHaveLength(3);
-            expect(selection.selection).toEqual(items.slice(8, 11));
-        });
-
-        it("selects multiple rows with shift+click on a checkbox", async () => {
-            const { rows, user } = setup(<WidgetWithSelectionHelper selectionMethod="checkbox" {...props} />);
-
-            expect(rows).toHaveLength(20);
-
-            await user.click(getByRole(rows[10], "checkbox"));
-            expect(selection.selection).toEqual([items[10]]);
-
-            await user.keyboard("[ShiftLeft>]");
-
-            await user.click(getByRole(rows[14], "checkbox"));
-            expect(selection.selection).toHaveLength(5);
-            expect(selection.selection).toEqual(items.slice(10, 15));
-
-            await user.click(getByRole(rows[4], "checkbox"));
-            expect(selection.selection).toHaveLength(7);
-            expect(selection.selection).toEqual(items.slice(4, 11));
-
-            await user.click(getByRole(rows[8], "checkbox"));
-            expect(selection.selection).toHaveLength(3);
-            expect(selection.selection).toEqual(items.slice(8, 11));
-        });
-
-        it("selects all available rows with metaKey+a and method checkbox", async () => {
-            const { rows, user } = setup(<WidgetWithSelectionHelper selectionMethod="checkbox" {...props} />);
-
-            expect(rows).toHaveLength(20);
-
-            const [row] = rows;
-            const [checkbox] = getAllByRole(row, "checkbox");
-            await user.click(checkbox);
-            expect(checkbox).toHaveFocus();
-            expect(selection.selection).toHaveLength(1);
-
-            await user.keyboard("{Meta>}a{/Meta}");
-            expect(selection.selection).toHaveLength(20);
-        });
-
-        it("selects all available rows with metaKey+a and method rowClick", async () => {
-            const { rows, user } = setup(<WidgetWithSelectionHelper selectionMethod="rowClick" {...props} />);
-
-            expect(rows).toHaveLength(20);
-
-            const [row] = rows;
-            const [cell] = getAllByRole(row, "gridcell");
-            await user.click(cell);
-            expect(cell).toHaveFocus();
-            expect(selection.selection).toHaveLength(1);
-
-            await user.keyboard("{Meta>}a{/Meta}");
-            expect(selection.selection).toHaveLength(20);
-        });
-
-        it("selects all available rows with ctrlKey+a and method checkbox", async () => {
-            const { rows, user } = setup(<WidgetWithSelectionHelper selectionMethod="checkbox" {...props} />);
-
-            expect(rows).toHaveLength(20);
-
-            const [row] = rows;
-            const [checkbox] = getAllByRole(row, "checkbox");
-            await user.click(checkbox);
-            expect(checkbox).toHaveFocus();
-            expect(selection.selection).toHaveLength(1);
-
-            await user.keyboard("{Control>}a{/Control}");
-            expect(selection.selection).toHaveLength(20);
-        });
-
-        it("selects all available rows with ctrlKey+a and method rowClick", async () => {
-            const { rows, user } = setup(<WidgetWithSelectionHelper selectionMethod="rowClick" {...props} />);
-
-            expect(rows).toHaveLength(20);
-
-            const [row] = rows;
-            const [cell] = getAllByRole(row, "gridcell");
-            await user.click(cell);
-            expect(cell).toHaveFocus();
-            expect(selection.selection).toHaveLength(1);
-
-            await user.keyboard("{Control>}a{/Control}");
-            expect(selection.selection).toHaveLength(20);
-        });
-
-        it("must not select rows, when metaKey+a or ctrlKey+a pressed in custom widget", async () => {
-            const { rows, user } = setup(<WidgetWithSelectionHelper selectionMethod="checkbox" {...props} />);
-
-            expect(rows).toHaveLength(20);
-
-            const [input] = screen.getAllByRole("textbox");
-            await user.click(input);
-            await user.keyboard("Hello, world!");
-            expect(selection.selection).toHaveLength(0);
-
-            await user.keyboard("{Control>}a{/Control}");
-            expect(selection.selection).toHaveLength(0);
-
-            await user.keyboard("{Meta>}a{/Meta}");
-            expect(selection.selection).toHaveLength(0);
-        });
-    });
-
-    describe("when has interactive element", () => {
-        it("should not prevent default on keyboard input (space and Enter)", async () => {
-            const items = objectItems(3);
-
-            const props = mockWidgetProps();
-            const content = listWidget(() => <textarea />);
-            const columns = Array.from(["Monday", "Tuesday", "Wednesday"], header => {
-                const c = column(header);
-                c.showContentAs = "customContent";
-                c.content = content;
-                return c;
-            }).map((col, index) => mockGridColumn(col, index));
-
-            props.visibleColumns = columns;
-            props.availableColumns = columns;
-
-            const user = userEvent.setup();
-
-            renderWithRootContext({ ...props, data: items });
-
-            const [input] = screen.getAllByRole("textbox");
-            await user.click(input);
-            await user.keyboard("Hello...{Enter}{Enter}is it me you're looking for?");
-            expect(input).toHaveValue("Hello...\n\nis it me you're looking for?");
-        });
-    });
-});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap
deleted file mode 100644
index 9b26eb9fe5..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap
+++ /dev/null
@@ -1,1926 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Table renders the structure correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly for preview when no header is provided 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title=""
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label=""
-                  class="column-header align-column-center"
-                >
-                  <span>
-                     
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr tr-preview"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-center"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with column alignments 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-center"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              class="th"
-              data-column-id="1"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test 2"
-            >
-              <div
-                class="column-container"
-                id="dg1-column1"
-              >
-                <div
-                  aria-label="Test 2"
-                  class="column-header align-column-right"
-                >
-                  <span>
-                    Test 2
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-center"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-            <div
-              class="td td-borders align-column-right"
-              data-position="1,0"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with custom filtering 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-                <input
-                  type="text"
-                  value="dummy"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with dragging 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with dynamic row class 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr myclass"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with empty placeholder 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with filtering 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-                <input
-                  type="text"
-                  value="dummy"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with header filters and a11y 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      aria-label="filter title"
-      class="widget-datagrid-header header-filters"
-    >
-      <div
-        class="my-custom-filters"
-      >
-        <span />
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with header wrapper 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="my-custom-header"
-            >
-              <div
-                class="th"
-                data-column-id="0"
-                role="columnheader"
-                style="cursor: unset;"
-                title="Test"
-              >
-                <div
-                  class="column-container"
-                  id="dg1-column0"
-                >
-                  <div
-                    aria-label="Test"
-                    class="column-header align-column-left"
-                  >
-                    <span>
-                      Test
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with hiding 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr 54px;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              aria-label="Column selector"
-              class="th column-selector"
-              role="columnheader"
-              title="Column selector"
-            >
-              <div
-                class="column-selector-content"
-              >
-                <button
-                  aria-controls="dg1-column-selectors"
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="Column selector"
-                  class="btn btn-default column-selector-button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-eye fa-w-18"
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M0.589893 7.715C0.724893 7.52 3.91989 3 7.99989 3C12.0799 3 15.2749 7.52 15.4099 7.715L15.6099 8L15.4099 8.285C15.2749 8.48 12.0799 13 7.99989 13C3.91989 13 0.724893 8.48 0.589893 8.285L0.389893 8L0.589893 7.715ZM1.62489 8C2.37489 8.96 4.98989 12 7.99989 12C11.0099 12 13.6249 8.96 14.3749 8C13.6249 7.04 11.0099 4 7.99989 4C4.98989 4 2.37489 7.04 1.62489 8ZM5.5 8C5.5 6.62 6.62 5.5 8 5.5C9.38 5.5 10.5 6.62 10.5 8C10.5 9.38 9.38 10.5 8 10.5C6.62 10.5 5.5 9.38 5.5 8ZM6.5 8C6.5 8.825 7.175 9.5 8 9.5C8.825 9.5 9.5 8.825 9.5 8C9.5 7.175 8.825 6.5 8 6.5C7.175 6.5 6.5 7.175 6.5 8Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-            <div
-              class="td td-borders column-selector"
-              role="gridcell"
-              tabindex="-1"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with paging 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        >
-          <div
-            aria-label="Pagination"
-            class="pagination-bar"
-          >
-            <button
-              aria-label="Go to first page"
-              class="btn pagination-button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon step-backward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.19 6.63L11.51 15.61C11.25 15.81 11.25 16.2 11.51 16.4L23.2 25.38C23.53 25.64 24.01 25.4 24.01 24.99V7.02C24.01 6.6 23.53 6.37 23.2 6.63H23.19Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M10 6H8V26H10V6Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-            <button
-              aria-label="Go to previous page"
-              class="btn pagination-button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon backward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M14.19 6.63L3.51 15.61C3.25 15.81 3.25 16.2 3.51 16.4L14.2 25.38C14.53 25.64 15.01 25.4 15.01 24.99V7.02C15.01 6.6 14.53 6.37 14.2 6.63H14.19Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M27.19 6.63L16.5 15.61C16.24 15.81 16.24 16.2 16.5 16.4L27.19 25.38C27.52 25.64 28 25.4 28 24.99V7.02C28 6.6 27.52 6.37 27.19 6.63Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-            <span
-              class="sr-only sr-only-focusable"
-            >
-              Currently showing 11 to 20 
-            </span>
-            <div
-              aria-hidden="true"
-              class="paging-status"
-            >
-              11 to 20 
-            </div>
-            <button
-              aria-label="Go to next page"
-              class="btn pagination-button"
-              disabled=""
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon forward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M17.81 6.63C17.48 6.37 17 6.61 17 7.02V24.98C17 25.4 17.48 25.63 17.81 25.37L28.5 16.39C28.76 16.19 28.76 15.8 28.5 15.6L17.81 6.63Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M4.81 6.63C4.48 6.37 4 6.61 4 7.02V24.98C4 25.4 4.48 25.63 4.81 25.37L15.5 16.39C15.76 16.19 15.76 15.8 15.5 15.6L4.81 6.63Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with resizing 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table renders the structure correctly with sorting 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="td td-borders align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table with selection method checkbox render an extra column and add class to each selected row 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid widget-datagrid-selectable-rows widget-datagrid-selection-method-checkbox"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        aria-multiselectable="false"
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 48px 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th widget-datagrid-col-select"
-              role="columnheader"
-            />
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            aria-selected="true"
-            class="tr tr-selected"
-            role="row"
-          >
-            <div
-              class="td td-borders clickable widget-datagrid-col-select"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <input
-                aria-label="Select row 1"
-                checked=""
-                data-position="0,0"
-                tabindex="0"
-                type="checkbox"
-              />
-            </div>
-            <div
-              class="td td-borders clickable align-column-left"
-              data-position="1,0"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-          <div
-            aria-selected="true"
-            class="tr tr-selected"
-            role="row"
-          >
-            <div
-              class="td clickable widget-datagrid-col-select"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <input
-                aria-label="Select row 2"
-                checked=""
-                data-position="0,1"
-                tabindex="-1"
-                type="checkbox"
-              />
-            </div>
-            <div
-              class="td clickable align-column-left"
-              data-position="1,1"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-          <div
-            aria-selected="true"
-            class="tr tr-selected"
-            role="row"
-          >
-            <div
-              class="td clickable widget-datagrid-col-select"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <input
-                aria-label="Select row 3"
-                checked=""
-                data-position="0,2"
-                tabindex="-1"
-                type="checkbox"
-              />
-            </div>
-            <div
-              class="td clickable align-column-left"
-              data-position="1,2"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        >
-          <div
-            aria-label="Pagination"
-            class="pagination-bar"
-          >
-            <button
-              aria-label="Go to first page"
-              class="btn pagination-button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon step-backward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.19 6.63L11.51 15.61C11.25 15.81 11.25 16.2 11.51 16.4L23.2 25.38C23.53 25.64 24.01 25.4 24.01 24.99V7.02C24.01 6.6 23.53 6.37 23.2 6.63H23.19Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M10 6H8V26H10V6Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-            <button
-              aria-label="Go to previous page"
-              class="btn pagination-button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon backward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M14.19 6.63L3.51 15.61C3.25 15.81 3.25 16.2 3.51 16.4L14.2 25.38C14.53 25.64 15.01 25.4 15.01 24.99V7.02C15.01 6.6 14.53 6.37 14.2 6.63H14.19Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M27.19 6.63L16.5 15.61C16.24 15.81 16.24 16.2 16.5 16.4L27.19 25.38C27.52 25.64 28 25.4 28 24.99V7.02C28 6.6 27.52 6.37 27.19 6.63Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-            <span
-              class="sr-only sr-only-focusable"
-            >
-              Currently showing 11 to 20 
-            </span>
-            <div
-              aria-hidden="true"
-              class="paging-status"
-            >
-              11 to 20 
-            </div>
-            <button
-              aria-label="Go to next page"
-              class="btn pagination-button"
-              disabled=""
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon forward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M17.81 6.63C17.48 6.37 17 6.61 17 7.02V24.98C17 25.4 17.48 25.63 17.81 25.37L28.5 16.39C28.76 16.19 28.76 15.8 28.5 15.6L17.81 6.63Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M4.81 6.63C4.48 6.37 4 6.61 4 7.02V24.98C4 25.4 4.48 25.63 4.81 25.37L15.5 16.39C15.76 16.19 15.76 15.8 15.5 15.6L4.81 6.63Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Table with selection method rowClick add class to each selected cell 1`] = `
-<DocumentFragment>
-  <div
-    class="test widget-datagrid widget-datagrid-selectable-rows widget-datagrid-selection-method-click"
-  >
-    <div
-      class="widget-datagrid-top-bar table-header"
-    >
-      <div
-        class="widget-datagrid-padding-top"
-      />
-    </div>
-    <div
-      class="widget-datagrid-content"
-    >
-      <div
-        aria-multiselectable="false"
-        class="widget-datagrid-grid table"
-        role="grid"
-        style="grid-template-columns: 1fr;"
-      >
-        <div
-          class="widget-datagrid-grid-head"
-          role="rowgroup"
-        >
-          <div
-            class="tr"
-            role="row"
-          >
-            <div
-              class="th"
-              data-column-id="0"
-              role="columnheader"
-              style="cursor: unset;"
-              title="Test"
-            >
-              <div
-                class="column-container"
-                id="dg1-column0"
-              >
-                <div
-                  aria-label="Test"
-                  class="column-header align-column-left"
-                >
-                  <span>
-                    Test
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="widget-datagrid-grid-body table-content"
-          role="rowgroup"
-        >
-          <div
-            aria-selected="true"
-            class="tr tr-selected"
-            role="row"
-          >
-            <div
-              class="td td-borders clickable align-column-left"
-              data-position="0,0"
-              role="gridcell"
-              tabindex="0"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-          <div
-            aria-selected="true"
-            class="tr tr-selected"
-            role="row"
-          >
-            <div
-              class="td clickable align-column-left"
-              data-position="0,1"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-          <div
-            aria-selected="true"
-            class="tr tr-selected"
-            role="row"
-          >
-            <div
-              class="td clickable align-column-left"
-              data-position="0,2"
-              role="gridcell"
-              tabindex="-1"
-            >
-              <span
-                class="td-text"
-              >
-                Formatted Attr value
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="widget-datagrid-footer table-footer"
-    >
-      <div
-        class="widget-datagrid-paging-bottom"
-      >
-        <div
-          class="widget-datagrid-pb-end"
-        >
-          <div
-            aria-label="Pagination"
-            class="pagination-bar"
-          >
-            <button
-              aria-label="Go to first page"
-              class="btn pagination-button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon step-backward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.19 6.63L11.51 15.61C11.25 15.81 11.25 16.2 11.51 16.4L23.2 25.38C23.53 25.64 24.01 25.4 24.01 24.99V7.02C24.01 6.6 23.53 6.37 23.2 6.63H23.19Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M10 6H8V26H10V6Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-            <button
-              aria-label="Go to previous page"
-              class="btn pagination-button"
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon backward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M14.19 6.63L3.51 15.61C3.25 15.81 3.25 16.2 3.51 16.4L14.2 25.38C14.53 25.64 15.01 25.4 15.01 24.99V7.02C15.01 6.6 14.53 6.37 14.2 6.63H14.19Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M27.19 6.63L16.5 15.61C16.24 15.81 16.24 16.2 16.5 16.4L27.19 25.38C27.52 25.64 28 25.4 28 24.99V7.02C28 6.6 27.52 6.37 27.19 6.63Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-            <span
-              class="sr-only sr-only-focusable"
-            >
-              Currently showing 11 to 20 
-            </span>
-            <div
-              aria-hidden="true"
-              class="paging-status"
-            >
-              11 to 20 
-            </div>
-            <button
-              aria-label="Go to next page"
-              class="btn pagination-button"
-              disabled=""
-            >
-              <span
-                aria-hidden="true"
-              >
-                <svg
-                  class="pagination-icon forward"
-                  fill="currentColor"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M17.81 6.63C17.48 6.37 17 6.61 17 7.02V24.98C17 25.4 17.48 25.63 17.81 25.37L28.5 16.39C28.76 16.19 28.76 15.8 28.5 15.6L17.81 6.63Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M4.81 6.63C4.48 6.37 4 6.61 4 7.02V24.98C4 25.4 4.48 25.63 4.81 25.37L15.5 16.39C15.76 16.19 15.76 15.8 15.5 15.6L4.81 6.63Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/__tests__/config.spec.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/__tests__/config.spec.ts
new file mode 100644
index 0000000000..207fc69827
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/__tests__/config.spec.ts
@@ -0,0 +1,84 @@
+import { mockContainerProps } from "../../../utils/test-utils";
+import { datagridConfig } from "../Datagrid.config";
+
+describe("datagridConfig", () => {
+    it("should generate config with default values", () => {
+        const props = mockContainerProps();
+        const config = datagridConfig(props);
+
+        expect(config).toMatchObject({
+            checkboxColumnEnabled: false,
+            columnsDraggable: true,
+            columnsFilterable: true,
+            columnsHidable: true,
+            columnsResizable: true,
+            columnsSortable: true,
+            enableSelectAll: false,
+            filtersChannelName: expect.stringMatching(/^datagrid2_1:Datagrid@\w+:events$/),
+            id: expect.stringMatching(/^datagrid2_1:Datagrid@\w+$/),
+            keepSelection: false,
+            loadingType: "spinner",
+            multiselectable: undefined,
+            name: "datagrid2_1",
+            pagingPosition: "bottom",
+            refreshIntervalMs: 0,
+            selectAllCheckboxEnabled: true,
+            selectionEnabled: false,
+            selectorColumnEnabled: true,
+            settingsStorageEnabled: false
+        });
+    });
+
+    it("should generate config with multi-selection enabled", () => {
+        const props = {
+            ...mockContainerProps(),
+            itemSelection: { type: "Multi" } as any,
+            itemSelectionMethod: "checkbox" as const,
+            enableSelectAll: true,
+            keepSelection: true,
+            refreshInterval: 5
+        };
+        const config = datagridConfig(props);
+
+        expect(config).toMatchObject({
+            checkboxColumnEnabled: true,
+            enableSelectAll: true,
+            keepSelection: true,
+            multiselectable: true,
+            refreshIntervalMs: 5000,
+            selectionEnabled: true
+        });
+    });
+
+    it("should enable settings storage with localStorage", () => {
+        const props = {
+            ...mockContainerProps(),
+            configurationStorageType: "localStorage" as const
+        };
+        const config = datagridConfig(props);
+
+        expect(config.settingsStorageEnabled).toBe(true);
+    });
+
+    it("should enable settings storage with attribute when configurationAttribute is provided", () => {
+        const props = {
+            ...mockContainerProps(),
+            configurationStorageType: "attribute" as const,
+            configurationAttribute: { type: "attribute" } as any
+        };
+        const config = datagridConfig(props);
+
+        expect(config.settingsStorageEnabled).toBe(true);
+    });
+
+    it("should disable settings storage with attribute when configurationAttribute is not provided", () => {
+        const props = {
+            ...mockContainerProps(),
+            configurationStorageType: "attribute" as const,
+            configurationAttribute: undefined
+        };
+        const config = datagridConfig(props);
+
+        expect(config.settingsStorageEnabled).toBe(false);
+    });
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/__tests__/createDatagridContainer.spec.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/__tests__/createDatagridContainer.spec.ts
new file mode 100644
index 0000000000..647b5c8e28
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/__tests__/createDatagridContainer.spec.ts
@@ -0,0 +1,58 @@
+import { list } from "@mendix/widget-plugin-test-utils";
+import { SelectAllModule } from "../../../features/select-all/SelectAllModule.container";
+import { mockContainerProps } from "../../../utils/test-utils";
+import { MainGateProvider } from "../../services/MainGateProvider.service";
+import { CORE_TOKENS as CORE } from "../../tokens";
+import { createDatagridContainer } from "../createDatagridContainer";
+import { DatagridContainer } from "../Datagrid.container";
+
+describe("createDatagridContainer", () => {
+    it("should create container with mock props", () => {
+        const [container, selectAllModule, mainProvider] = createDatagridContainer(mockContainerProps());
+
+        expect(container).toBeInstanceOf(DatagridContainer);
+        expect(selectAllModule).toBeInstanceOf(SelectAllModule);
+        expect(mainProvider).toBeInstanceOf(MainGateProvider);
+    });
+
+    it("should bind main provider gate to the container", () => {
+        const [container, , mainProvider] = createDatagridContainer(mockContainerProps());
+
+        expect(container.get(CORE.mainGate)).toBe(mainProvider.gate);
+    });
+
+    it("bind itemCount to computed value", () => {
+        const [container] = createDatagridContainer(mockContainerProps());
+
+        const itemsCount = container.get(CORE.atoms.itemCount);
+        expect(itemsCount.get()).toBe(5);
+    });
+
+    it("reacts to datasource changes in itemCount", () => {
+        const [container, , mainProvider] = createDatagridContainer(mockContainerProps());
+
+        const itemsCount = container.get(CORE.atoms.itemCount);
+
+        expect(itemsCount.get()).toBe(5);
+
+        mainProvider.setProps({
+            ...mockContainerProps(),
+            datasource: list(10)
+        });
+
+        expect(itemsCount.get()).toBe(10);
+    });
+
+    it("bind dg config to the container", () => {
+        const props = mockContainerProps();
+        const [container] = createDatagridContainer(props);
+
+        const config = container.get(CORE.config);
+        expect(config).toBeDefined();
+        expect(config).toMatchObject({
+            name: "datagrid2_1",
+            refreshIntervalMs: 0,
+            selectionEnabled: false
+        });
+    });
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/createDatagridContainer.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/createDatagridContainer.ts
new file mode 100644
index 0000000000..afc94a9b8a
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/createDatagridContainer.ts
@@ -0,0 +1,34 @@
+import { DatagridContainerProps } from "../../../typings/DatagridProps";
+import { MainGateProps } from "../../../typings/MainGateProps";
+import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
+import { datagridConfig } from "../configs/Datagrid.config";
+import { MainGateProvider } from "../services/MainGateProvider.service";
+import { DatagridContainer } from "./Datagrid.container";
+import { RootContainer } from "./Root.container";
+
+export function createDatagridContainer(
+    props: DatagridContainerProps
+): [DatagridContainer, SelectAllModule, MainGateProvider<MainGateProps>] {
+    const root = new RootContainer();
+
+    const config = datagridConfig(props);
+
+    const mainProvider = new MainGateProvider(props);
+
+    const selectAllModule = new SelectAllModule(root).init({
+        props,
+        config,
+        mainGate: mainProvider.gate,
+        progressSrv: mainProvider.selectAllProgress
+    });
+
+    const container = new DatagridContainer(root).init({
+        props,
+        config,
+        selectAllModule,
+        mainGate: mainProvider.gate,
+        exportProgressService: mainProvider.exportProgress
+    });
+
+    return [container, selectAllModule, mainProvider];
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts
index cdc6f073f4..c259ffbf3f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/useDatagridContainer.ts
@@ -3,39 +3,11 @@ import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { Container } from "brandi";
 import { useEffect } from "react";
 import { DatagridContainerProps } from "../../../typings/DatagridProps";
-import { MainGateProps } from "../../../typings/MainGateProps";
-import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
-import { datagridConfig } from "../configs/Datagrid.config";
-import { DatagridContainer } from "../containers/Datagrid.container";
-import { RootContainer } from "../containers/Root.container";
-import { MainGateProvider } from "../services/MainGateProvider.service";
+import { createDatagridContainer } from "../containers/createDatagridContainer";
 import { CORE_TOKENS as CORE } from "../tokens";
 
 export function useDatagridContainer(props: DatagridContainerProps): Container {
-    const [container, selectAllModule, mainProvider] = useConst(function init(): [
-        DatagridContainer,
-        SelectAllModule,
-        MainGateProvider<MainGateProps>
-    ] {
-        const root = new RootContainer();
-        const config = datagridConfig(props);
-        const mainProvider = new MainGateProvider(props);
-        const selectAllModule = new SelectAllModule(root).init({
-            props,
-            config,
-            mainGate: mainProvider.gate,
-            progressSrv: mainProvider.selectAllProgress
-        });
-        const container = new DatagridContainer(root).init({
-            props,
-            config,
-            selectAllModule,
-            mainGate: mainProvider.gate,
-            exportProgressService: mainProvider.exportProgress
-        });
-
-        return [container, selectAllModule, mainProvider];
-    });
+    const [container, selectAllModule, mainProvider] = useConst(() => createDatagridContainer(props));
 
     // Run setup hooks on mount
     useSetup(() => container.get(CORE.setupService));
diff --git a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
index dd421de1c2..454da591ec 100644
--- a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
@@ -1,9 +1,9 @@
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { PositionController } from "@mendix/widget-plugin-grid/keyboard-navigation/PositionController";
 import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout";
-import { dynamicValue, listAttr, listExp } from "@mendix/widget-plugin-test-utils";
+import { dynamic, list, listAttr, listExp } from "@mendix/widget-plugin-test-utils";
 import { GUID, ObjectItem } from "mendix";
-import { ColumnsType } from "../../typings/DatagridProps";
+import { ColumnsType, DatagridContainerProps } from "../../typings/DatagridProps";
 import { Cell } from "../components/Cell";
 import { WidgetProps } from "../components/Widget";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
@@ -17,7 +17,7 @@ export const column = (header = "Test", patch?: (col: ColumnsType) => void): Col
         attribute: listAttr(() => "Attr value"),
         dynamicText: listExp(() => "Dynamic text"),
         draggable: false,
-        header: dynamicValue(header),
+        header: dynamic(header),
         hidable: "no" as const,
         resizable: false,
         showContentAs: "attribute",
@@ -25,7 +25,7 @@ export const column = (header = "Test", patch?: (col: ColumnsType) => void): Col
         sortable: false,
         width: "autoFill" as const,
         wrapText: false,
-        visible: dynamicValue(true),
+        visible: dynamic(true),
         minWidth: "auto",
         minWidthLimit: 100,
         allowEventPropagation: true,
@@ -107,3 +107,40 @@ export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
         )
     };
 }
+
+export function mockContainerProps(overrides?: Partial<DatagridContainerProps>): DatagridContainerProps {
+    return {
+        class: "dg-one",
+        name: "datagrid2_1",
+        datasource: list(5),
+        refreshInterval: 0,
+        columnsFilterable: true,
+        columnsSortable: true,
+        columnsDraggable: true,
+        columnsHidable: true,
+        columnsResizable: true,
+        columns: [column("Col1"), column("Col2")],
+        itemSelectionMethod: "checkbox",
+        itemSelectionMode: "clear",
+        enableSelectAll: false,
+        keepSelection: false,
+        showSelectAllToggle: true,
+        pageSize: 10,
+        selectionCounterPosition: "bottom",
+        pagination: "buttons",
+        refreshIndicator: false,
+        loadingType: "spinner",
+        showPagingButtons: "auto",
+        pagingPosition: "bottom",
+        onClickTrigger: "single",
+        showNumberOfRows: false,
+        showEmptyPlaceholder: "none",
+        configurationStorageType: "attribute",
+        configurationAttribute: undefined,
+        storeFiltersInPersonalization: true,
+        selectAllText: dynamic("Select all items"),
+        selectAllTemplate: dynamic("Select all %d items"),
+        allSelectedText: dynamic("All items selected"),
+        ...overrides
+    };
+}

From c9c257f3844c540f06306b492084afea05e9988d Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Tue, 18 Nov 2025 11:49:52 +0100
Subject: [PATCH 12/21] test: add grid component test

---
 package.json                                  |  1 +
 .../src/components/__tests__/Grid.spec.tsx    | 33 +++++++++++++++
 .../__snapshots__/Grid.spec.tsx.snap          | 25 +++++++++++
 pnpm-lock.yaml                                | 41 +++++++++----------
 4 files changed, 78 insertions(+), 22 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/components/__tests__/Grid.spec.tsx
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Grid.spec.tsx.snap

diff --git a/package.json b/package.json
index efccd1e5fc..f9cc2c134d 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
             "@codemirror/state": "^6.5.2",
             "@codemirror/view": "^6.38.1",
             "@mendix/pluggable-widgets-tools": "10.21.2",
+            "@testing-library/react": ">=15.0.6",
             "@types/big.js": "^6.2.2",
             "@types/node": "~22.14.0",
             "@types/react": ">=18.2.36",
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Grid.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Grid.spec.tsx
new file mode 100644
index 0000000000..fd42081e81
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Grid.spec.tsx
@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+import { ContainerProvider } from "brandi-react";
+import { createDatagridContainer } from "../../model/containers/createDatagridContainer";
+import { mockContainerProps } from "../../utils/test-utils";
+import { Grid } from "../Grid";
+
+describe("Grid", () => {
+    it("renders without crashing", () => {
+        const props = mockContainerProps();
+        const [container] = createDatagridContainer(props);
+        const { asFragment } = render(
+            <ContainerProvider container={container}>
+                <Grid>Test</Grid>
+            </ContainerProvider>
+        );
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("renders without selector column", () => {
+        const [container] = createDatagridContainer({
+            ...mockContainerProps(),
+            columnsHidable: false
+        });
+        const { asFragment } = render(
+            <ContainerProvider container={container}>
+                <Grid>Test</Grid>
+            </ContainerProvider>
+        );
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Grid.spec.tsx.snap b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Grid.spec.tsx.snap
new file mode 100644
index 0000000000..a6e74b1f27
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Grid.spec.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid renders without crashing 1`] = `
+<DocumentFragment>
+  <div
+    class="widget-datagrid-grid table"
+    role="grid"
+    style="grid-template-columns: 1fr 1fr 54px;"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Grid renders without selector column 1`] = `
+<DocumentFragment>
+  <div
+    class="widget-datagrid-grid table"
+    role="grid"
+    style="grid-template-columns: 1fr 1fr;"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7774b684ae..f1e87986c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,7 @@ overrides:
   '@codemirror/state': ^6.5.2
   '@codemirror/view': ^6.38.1
   '@mendix/pluggable-widgets-tools': 10.21.2
+  '@testing-library/react': '>=15.0.6'
   '@types/big.js': ^6.2.2
   '@types/node': ~22.14.0
   '@types/react': '>=18.2.36'
@@ -4703,12 +4704,20 @@ packages:
     resolution: {integrity: sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==}
     engines: {node: '>=8', npm: '>=6', yarn: '>=1'}
 
-  '@testing-library/react@13.4.0':
-    resolution: {integrity: sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==}
-    engines: {node: '>=12'}
+  '@testing-library/react@16.3.0':
+    resolution: {integrity: sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==}
+    engines: {node: '>=18'}
     peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': '>=18.2.36'
+      '@types/react-dom': ^18.0.0 || ^19.0.0
       react: '>=18.0.0 <19.0.0'
       react-dom: '>=18.0.0 <19.0.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
   '@testing-library/user-event@14.6.1':
     resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
@@ -12453,7 +12462,7 @@ snapshots:
       '@rollup/pluginutils': 5.3.0(rollup@3.29.5)
       '@testing-library/dom': 8.20.1
       '@testing-library/jest-dom': 5.17.0
-      '@testing-library/react': 13.4.0(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/react': 16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@18.3.7(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event': 14.6.1(@testing-library/dom@8.20.1)
       '@types/react': 19.2.2
       '@types/react-dom': 18.3.7(@types/react@19.2.2)
@@ -12483,7 +12492,7 @@ snapshots:
       identity-obj-proxy: 3.0.0
       jasmine: 3.99.0
       jasmine-core: 3.99.1
-      jest: 29.7.0(@types/node@22.14.1)
+      jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
       jest-environment-jsdom: 29.7.0
       jest-jasmine2: 29.7.0
       jest-junit: 13.2.0
@@ -13060,15 +13069,15 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react@13.4.0(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@18.3.7(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@testing-library/dom': 8.20.1
-      '@types/react-dom': 18.3.7(@types/react@19.2.2)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 18.3.7(@types/react@19.2.2)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@8.20.1)':
     dependencies:
@@ -17026,18 +17035,6 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@29.7.0(@types/node@22.14.1):
-    dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
-      '@jest/types': 29.6.3
-      import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)):
     dependencies:
       '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
@@ -19904,7 +19901,7 @@ snapshots:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
       handlebars: 4.7.8
-      jest: 29.7.0(@types/node@22.14.1)
+      jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
       json5: 2.2.3
       lodash.memoize: 4.1.2
       make-error: 1.3.6

From 23684cca71cb537c202c5f4a509a456a2a2e74a8 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Tue, 18 Nov 2025 13:52:47 +0100
Subject: [PATCH 13/21] refactor: rewire grid header props

---
 .../datagrid-web/src/Datagrid.tsx             |  5 --
 .../src/components/ColumnProvider.tsx         | 17 ++++
 .../src/components/GridHeader.tsx             | 83 ++++---------------
 .../datagrid-web/src/components/Header.tsx    | 70 +++++++---------
 .../datagrid-web/src/components/Row.tsx       | 14 ++--
 .../src/components/RowsRenderer.tsx           | 13 ++-
 .../datagrid-web/src/components/Widget.tsx    | 31 +------
 .../src/model/hooks/injection-hooks.ts        |  1 +
 .../datagrid-web/src/model/tokens.ts          |  2 +
 9 files changed, 83 insertions(+), 153 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/components/ColumnProvider.tsx

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 3cfb003e7e..52ae54bcf9 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -85,7 +85,6 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                 )}
                 headerTitle={props.filterSectionTitle?.value}
                 headerContent={props.filtersPlaceholder}
-                headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
                 id={useMemo(() => `DataGrid${generateUUID()}`, [])}
                 numberOfItems={props.datasource.totalCount}
                 onExportCancel={abortExport}
@@ -95,10 +94,6 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                 styles={props.style}
                 exporting={exportProgress.inProgress}
                 processedRows={exportProgress.loaded}
-                visibleColumns={columnsStore.visibleColumns}
-                availableColumns={columnsStore.availableColumns}
-                setIsResizing={(status: boolean) => columnsStore.setIsResizing(status)}
-                columnsSwap={(moved, [target, placement]) => columnsStore.swapColumns(moved, [target, placement])}
                 selectActionHelper={selectActionHelper}
                 cellEventsController={cellEventsController}
                 checkboxEventsController={checkboxEventsController}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/ColumnProvider.tsx b/packages/pluggableWidgets/datagrid-web/src/components/ColumnProvider.tsx
new file mode 100644
index 0000000000..cc4003d69b
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/ColumnProvider.tsx
@@ -0,0 +1,17 @@
+import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
+import { Container } from "brandi";
+import { ContainerProvider } from "brandi-react";
+import { PropsWithChildren, ReactNode } from "react";
+import { CORE_TOKENS as CORE } from "../model/tokens";
+import { GridColumn } from "../typings/GridColumn";
+
+/** Provider to bind & provider column store for children at runtime. */
+export function ColumnProvider(props: PropsWithChildren<{ column: GridColumn }>): ReactNode {
+    const ct = useConst(() => {
+        const container = new Container();
+        container.bind(CORE.column).toConstant(props.column);
+        return container;
+    });
+
+    return <ContainerProvider container={ct}>{props.children}</ContainerProvider>;
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
index 5ef8785352..39b86c6d3a 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
@@ -1,57 +1,21 @@
-import { ReactElement, ReactNode, useCallback, useState } from "react";
-import { ColumnId, GridColumn } from "../typings/GridColumn";
+import { ReactElement, useState } from "react";
+import { useColumnsStore, useDatagridConfig } from "../model/hooks/injection-hooks";
+import { ColumnId } from "../typings/GridColumn";
 import { CheckboxColumnHeader } from "./CheckboxColumnHeader";
+import { ColumnProvider } from "./ColumnProvider";
 import { ColumnResizer } from "./ColumnResizer";
 import { ColumnSelector } from "./ColumnSelector";
 import { Header } from "./Header";
 import { HeaderSkeletonLoader } from "./loader/HeaderSkeletonLoader";
 
-type GridHeaderProps = {
-    availableColumns: GridColumn[];
-    columns: GridColumn[];
-    setIsResizing: (status: boolean) => void;
-    columnsDraggable: boolean;
-    columnsFilterable: boolean;
-    columnsHidable: boolean;
-    columnsResizable: boolean;
-    columnsSortable: boolean;
-    columnsSwap: (source: ColumnId, target: [ColumnId, "after" | "before"]) => void;
-    filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
-    headerWrapperRenderer: (columnIndex: number, header: ReactElement) => ReactElement;
-    id: string;
-    isLoading: boolean;
-    preview?: boolean;
-};
-
-export function GridHeader({
-    availableColumns,
-    columns,
-    setIsResizing,
-    columnsDraggable,
-    columnsFilterable,
-    columnsHidable,
-    columnsResizable,
-    columnsSortable,
-    columnsSwap,
-    filterRenderer,
-    headerWrapperRenderer,
-    id,
-    isLoading,
-    preview
-}: GridHeaderProps): ReactElement {
+export function GridHeader(): ReactElement {
+    const { columnsHidable, id: gridId } = useDatagridConfig();
+    const columnsStore = useColumnsStore();
+    const columns = columnsStore.visibleColumns;
     const [dragOver, setDragOver] = useState<[ColumnId, "before" | "after"] | undefined>(undefined);
     const [isDragging, setIsDragging] = useState<[ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined>();
 
-    const renderFilterWrapper = useCallback(
-        (children: ReactNode) => (
-            <div className="filter" style={{ pointerEvents: isDragging ? "none" : undefined }}>
-                {children}
-            </div>
-        ),
-        [isDragging]
-    );
-
-    if (isLoading) {
+    if (!columnsStore.loaded) {
         return <HeaderSkeletonLoader size={columns.length} />;
     }
 
@@ -59,41 +23,28 @@ export function GridHeader({
         <div className="widget-datagrid-grid-head" role="rowgroup">
             <div key="headers_row" className="tr" role="row">
                 <CheckboxColumnHeader key="headers_column_select_all" />
-                {columns.map((column, index) =>
-                    headerWrapperRenderer(
-                        index,
+                {columns.map(column => (
+                    <ColumnProvider column={column} key={`${column.columnId}`}>
                         <Header
-                            key={`${column.columnId}`}
-                            className={`align-column-${column.alignment}`}
-                            gridId={id}
-                            column={column}
-                            draggable={columnsDraggable}
                             dropTarget={dragOver}
-                            filterable={columnsFilterable}
-                            filterWidget={filterRenderer(renderFilterWrapper, column.columnIndex)}
-                            hidable={columnsHidable}
                             isDragging={isDragging}
-                            preview={preview}
-                            resizable={columnsResizable && columns.at(-1) !== column}
                             resizer={
                                 <ColumnResizer
-                                    onResizeStart={() => setIsResizing(true)}
-                                    onResizeEnds={() => setIsResizing(false)}
+                                    onResizeStart={() => columnsStore.setIsResizing(true)}
+                                    onResizeEnds={() => columnsStore.setIsResizing(false)}
                                     setColumnWidth={(width: number) => column.setSize(width)}
                                 />
                             }
-                            swapColumns={columnsSwap}
                             setDropTarget={setDragOver}
                             setIsDragging={setIsDragging}
-                            sortable={columnsSortable}
                         />
-                    )
-                )}
+                    </ColumnProvider>
+                ))}
                 {columnsHidable && (
                     <ColumnSelector
                         key="headers_column_selector"
-                        columns={availableColumns}
-                        id={id}
+                        columns={columnsStore.availableColumns}
+                        id={gridId}
                         visibleLength={columns.length}
                     />
                 )}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
index 54c35f8c6a..9e7b7beec6 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import {
     Dispatch,
     DragEvent,
@@ -9,82 +10,69 @@ import {
     SetStateAction,
     useCallback
 } from "react";
-import classNames from "classnames";
+import { FaArrowsAltV } from "./icons/FaArrowsAltV";
 import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
 import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
-import { FaArrowsAltV } from "./icons/FaArrowsAltV";
 
-import { ColumnResizerProps } from "./ColumnResizer";
+import { useColumn, useColumnsStore, useDatagridConfig } from "../model/hooks/injection-hooks";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
+import { ColumnResizerProps } from "./ColumnResizer";
 
 export interface HeaderProps {
-    className?: string;
-    gridId: string;
-    column: GridColumn;
-    sortable: boolean;
-    resizable: boolean;
-    filterable: boolean;
-    hidable: boolean;
-    draggable: boolean;
-    filterWidget?: ReactNode;
-    preview?: boolean;
+    isLast?: boolean;
     resizer: ReactElement<ColumnResizerProps>;
+
     dropTarget?: [ColumnId, "before" | "after"];
     isDragging?: [ColumnId | undefined, ColumnId, ColumnId | undefined];
     setDropTarget: Dispatch<SetStateAction<[ColumnId, "before" | "after"] | undefined>>;
     setIsDragging: Dispatch<SetStateAction<[ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined>>;
-    swapColumns: (source: ColumnId, target: [ColumnId, "before" | "after"]) => void;
 }
 
 export function Header(props: HeaderProps): ReactElement {
-    const canSort = props.sortable && props.column.canSort;
-    const canDrag = props.draggable && (props.column.canDrag ?? false);
+    const { columnsFilterable, id: gridId } = useDatagridConfig();
+    const columnsStore = useColumnsStore();
+    const column = useColumn();
+    const { canDrag, canSort } = column;
+
     const draggableProps = useDraggable(
         canDrag,
-        props.swapColumns,
+        columnsStore.swapColumns.bind(columnsStore),
         props.dropTarget,
         props.setDropTarget,
         props.isDragging,
         props.setIsDragging
     );
 
-    const sortIcon = canSort ? getSortIcon(props.column) : null;
-    const sortProps = canSort ? getSortProps(props.column) : null;
-    const caption = props.column.header.trim();
+    const sortIcon = canSort ? getSortIcon(column) : null;
+    const sortProps = canSort ? getSortProps(column) : null;
+    const caption = column.header.trim();
 
     return (
         <div
-            aria-sort={getAriaSort(canSort, props.column)}
-            className={classNames(
-                "th",
-                {
-                    "hidden-column-preview":
-                        props.preview && (!props.column.isAvailable || (props.hidable && props.column.isHidden))
-                },
-                {
-                    [`drop-${props.dropTarget?.[1]}`]: props.column.columnId === props.dropTarget?.[0],
-                    dragging: props.column.columnId === props.isDragging?.[1],
-                    "dragging-over-self": props.column.columnId === props.isDragging?.[1] && !props.dropTarget
-                }
-            )}
+            aria-sort={getAriaSort(canSort, column)}
+            className={classNames("th", {
+                [`drop-${props.dropTarget?.[1]}`]: column.columnId === props.dropTarget?.[0],
+                dragging: column.columnId === props.isDragging?.[1],
+                "dragging-over-self": column.columnId === props.isDragging?.[1] && !props.dropTarget
+            })}
             role="columnheader"
             style={!canSort ? { cursor: "unset" } : undefined}
             title={caption}
-            ref={ref => props.column.setHeaderElementRef(ref)}
-            data-column-id={props.column.columnId}
+            ref={ref => column.setHeaderElementRef(ref)}
+            data-column-id={column.columnId}
             onDrop={draggableProps.onDrop}
             onDragEnter={draggableProps.onDragEnter}
             onDragOver={draggableProps.onDragOver}
         >
             <div
                 className={classNames("column-container")}
-                id={`${props.gridId}-column${props.column.columnId}`}
+                id={`${gridId}-column${column.columnId}`}
                 draggable={draggableProps.draggable}
                 onDragStart={draggableProps.onDragStart}
                 onDragEnd={draggableProps.onDragEnd}
             >
                 <div
-                    className={classNames("column-header", { clickable: canSort }, props.className)}
+                    className={classNames("column-header", { clickable: canSort }, `align-column-${column.alignment}`)}
                     style={{ pointerEvents: props.isDragging ? "none" : undefined }}
                     {...sortProps}
                     aria-label={canSort ? "sort " + caption : caption}
@@ -92,9 +80,13 @@ export function Header(props: HeaderProps): ReactElement {
                     <span>{caption.length > 0 ? caption : "\u00a0"}</span>
                     {sortIcon}
                 </div>
-                {props.filterable && props.filterWidget}
+                {columnsFilterable && (
+                    <div className="filter" style={{ pointerEvents: props.isDragging ? "none" : undefined }}>
+                        {columnsStore.columnFilters[column.columnIndex]?.renderFilterWidgets()}
+                    </div>
+                )}
             </div>
-            {props.resizable && props.column.canResize && props.resizer}
+            {column.canResize ? props.resizer : null}
         </div>
     );
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
index c89ed119d4..97b6227ae4 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
@@ -1,11 +1,11 @@
 import classNames from "classnames";
 import { ObjectItem } from "mendix";
 import { ReactElement } from "react";
+import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { CellComponent, EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
-import { SelectorCell } from "./SelectorCell";
 import { CheckboxCell } from "./CheckboxCell";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
+import { SelectorCell } from "./SelectorCell";
 
 export interface RowProps<C extends GridColumn> {
     className?: string;
@@ -14,23 +14,21 @@ export interface RowProps<C extends GridColumn> {
     item: ObjectItem;
     index: number;
     showSelectorCell?: boolean;
-    selectableWrapper?: (column: number, children: ReactElement) => ReactElement;
     selectActionHelper: SelectActionHelper;
-    preview: boolean;
     totalRows: number;
     clickable: boolean;
     eventsController: EventsController;
 }
 
 export function Row<C extends GridColumn>(props: RowProps<C>): ReactElement {
-    const { CellComponent: Cell, selectActionHelper, preview, totalRows, eventsController } = props;
+    const { CellComponent: Cell, selectActionHelper, totalRows, eventsController } = props;
     const selected = selectActionHelper.isSelected(props.item);
     const ariaSelected = selectActionHelper.selectionType === "None" ? undefined : selected;
     const borderTop = props.index === 0;
 
     return (
         <div
-            className={classNames("tr", { "tr-selected": selected, "tr-preview": preview }, props.className)}
+            className={classNames("tr", { "tr-selected": selected }, props.className)}
             role="row"
             aria-selected={ariaSelected}
         >
@@ -52,12 +50,12 @@ export function Row<C extends GridColumn>(props: RowProps<C>): ReactElement {
                         columnIndex={selectActionHelper.showCheckboxColumn ? baseIndex + 1 : baseIndex}
                         item={props.item}
                         clickable={props.clickable}
-                        preview={preview}
+                        preview={false}
                         eventsController={eventsController}
                     />
                 );
 
-                return preview ? props.selectableWrapper?.(baseIndex, cell) : cell;
+                return cell;
             })}
             {props.showSelectorCell && (
                 <SelectorCell
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
index 710401a460..7d3dff8de2 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
@@ -1,15 +1,16 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { ObjectItem } from "mendix";
+import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
+import { useColumnsStore } from "../model/hooks/injection-hooks";
 import { CellComponent, EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
 import { Row } from "./Row";
 
 interface RowsRendererProps {
     Cell: CellComponent<GridColumn>;
-    columns: GridColumn[];
     columnsHidable: boolean;
     eventsController: EventsController;
     focusController: FocusTargetController;
@@ -17,11 +18,11 @@ interface RowsRendererProps {
     preview: boolean;
     rowClass?: (item: ObjectItem) => string;
     rows: ObjectItem[];
-    selectableWrapper?: (column: number, children: ReactElement) => ReactElement;
     selectActionHelper: SelectActionHelper;
 }
 
-export function RowsRenderer(props: RowsRendererProps): ReactElement {
+export const RowsRenderer = observer(function RowsRenderer(props: RowsRendererProps): ReactElement {
+    const { visibleColumns } = useColumnsStore();
     return (
         <KeyNavProvider focusController={props.focusController}>
             {props.rows.map((item, rowIndex) => {
@@ -30,19 +31,17 @@ export function RowsRenderer(props: RowsRendererProps): ReactElement {
                         totalRows={props.rows.length}
                         clickable={props.interactive}
                         selectActionHelper={props.selectActionHelper}
-                        preview={props.preview}
                         eventsController={props.eventsController}
                         CellComponent={props.Cell}
                         className={props.rowClass?.(item)}
-                        columns={props.columns}
+                        columns={visibleColumns}
                         index={rowIndex}
                         item={item}
                         key={`row_${item.id}`}
                         showSelectorCell={props.columnsHidable}
-                        selectableWrapper={props.selectableWrapper}
                     />
                 );
             })}
         </KeyNavProvider>
     );
-}
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index a3bca322da..476670fcbd 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -11,7 +11,7 @@ import { SelectionProgressDialog } from "../features/select-all/SelectionProgres
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { useBasicData } from "../model/hooks/injection-hooks";
 import { CellComponent, EventsController } from "../typings/CellComponent";
-import { ColumnId, GridColumn } from "../typings/GridColumn";
+import { GridColumn } from "../typings/GridColumn";
 import { ExportWidget } from "./ExportWidget";
 import { Grid } from "./Grid";
 import { GridBody } from "./GridBody";
@@ -36,7 +36,6 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
     headerContent?: ReactNode;
     headerTitle?: string;
-    headerWrapperRenderer: (columnIndex: number, header: ReactElement) => ReactElement;
     id: string;
     numberOfItems?: number;
     onExportCancel?: () => void;
@@ -58,12 +57,6 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     checkboxEventsController: EventsController;
     selectActionHelper: SelectActionHelper;
     focusController: FocusTargetController;
-
-    visibleColumns: GridColumn[];
-    availableColumns: GridColumn[];
-
-    columnsSwap: (source: ColumnId, target: [ColumnId, "after" | "before"]) => void;
-    setIsResizing: (status: boolean) => void;
 }
 
 export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElement => {
@@ -105,8 +98,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerTitle,
         loadMoreButtonCaption,
         showRefreshIndicator,
-        selectActionHelper,
-        visibleColumns
+        selectActionHelper
     } = props;
 
     const basicData = useBasicData();
@@ -117,22 +109,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
             <WidgetHeader headerTitle={headerTitle} headerContent={headerContent} />
             <WidgetContent>
                 <Grid>
-                    <GridHeader
-                        availableColumns={props.availableColumns}
-                        columns={visibleColumns}
-                        setIsResizing={props.setIsResizing}
-                        columnsDraggable={props.columnsDraggable}
-                        columnsFilterable={props.columnsFilterable}
-                        columnsHidable={props.columnsHidable}
-                        columnsResizable={props.columnsResizable}
-                        columnsSortable={props.columnsSortable}
-                        columnsSwap={props.columnsSwap}
-                        filterRenderer={props.filterRenderer}
-                        headerWrapperRenderer={props.headerWrapperRenderer}
-                        id={props.id}
-                        isLoading={props.columnsLoading}
-                        preview={false}
-                    />
+                    <GridHeader />
                     <SelectAllBar />
                     {showRefreshIndicator ? <RefreshIndicator /> : null}
                     <GridBody>
@@ -140,11 +117,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                             preview={false}
                             interactive={basicData.gridInteractive}
                             Cell={CellComponent}
-                            columns={visibleColumns}
                             columnsHidable={columnsHidable}
                             rows={rows}
                             rowClass={props.rowClass}
-                            selectableWrapper={props.headerWrapperRenderer}
                             selectActionHelper={selectActionHelper}
                             focusController={props.focusController}
                             eventsController={props.cellEventsController}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index 01506591f9..002fc87a47 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -14,3 +14,4 @@ export const [useGridStyle] = createInjectionHooks(DG.gridColumnsStyle);
 export const [useQueryService] = createInjectionHooks(DG.query);
 export const [useVisibleColumnsCount] = createInjectionHooks(CORE.atoms.visibleColumnsCount);
 export const [useItemCount] = createInjectionHooks(CORE.atoms.itemCount);
+export const [useColumn] = createInjectionHooks(CORE.column);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index 6e28788afe..4b8962665f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -27,6 +27,7 @@ import { ColumnGroupStore } from "../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../helpers/state/GridPersonalizationStore";
 import { DatasourceParamsController } from "../model/services/DatasourceParamsController";
+import { GridColumn } from "../typings/GridColumn";
 import { DatagridConfig } from "./configs/Datagrid.config";
 import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
@@ -46,6 +47,7 @@ export const CORE_TOKENS = {
         isAllItemsPresent: token<ComputedAtom<boolean>>("@computed:isAllItemsPresent")
     },
     columnsStore: token<ColumnGroupStore>("ColumnGroupStore"),
+    column: token<GridColumn>("@store:GridColumn"),
 
     config: token<DatagridConfig>("DatagridConfig"),
 

From 558d02aff35e1fb3ae73865450894398dd981606 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Tue, 18 Nov 2025 14:14:01 +0100
Subject: [PATCH 14/21] refactor: deprecate dg basic data

---
 .../src/helpers/state/GridBasicData.ts        |  1 +
 .../src/model/configs/Datagrid.config.ts      |  8 ++++-
 .../src/model/containers/Root.container.ts    |  5 ++++
 .../src/model/hooks/injection-hooks.ts        |  1 +
 .../src/model/services/Texts.service.ts       | 29 +++++++++++++++++++
 .../datagrid-web/src/model/tokens.ts          |  5 +++-
 .../datagrid-web/typings/MainGateProps.ts     |  3 ++
 7 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/GridBasicData.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/state/GridBasicData.ts
index f53082d863..9dd2181505 100644
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/state/GridBasicData.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/helpers/state/GridBasicData.ts
@@ -10,6 +10,7 @@ type Props = Pick<
 type Gate = DerivedPropsGate<Props>;
 
 /** This is basic data class, just a props mapper. Don't add any state or complex logic. */
+/** @deprecated use `TextsService` instead */
 export class GridBasicData {
     private gate: Gate;
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index 4268e2561e..09dfa32631 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -22,6 +22,7 @@ export interface DatagridConfig {
     columnsHidable: boolean;
     columnsResizable: boolean;
     columnsSortable: boolean;
+    isInteractive: boolean;
 }
 
 export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
@@ -46,7 +47,8 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         columnsDraggable: props.columnsDraggable,
         columnsFilterable: props.columnsFilterable,
         columnsResizable: props.columnsResizable,
-        columnsSortable: props.columnsSortable
+        columnsSortable: props.columnsSortable,
+        isInteractive: isInteractive(props)
     };
 
     return Object.freeze(config);
@@ -71,3 +73,7 @@ function isSettingsStorageEnabled(props: DatagridContainerProps): boolean {
     if (props.configurationStorageType === "attribute" && props.configurationAttribute) return true;
     return false;
 }
+
+function isInteractive(props: DatagridContainerProps): boolean {
+    return props.itemSelection !== undefined || props.onClick !== undefined;
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
index 277cf65a7c..f821c7c1a1 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
@@ -16,6 +16,7 @@ import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-
 import { Container, injected } from "brandi";
 import { visibleColumnsCountAtom } from "../models/columns.model";
 import { DatagridSetupService } from "../services/DatagridSetup.service";
+import { TextsService } from "../services/Texts.service";
 import { CORE_TOKENS as CORE } from "../tokens";
 
 // datasource
@@ -39,6 +40,9 @@ injected(isCurrentPageSelectedAtom, CORE.mainGate);
 injected(selectedCountMultiAtom, CORE.mainGate);
 injected(selectionCounterTextsStore, CORE.mainGate, CORE.selection.selectedCount);
 
+// other
+injected(TextsService, CORE.mainGate);
+
 /**
  * Root container for bindings that can be shared down the hierarchy.
  * Declare only bindings that needs to be shared across multiple containers.
@@ -66,5 +70,6 @@ export class RootContainer extends Container {
         this.bind(CORE.selection.isCurrentPageSelected).toInstance(isCurrentPageSelectedAtom).inTransientScope();
         this.bind(CORE.selection.selectedCounterTextsStore).toInstance(selectionCounterTextsStore).inTransientScope();
         this.bind(CORE.selection.isAllItemsSelected).toInstance(isAllItemsSelectedAtom).inTransientScope();
+        this.bind(CORE.texts).toInstance(TextsService).inTransientScope();
     }
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index 002fc87a47..aed17f4f4b 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -15,3 +15,4 @@ export const [useQueryService] = createInjectionHooks(DG.query);
 export const [useVisibleColumnsCount] = createInjectionHooks(CORE.atoms.visibleColumnsCount);
 export const [useItemCount] = createInjectionHooks(CORE.atoms.itemCount);
 export const [useColumn] = createInjectionHooks(CORE.column);
+export const [useTexts] = createInjectionHooks(CORE.texts);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts b/packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts
new file mode 100644
index 0000000000..7cacafee45
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts
@@ -0,0 +1,29 @@
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { makeAutoObservable } from "mobx";
+import { MainGateProps } from "../../../typings/MainGateProps";
+
+export class TextsService {
+    constructor(private gate: DerivedPropsGate<MainGateProps>) {
+        makeAutoObservable(this);
+    }
+
+    private get props(): MainGateProps {
+        return this.gate.props;
+    }
+
+    get exportDialogLabel(): string | undefined {
+        return this.props.exportDialogLabel?.value;
+    }
+
+    get cancelExportLabel(): string | undefined {
+        return this.props.cancelExportLabel?.value;
+    }
+
+    get selectRowLabel(): string | undefined {
+        return this.props.selectRowLabel?.value;
+    }
+
+    get selectAllRowsLabel(): string | undefined {
+        return this.props.selectAllRowsLabel?.value;
+    }
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index 4b8962665f..ae4a2789db 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -32,6 +32,7 @@ import { DatagridConfig } from "./configs/Datagrid.config";
 import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./services/PaginationController";
+import { TextsService } from "./services/Texts.service";
 
 /** Tokens to resolve dependencies from the container. */
 
@@ -63,7 +64,9 @@ export const CORE_TOKENS = {
         }>("@store:selectedCounterTextsStore")
     },
 
-    setupService: token<DatagridSetupService>("DatagridSetupService")
+    setupService: token<DatagridSetupService>("DatagridSetupService"),
+
+    texts: token<TextsService>("@srv:TextsService")
 };
 
 /** Datagrid tokens. */
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index 1f666afc4a..f77538543a 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -4,6 +4,7 @@ import { DatagridContainerProps } from "./DatagridProps";
 export type MainGateProps = Pick<
     DatagridContainerProps,
     | "allSelectedText"
+    | "cancelExportLabel"
     | "cancelSelectionLabel"
     | "clearSelectionButtonLabel"
     | "columns"
@@ -12,6 +13,7 @@ export type MainGateProps = Pick<
     | "datasource"
     | "emptyPlaceholder"
     | "enableSelectAll"
+    | "exportDialogLabel"
     | "itemSelection"
     | "name"
     | "onSelectionChange"
@@ -23,6 +25,7 @@ export type MainGateProps = Pick<
     | "selectAllTemplate"
     | "selectAllText"
     | "selectionCounterPosition"
+    | "selectRowLabel"
     | "showNumberOfRows"
     | "showPagingButtons"
     | "storeFiltersInPersonalization"

From 2e64084d6e1ecadf121dfd271cfbe765030e9fd0 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Tue, 18 Nov 2025 15:04:39 +0100
Subject: [PATCH 15/21] refactor: rewrite dg rows renderer

---
 .../datagrid-web/src/components/Row.tsx       | 12 ++---
 .../src/components/RowsRenderer.tsx           | 37 +++++--------
 .../datagrid-web/src/components/Widget.tsx    | 40 +++-----------
 .../model/containers/Datagrid.container.ts    |  5 +-
 .../src/model/hooks/injection-hooks.ts        |  1 +
 .../model/models/__tests__/grid.model.spec.ts | 54 +++++++++++++++++++
 .../src/model/models/grid.model.ts            | 28 +++++++++-
 .../datagrid-web/src/model/tokens.ts          |  5 +-
 .../datagrid-web/typings/MainGateProps.ts     |  1 +
 9 files changed, 118 insertions(+), 65 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
index 97b6227ae4..f49d74173c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
@@ -2,15 +2,15 @@ import classNames from "classnames";
 import { ObjectItem } from "mendix";
 import { ReactElement } from "react";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
-import { CellComponent, EventsController } from "../typings/CellComponent";
+import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
+import { Cell } from "./Cell";
 import { CheckboxCell } from "./CheckboxCell";
 import { SelectorCell } from "./SelectorCell";
 
-export interface RowProps<C extends GridColumn> {
+export interface RowProps {
     className?: string;
-    CellComponent: CellComponent<C>;
-    columns: C[];
+    columns: GridColumn[];
     item: ObjectItem;
     index: number;
     showSelectorCell?: boolean;
@@ -20,8 +20,8 @@ export interface RowProps<C extends GridColumn> {
     eventsController: EventsController;
 }
 
-export function Row<C extends GridColumn>(props: RowProps<C>): ReactElement {
-    const { CellComponent: Cell, selectActionHelper, totalRows, eventsController } = props;
+export function Row(props: RowProps): ReactElement {
+    const { selectActionHelper, totalRows, eventsController } = props;
     const selected = selectActionHelper.isSelected(props.item);
     const ariaSelected = selectActionHelper.selectionType === "None" ? undefined : selected;
     const borderTop = props.index === 0;
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
index 7d3dff8de2..4717c71cd8 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
@@ -1,44 +1,35 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
-import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { ObjectItem } from "mendix";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
-import { useColumnsStore } from "../model/hooks/injection-hooks";
-import { CellComponent, EventsController } from "../typings/CellComponent";
-import { GridColumn } from "../typings/GridColumn";
+import { useLegacyContext } from "../helpers/root-context";
+import { useColumnsStore, useDatagridConfig, useRowClass } from "../model/hooks/injection-hooks";
 import { Row } from "./Row";
 
 interface RowsRendererProps {
-    Cell: CellComponent<GridColumn>;
-    columnsHidable: boolean;
-    eventsController: EventsController;
-    focusController: FocusTargetController;
-    interactive: boolean;
-    preview: boolean;
-    rowClass?: (item: ObjectItem) => string;
     rows: ObjectItem[];
-    selectActionHelper: SelectActionHelper;
 }
 
-export const RowsRenderer = observer(function RowsRenderer(props: RowsRendererProps): ReactElement {
+export const RowsRenderer = observer(function RowsRenderer({ rows }: RowsRendererProps): ReactElement {
+    const config = useDatagridConfig();
     const { visibleColumns } = useColumnsStore();
+    const rowClass = useRowClass();
+    const { cellEventsController, focusController, selectActionHelper } = useLegacyContext();
     return (
-        <KeyNavProvider focusController={props.focusController}>
-            {props.rows.map((item, rowIndex) => {
+        <KeyNavProvider focusController={focusController}>
+            {rows.map((item, rowIndex) => {
                 return (
                     <Row
-                        totalRows={props.rows.length}
-                        clickable={props.interactive}
-                        selectActionHelper={props.selectActionHelper}
-                        eventsController={props.eventsController}
-                        CellComponent={props.Cell}
-                        className={props.rowClass?.(item)}
+                        totalRows={rows.length}
+                        clickable={config.isInteractive}
+                        selectActionHelper={selectActionHelper}
+                        eventsController={cellEventsController}
+                        className={rowClass.class.get(item)}
                         columns={visibleColumns}
                         index={rowIndex}
                         item={item}
                         key={`row_${item.id}`}
-                        showSelectorCell={props.columnsHidable}
+                        showSelectorCell={config.columnsHidable}
                     />
                 );
             })}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 476670fcbd..227d5a6de8 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -10,8 +10,7 @@ import { SelectAllBar } from "../features/select-all/SelectAllBar";
 import { SelectionProgressDialog } from "../features/select-all/SelectionProgressDialog";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { useBasicData } from "../model/hooks/injection-hooks";
-import { CellComponent, EventsController } from "../typings/CellComponent";
-import { GridColumn } from "../typings/GridColumn";
+import { EventsController } from "../typings/CellComponent";
 import { ExportWidget } from "./ExportWidget";
 import { Grid } from "./Grid";
 import { GridBody } from "./GridBody";
@@ -23,17 +22,15 @@ import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
 
-export interface WidgetProps<C extends GridColumn, T extends ObjectItem = ObjectItem> {
-    CellComponent: CellComponent<C>;
+export interface WidgetProps {
     className: string;
     columnsDraggable: boolean;
     columnsFilterable: boolean;
     columnsHidable: boolean;
     columnsResizable: boolean;
     columnsSortable: boolean;
-    data: T[];
+    data: ObjectItem[];
     exporting: boolean;
-    filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
     headerContent?: ReactNode;
     headerTitle?: string;
     id: string;
@@ -43,7 +40,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     loadMoreButtonCaption?: string;
 
     processedRows: number;
-    rowClass?: (item: T) => string;
+
     styles?: CSSProperties;
     rowAction?: ListActionValue;
     isFirstLoad: boolean;
@@ -59,7 +56,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     focusController: FocusTargetController;
 }
 
-export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElement => {
+export const Widget = observer(function Widget(props: WidgetProps) {
     const { className, exporting, numberOfItems, onExportCancel, selectActionHelper } = props;
     const basicData = useBasicData();
     const selectionEnabled = selectActionHelper.selectionType !== "None";
@@ -89,19 +86,8 @@ export const Widget = observer(<C extends GridColumn>(props: WidgetProps<C>): Re
     );
 });
 
-const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElement => {
-    const {
-        CellComponent,
-        columnsHidable,
-        data: rows,
-        headerContent,
-        headerTitle,
-        loadMoreButtonCaption,
-        showRefreshIndicator,
-        selectActionHelper
-    } = props;
-
-    const basicData = useBasicData();
+const Main = observer((props: WidgetProps): ReactElement => {
+    const { data: rows, headerContent, headerTitle, loadMoreButtonCaption, showRefreshIndicator } = props;
 
     return (
         <Fragment>
@@ -113,17 +99,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                     <SelectAllBar />
                     {showRefreshIndicator ? <RefreshIndicator /> : null}
                     <GridBody>
-                        <RowsRenderer
-                            preview={false}
-                            interactive={basicData.gridInteractive}
-                            Cell={CellComponent}
-                            columnsHidable={columnsHidable}
-                            rows={rows}
-                            rowClass={props.rowClass}
-                            selectActionHelper={selectActionHelper}
-                            focusController={props.focusController}
-                            eventsController={props.cellEventsController}
-                        />
+                        <RowsRenderer rows={rows} />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
index ca8d9ba411..2543909b0c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -14,7 +14,7 @@ import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
-import { gridStyleAtom } from "../models/grid.model";
+import { gridStyleAtom, rowClassProvider } from "../models/grid.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
@@ -35,6 +35,7 @@ injected(emptyStateWidgetsAtom, CORE.mainGate, CORE.atoms.itemCount);
 injected(SelectionGate, CORE.mainGate);
 injected(createSelectionHelper, CORE.setupService, DG.selectionGate, CORE.config.optional);
 injected(gridStyleAtom, CORE.columnsStore, CORE.config);
+injected(rowClassProvider, CORE.mainGate);
 
 injected(
     SelectionCounterViewModel,
@@ -81,6 +82,8 @@ export class DatagridContainer extends Container {
         this.bind(DG.selectionGate).toInstance(SelectionGate).inTransientScope();
         // Selection helper
         this.bind(DG.selectionHelper).toInstance(createSelectionHelper).inSingletonScope();
+        // Row class provider
+        this.bind(DG.rowClass).toInstance(rowClassProvider).inTransientScope();
     }
 
     /**
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index aed17f4f4b..edc84d3fa0 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -16,3 +16,4 @@ export const [useVisibleColumnsCount] = createInjectionHooks(CORE.atoms.visibleC
 export const [useItemCount] = createInjectionHooks(CORE.atoms.itemCount);
 export const [useColumn] = createInjectionHooks(CORE.column);
 export const [useTexts] = createInjectionHooks(CORE.texts);
+export const [useRowClass] = createInjectionHooks(DG.rowClass);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts
new file mode 100644
index 0000000000..11c4c2ed9a
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts
@@ -0,0 +1,54 @@
+import { listExpression, obj } from "@mendix/widget-plugin-test-utils";
+import { configure, isObservable, observable } from "mobx";
+import { MainGateProps } from "../../../../typings/MainGateProps";
+import { rowClassProvider } from "../grid.model";
+
+describe("rowClassProvider", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("returns empty string when rowClass is not defined", () => {
+        const gate = observable({ props: {} as MainGateProps });
+        const atom = rowClassProvider(gate);
+
+        expect(atom.class.get(obj())).toBe("");
+    });
+
+    it("returns the class from rowClass expression", () => {
+        const gate = observable({
+            props: {
+                rowClass: listExpression(() => "custom-row-class")
+            } as MainGateProps
+        });
+        const atom = rowClassProvider(gate);
+
+        expect(atom.class.get(obj())).toBe("custom-row-class");
+    });
+
+    it("updates reactively when rowClass expression changes", () => {
+        const rowClassExpression = listExpression(() => "initial-class");
+        const gate = observable({
+            props: {
+                rowClass: rowClassExpression
+            } as MainGateProps
+        });
+        const atom = rowClassProvider(gate);
+
+        expect(atom.class.get(obj())).toBe("initial-class");
+
+        gate.props.rowClass = listExpression(() => "updated-class");
+        expect(atom.class.get(obj())).toBe("updated-class");
+    });
+
+    it("class property is not observable itself", () => {
+        const gate = observable({
+            props: {
+                rowClass: listExpression(() => "some-class")
+            } as MainGateProps
+        });
+
+        const atom = rowClassProvider(gate);
+        expect(isObservable(atom.class)).toBe(false);
+    });
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
index 559b2bf366..9909b7634d 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
@@ -1,6 +1,8 @@
-import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
-import { computed } from "mobx";
+import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { ObjectItem } from "mendix";
+import { computed, observable } from "mobx";
 import { CSSProperties } from "react";
+import { MainGateProps } from "../../../typings/MainGateProps";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
 
@@ -38,3 +40,25 @@ function gridStyle(
         gridTemplateColumns: sizes.join(" ")
     };
 }
+
+export interface RowClassProvider {
+    class: {
+        get(item: ObjectItem): string;
+    };
+}
+
+/** @injectable */
+export function rowClassProvider(gate: DerivedPropsGate<MainGateProps>): RowClassProvider {
+    const atom = {
+        get class() {
+            return {
+                get(item: ObjectItem): string {
+                    if (!gate.props.rowClass) return "";
+                    return gate.props.rowClass.get(item).value ?? "";
+                }
+            };
+        }
+    };
+
+    return observable(atom, { class: computed });
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index ae4a2789db..b679997f3b 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -29,6 +29,7 @@ import { GridPersonalizationStore } from "../helpers/state/GridPersonalizationSt
 import { DatasourceParamsController } from "../model/services/DatasourceParamsController";
 import { GridColumn } from "../typings/GridColumn";
 import { DatagridConfig } from "./configs/Datagrid.config";
+import { RowClassProvider } from "./models/grid.model";
 import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./services/PaginationController";
@@ -105,7 +106,9 @@ export const DG_TOKENS = {
     selectionGate: token<DerivedPropsGate<SelectionDynamicProps>>("@gate:GateForSelectionHelper"),
     selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService"),
 
-    gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle")
+    gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle"),
+
+    rowClass: token<RowClassProvider>("@store:RowClassProvider")
 };
 
 /** "Select all" module tokens. */
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index f77538543a..a6c56f60d4 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -29,4 +29,5 @@ export type MainGateProps = Pick<
     | "showNumberOfRows"
     | "showPagingButtons"
     | "storeFiltersInPersonalization"
+    | "rowClass"
 >;

From 55a9fca3ab8645e54e3e27f88982f40d25a7976c Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Thu, 20 Nov 2025 09:39:27 +0100
Subject: [PATCH 16/21] refactor: remove props from grid

---
 .../datagrid-web/src/Datagrid.tsx             | 44 +--------
 .../src/components/RefreshStatus.tsx          | 11 +++
 .../src/components/RowsRenderer.tsx           | 10 +-
 .../datagrid-web/src/components/Widget.tsx    | 98 +++----------------
 .../src/components/WidgetFooter.tsx           | 10 +-
 .../src/components/WidgetHeader.tsx           | 20 ++--
 .../src/components/WidgetRoot.tsx             | 44 +++------
 .../src/features/base/WidgetRoot.viewModel.ts | 56 +++++++++++
 .../data-export/ExportProgressDialog.tsx      | 22 +++++
 .../src/model/configs/Datagrid.config.ts      |  9 +-
 .../model/containers/Datagrid.container.ts    | 15 ++-
 .../src/model/containers/Root.container.ts    |  3 +
 .../src/model/hooks/injection-hooks.ts        |  2 +
 ...{grid.model.spec.ts => rows.model.spec.ts} |  2 +-
 .../src/model/models/grid.model.ts            | 28 +-----
 .../src/model/models/rows.model.ts            | 33 +++++++
 .../src/model/services/Texts.service.ts       |  8 ++
 .../datagrid-web/src/model/tokens.ts          | 10 +-
 .../datagrid-web/typings/MainGateProps.ts     |  7 +-
 19 files changed, 212 insertions(+), 220 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/components/RefreshStatus.tsx
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx
 rename packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/{grid.model.spec.ts => rows.model.spec.ts} (97%)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/models/rows.model.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 52ae54bcf9..59d039d1eb 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -1,12 +1,10 @@
 import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
-import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { ContainerProvider } from "brandi-react";
 import { observer } from "mobx-react-lite";
-import { ReactElement, useCallback, useMemo } from "react";
+import { ReactElement } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
-import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
 import { useDataExport } from "./features/data-export/useDataExport";
 import { useCellEventsController } from "./features/row-interaction/CellEventsController";
@@ -17,7 +15,6 @@ import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
 import {
     useColumnsStore,
     useExportProgressService,
-    useLoaderViewModel,
     useMainGate,
     useSelectionHelper
 } from "./model/hooks/injection-hooks";
@@ -27,7 +24,6 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
     const gate = useMainGate();
     const columnsStore = useColumnsStore();
     const exportProgress = useExportProgressService();
-    const loaderVM = useLoaderViewModel();
     const items = gate.props.datasource.items ?? [];
 
     const [abortExport] = useDataExport(props, columnsStore, exportProgress);
@@ -67,43 +63,7 @@ const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
                 focusController
             })}
         >
-            <Widget
-                className={props.class}
-                CellComponent={Cell}
-                columnsDraggable={props.columnsDraggable}
-                columnsFilterable={props.columnsFilterable}
-                columnsHidable={props.columnsHidable}
-                columnsResizable={props.columnsResizable}
-                columnsSortable={props.columnsSortable}
-                data={items}
-                filterRenderer={useCallback(
-                    (renderWrapper, columnIndex) => {
-                        const columnFilter = columnsStore.columnFilters[columnIndex];
-                        return renderWrapper(columnFilter.renderFilterWidgets());
-                    },
-                    [columnsStore.columnFilters]
-                )}
-                headerTitle={props.filterSectionTitle?.value}
-                headerContent={props.filtersPlaceholder}
-                id={useMemo(() => `DataGrid${generateUUID()}`, [])}
-                numberOfItems={props.datasource.totalCount}
-                onExportCancel={abortExport}
-                paginationType={props.pagination}
-                loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
-                rowClass={useCallback((value: any) => props.rowClass?.get(value)?.value ?? "", [props.rowClass])}
-                styles={props.style}
-                exporting={exportProgress.inProgress}
-                processedRows={exportProgress.loaded}
-                selectActionHelper={selectActionHelper}
-                cellEventsController={cellEventsController}
-                checkboxEventsController={checkboxEventsController}
-                focusController={focusController}
-                isFirstLoad={loaderVM.isFirstLoad}
-                isFetchingNextBatch={loaderVM.isFetchingNextBatch}
-                showRefreshIndicator={loaderVM.showRefreshIndicator}
-                loadingType={props.loadingType}
-                columnsLoading={!columnsStore.loaded}
-            />
+            <Widget onExportCancel={abortExport} />
         </LegacyContext.Provider>
     );
 });
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RefreshStatus.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RefreshStatus.tsx
new file mode 100644
index 0000000000..aaf0446990
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/RefreshStatus.tsx
@@ -0,0 +1,11 @@
+import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator";
+import { ReactNode } from "react";
+import { useLoaderViewModel } from "../model/hooks/injection-hooks";
+
+export const RefreshStatus = function RefreshStatus(): ReactNode {
+    const loaderVM = useLoaderViewModel();
+
+    if (!loaderVM.showRefreshIndicator) return null;
+
+    return loaderVM.isRefreshing ? <RefreshIndicator /> : null;
+};
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
index 4717c71cd8..52a470d88c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
@@ -1,16 +1,12 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
-import { ObjectItem } from "mendix";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { useLegacyContext } from "../helpers/root-context";
-import { useColumnsStore, useDatagridConfig, useRowClass } from "../model/hooks/injection-hooks";
+import { useColumnsStore, useDatagridConfig, useRowClass, useRows } from "../model/hooks/injection-hooks";
 import { Row } from "./Row";
 
-interface RowsRendererProps {
-    rows: ObjectItem[];
-}
-
-export const RowsRenderer = observer(function RowsRenderer({ rows }: RowsRendererProps): ReactElement {
+export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
+    const rows = useRows().get();
     const config = useDatagridConfig();
     const { visibleColumns } = useColumnsStore();
     const rowClass = useRowClass();
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 227d5a6de8..ee29bcfa20 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -1,20 +1,12 @@
-import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator";
-import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
-import { ListActionValue, ObjectItem } from "mendix";
-import { observer } from "mobx-react-lite";
-import { CSSProperties, Fragment, ReactElement, ReactNode } from "react";
-import { LoadingTypeEnum, PaginationEnum } from "../../typings/DatagridProps";
-
+import { ReactNode } from "react";
+import { ExportProgressDialog } from "../features/data-export/ExportProgressDialog";
 import { EmptyPlaceholder } from "../features/empty-message/EmptyPlaceholder";
 import { SelectAllBar } from "../features/select-all/SelectAllBar";
 import { SelectionProgressDialog } from "../features/select-all/SelectionProgressDialog";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
-import { useBasicData } from "../model/hooks/injection-hooks";
-import { EventsController } from "../typings/CellComponent";
-import { ExportWidget } from "./ExportWidget";
 import { Grid } from "./Grid";
 import { GridBody } from "./GridBody";
 import { GridHeader } from "./GridHeader";
+import { RefreshStatus } from "./RefreshStatus";
 import { RowsRenderer } from "./RowsRenderer";
 import { WidgetContent } from "./WidgetContent";
 import { WidgetFooter } from "./WidgetFooter";
@@ -22,89 +14,25 @@ import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
 
-export interface WidgetProps {
-    className: string;
-    columnsDraggable: boolean;
-    columnsFilterable: boolean;
-    columnsHidable: boolean;
-    columnsResizable: boolean;
-    columnsSortable: boolean;
-    data: ObjectItem[];
-    exporting: boolean;
-    headerContent?: ReactNode;
-    headerTitle?: string;
-    id: string;
-    numberOfItems?: number;
-    onExportCancel?: () => void;
-    paginationType: PaginationEnum;
-    loadMoreButtonCaption?: string;
-
-    processedRows: number;
-
-    styles?: CSSProperties;
-    rowAction?: ListActionValue;
-    isFirstLoad: boolean;
-    isFetchingNextBatch: boolean;
-    loadingType: LoadingTypeEnum;
-    columnsLoading: boolean;
-    showRefreshIndicator: boolean;
-
-    // Helpers
-    cellEventsController: EventsController;
-    checkboxEventsController: EventsController;
-    selectActionHelper: SelectActionHelper;
-    focusController: FocusTargetController;
-}
-
-export const Widget = observer(function Widget(props: WidgetProps) {
-    const { className, exporting, numberOfItems, onExportCancel, selectActionHelper } = props;
-    const basicData = useBasicData();
-    const selectionEnabled = selectActionHelper.selectionType !== "None";
-
-    return (
-        <WidgetRoot
-            className={className}
-            selectionMethod={selectActionHelper.selectionMethod}
-            selection={selectionEnabled}
-            style={props.styles}
-            exporting={exporting}
-        >
-            <Main {...props} data={exporting ? [] : props.data} />
-            <SelectionProgressDialog />
-            {exporting && (
-                <ExportWidget
-                    alertLabel={basicData.exportDialogLabel ?? "Export progress"}
-                    cancelLabel={basicData.cancelExportLabel ?? "Cancel data export"}
-                    failed={false}
-                    onCancel={onExportCancel}
-                    open={exporting}
-                    progress={props.processedRows}
-                    total={numberOfItems}
-                />
-            )}
-        </WidgetRoot>
-    );
-});
-
-const Main = observer((props: WidgetProps): ReactElement => {
-    const { data: rows, headerContent, headerTitle, loadMoreButtonCaption, showRefreshIndicator } = props;
-
+export function Widget(props: { onExportCancel?: () => void }): ReactNode {
     return (
-        <Fragment>
+        <WidgetRoot>
             <WidgetTopBar />
-            <WidgetHeader headerTitle={headerTitle} headerContent={headerContent} />
+            <WidgetHeader />
             <WidgetContent>
                 <Grid>
                     <GridHeader />
                     <SelectAllBar />
-                    {showRefreshIndicator ? <RefreshIndicator /> : null}
+                    <RefreshStatus />
                     <GridBody>
-                        <RowsRenderer rows={rows} />
+                        <RowsRenderer />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>
             </WidgetContent>
-            <WidgetFooter loadMoreButtonCaption={loadMoreButtonCaption} />
-        </Fragment>
+            <WidgetFooter />
+            <SelectionProgressDialog />
+            <ExportProgressDialog onExportCancel={props.onExportCancel} />
+        </WidgetRoot>
     );
-});
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
index c8a546e060..703af7cf16 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -3,17 +3,13 @@ import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { SelectionCounter } from "../features/selection-counter/SelectionCounter";
 import { useSelectionCounterViewModel } from "../features/selection-counter/injection-hooks";
-import { useDatagridConfig, usePaginationService } from "../model/hooks/injection-hooks";
+import { useDatagridConfig, usePaginationService, useTexts } from "../model/hooks/injection-hooks";
 import { Pagination } from "./Pagination";
 
-type WidgetFooterProps = {
-    loadMoreButtonCaption?: string;
-};
-
-export const WidgetFooter = observer(function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
+export const WidgetFooter = observer(function WidgetFooter(): ReactElement | null {
     const config = useDatagridConfig();
     const paging = usePaginationService();
-    const { loadMoreButtonCaption } = props;
+    const { loadMoreButtonCaption } = useTexts();
     const selectionCounterVM = useSelectionCounterViewModel();
 
     return (
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx
index 2cb3859f91..aaa2fe35af 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetHeader.tsx
@@ -1,12 +1,7 @@
 import { getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context";
 import { getGlobalSelectionContext, useCreateSelectionContextValue } from "@mendix/widget-plugin-grid/selection";
 import { PropsWithChildren, ReactElement, ReactNode } from "react";
-import { useDatagridFilterAPI, useSelectionHelper } from "../model/hooks/injection-hooks";
-
-type WidgetHeaderProps = {
-    headerTitle?: string;
-    headerContent?: ReactNode;
-};
+import { useDatagridFilterAPI, useMainGate, useSelectionHelper, useTexts } from "../model/hooks/injection-hooks";
 
 const Selection = getGlobalSelectionContext();
 const FilterAPI = getGlobalFilterContextObject();
@@ -21,14 +16,15 @@ function HeaderContainer(props: PropsWithChildren): ReactElement {
     );
 }
 
-export function WidgetHeader(props: WidgetHeaderProps): ReactNode {
-    const { headerContent, headerTitle } = props;
+export const WidgetHeader = function WidgetHeader(): ReactNode {
+    const { headerAriaLabel } = useTexts();
+    const { filtersPlaceholder } = useMainGate().props;
 
-    if (!headerContent) return null;
+    if (!filtersPlaceholder) return null;
 
     return (
-        <div className="widget-datagrid-header header-filters" aria-label={headerTitle || undefined}>
-            <HeaderContainer>{headerContent}</HeaderContainer>
+        <div className="widget-datagrid-header header-filters" aria-label={headerAriaLabel}>
+            <HeaderContainer>{filtersPlaceholder}</HeaderContainer>
         </div>
     );
-}
+};
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx
index bba4ea22fa..d005ac1201 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetRoot.tsx
@@ -1,41 +1,21 @@
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
-import { ComponentPropsWithoutRef, ReactElement, useMemo, useRef } from "react";
-import { useSelectionDialogViewModel } from "../features/select-all/injection-hooks";
-import { SelectionMethod } from "../helpers/SelectActionHelper";
+import { PropsWithChildren, ReactElement } from "react";
+import { useDatagridRootVM } from "../model/hooks/injection-hooks";
 
-type P = ComponentPropsWithoutRef<"div">;
-
-export interface WidgetRootProps extends P {
-    className?: string;
-    selection?: boolean;
-    selectionMethod: SelectionMethod;
-    exporting?: boolean;
-}
-
-export const WidgetRoot = observer(function WidgetRoot(props: WidgetRootProps): ReactElement {
-    const ref = useRef<HTMLDivElement>(null);
-    const { className, selectionMethod, selection, exporting, children, ...rest } = props;
-    const { isOpen: selectingAllPages } = useSelectionDialogViewModel();
-    const style = useMemo(() => {
-        const s = { ...props.style };
-        if ((exporting || selectingAllPages) && ref.current) {
-            s.height = ref.current.offsetHeight;
-        }
-        return s;
-    }, [props.style, exporting, selectingAllPages]);
+export const WidgetRoot = observer(function WidgetRoot({ children }: PropsWithChildren): ReactElement {
+    const vm = useDatagridRootVM();
 
     return (
         <div
-            {...rest}
-            ref={ref}
-            style={style}
-            className={classNames(className, "widget-datagrid", {
-                "widget-datagrid-exporting": exporting,
-                "widget-datagrid-selecting-all-pages": selectingAllPages,
-                "widget-datagrid-selectable-rows": selection,
-                "widget-datagrid-selection-method-checkbox": selection && selectionMethod === "checkbox",
-                "widget-datagrid-selection-method-click": selection && selectionMethod === "rowClick"
+            ref={vm.ref}
+            style={vm.style}
+            className={classNames(vm.className, "widget-datagrid", {
+                "widget-datagrid-exporting": vm.exporting,
+                "widget-datagrid-selecting-all-pages": vm.selecting,
+                "widget-datagrid-selectable-rows": vm.selectable,
+                "widget-datagrid-selection-method-checkbox": vm.selectable && vm.selectionMethod === "checkbox",
+                "widget-datagrid-selection-method-click": vm.selectable && vm.selectionMethod === "rowClick"
             })}
         >
             {children}
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts b/packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts
new file mode 100644
index 0000000000..8f689a6bae
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts
@@ -0,0 +1,56 @@
+import { TaskProgressService } from "@mendix/widget-plugin-grid/main";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { makeAutoObservable } from "mobx";
+import { createRef, CSSProperties } from "react";
+import { ItemSelectionMethodEnum } from "../../../typings/DatagridProps";
+
+export class WidgetRootViewModel {
+    ref = createRef<HTMLDivElement>();
+
+    constructor(
+        private gate: DerivedPropsGate<{
+            style?: CSSProperties;
+            class?: string;
+        }>,
+        private config: { selectionEnabled: boolean; selectionMethod: ItemSelectionMethodEnum },
+        private exportTask: TaskProgressService,
+        private selectAllTask: TaskProgressService
+    ) {
+        makeAutoObservable(this);
+    }
+
+    get className(): string | undefined {
+        return this.gate.props.class;
+    }
+
+    get exporting(): boolean {
+        return this.exportTask.inProgress;
+    }
+
+    get selecting(): boolean {
+        return this.selectAllTask.inProgress;
+    }
+
+    get selectable(): boolean {
+        return this.config.selectionEnabled;
+    }
+
+    get selectionMethod(): ItemSelectionMethodEnum {
+        return this.config.selectionMethod;
+    }
+
+    get style(): CSSProperties {
+        const style = { ...this.gate.props.style };
+
+        if (!this.ref.current) return style;
+
+        if (this.exporting || this.selecting) {
+            return {
+                ...style,
+                height: this.ref.current.offsetHeight
+            };
+        }
+
+        return style;
+    }
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx b/packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx
new file mode 100644
index 0000000000..bf3cb3ef64
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { ExportWidget } from "../../components/ExportWidget";
+import { useExportProgressService, useTexts } from "../../model/hooks/injection-hooks";
+
+export const ExportProgressDialog = function ExportProgressDialog(props: { onExportCancel?: () => void }): ReactNode {
+    const progressSrv = useExportProgressService();
+    const texts = useTexts();
+
+    if (!progressSrv.inProgress) return null;
+
+    return (
+        <ExportWidget
+            alertLabel={texts.exportDialogLabel ?? "Export progress"}
+            cancelLabel={texts.cancelExportLabel ?? "Cancel data export"}
+            failed={false}
+            onCancel={props.onExportCancel}
+            open={progressSrv.inProgress}
+            progress={progressSrv.loaded}
+            total={progressSrv.total}
+        />
+    );
+};
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index 09dfa32631..c007e8e599 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -1,5 +1,10 @@
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { DatagridContainerProps, LoadingTypeEnum, PagingPositionEnum } from "../../../typings/DatagridProps";
+import {
+    DatagridContainerProps,
+    ItemSelectionMethodEnum,
+    LoadingTypeEnum,
+    PagingPositionEnum
+} from "../../../typings/DatagridProps";
 
 /** Config for static values that don't change at runtime. */
 export interface DatagridConfig {
@@ -10,6 +15,7 @@ export interface DatagridConfig {
     refreshIntervalMs: number;
     selectAllCheckboxEnabled: boolean;
     selectionEnabled: boolean;
+    selectionMethod: ItemSelectionMethodEnum;
     selectorColumnEnabled: boolean;
     settingsStorageEnabled: boolean;
     enableSelectAll: boolean;
@@ -36,6 +42,7 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         refreshIntervalMs: props.refreshInterval * 1000,
         selectAllCheckboxEnabled: props.showSelectAllToggle,
         selectionEnabled: isSelectionEnabled(props),
+        selectionMethod: props.itemSelectionMethod,
         selectorColumnEnabled: props.columnsHidable,
         settingsStorageEnabled: isSettingsStorageEnabled(props),
         enableSelectAll: props.enableSelectAll,
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
index 2543909b0c..5ebbe195d9 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -8,13 +8,15 @@ import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { Container, injected } from "brandi";
 import { MainGateProps } from "../../../typings/MainGateProps";
+import { WidgetRootViewModel } from "../../features/base/WidgetRoot.viewModel";
 import { EmptyPlaceholderViewModel } from "../../features/empty-message/EmptyPlaceholder.viewModel";
 import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
-import { gridStyleAtom, rowClassProvider } from "../models/grid.model";
+import { gridStyleAtom } from "../models/grid.model";
+import { rowClassProvider } from "../models/rows.model";
 import { DatasourceParamsController } from "../services/DatasourceParamsController";
 import { DerivedLoaderController } from "../services/DerivedLoaderController";
 import { PaginationController } from "../services/PaginationController";
@@ -26,7 +28,7 @@ injected(CombinedFilter, CORE.setupService, DG.combinedFilterConfig);
 injected(DatasourceParamsController, CORE.setupService, DG.query, DG.combinedFilter, CORE.columnsStore);
 injected(DatasourceService, CORE.setupService, DG.queryGate, DG.refreshInterval.optional);
 injected(DerivedLoaderController, DG.query, DG.exportProgressService, CORE.columnsStore, DG.loaderConfig);
-injected(EmptyPlaceholderViewModel, DG.emptyPlaceholderWidgets, CORE.atoms.itemCount, CORE.config);
+
 injected(GridBasicData, CORE.mainGate);
 injected(GridPersonalizationStore, CORE.setupService, CORE.mainGate, CORE.columnsStore, DG.filterHost);
 injected(PaginationController, CORE.setupService, DG.paginationConfig, DG.query);
@@ -37,12 +39,16 @@ injected(createSelectionHelper, CORE.setupService, DG.selectionGate, CORE.config
 injected(gridStyleAtom, CORE.columnsStore, CORE.config);
 injected(rowClassProvider, CORE.mainGate);
 
+// View models
+
 injected(
     SelectionCounterViewModel,
     CORE.selection.selectedCount,
     CORE.selection.selectedCounterTextsStore,
     DG.selectionCounterCfg.optional
 );
+injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.progressService);
+injected(EmptyPlaceholderViewModel, DG.emptyPlaceholderWidgets, CORE.atoms.visibleColumnsCount, CORE.config);
 
 export class DatagridContainer extends Container {
     id = `DatagridContainer@${generateUUID()}`;
@@ -73,7 +79,7 @@ export class DatagridContainer extends Container {
         // Selection counter view model
         this.bind(DG.selectionCounterVM).toInstance(SelectionCounterViewModel).inSingletonScope();
         // Empty placeholder
-        this.bind(DG.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inSingletonScope();
+        this.bind(DG.emptyPlaceholderVM).toInstance(EmptyPlaceholderViewModel).inTransientScope();
         this.bind(DG.emptyPlaceholderWidgets).toInstance(emptyStateWidgetsAtom).inTransientScope();
         // Grid columns style
         this.bind(DG.gridColumnsStyle).toInstance(gridStyleAtom).inTransientScope();
@@ -84,6 +90,8 @@ export class DatagridContainer extends Container {
         this.bind(DG.selectionHelper).toInstance(createSelectionHelper).inSingletonScope();
         // Row class provider
         this.bind(DG.rowClass).toInstance(rowClassProvider).inTransientScope();
+        // Widget root view model
+        this.bind(DG.datagridRootVM).toInstance(WidgetRootViewModel).inTransientScope();
     }
 
     /**
@@ -111,6 +119,7 @@ export class DatagridContainer extends Container {
         this.bind(CORE.config).toConstant(config);
 
         // Connect select all module
+        this.bind(SA_TOKENS.progressService).toConstant(selectAllModule.get(SA_TOKENS.progressService));
         this.bind(SA_TOKENS.selectionDialogVM).toConstant(selectAllModule.get(SA_TOKENS.selectionDialogVM));
         this.bind(SA_TOKENS.selectAllBarVM).toConstant(selectAllModule.get(SA_TOKENS.selectAllBarVM));
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
index f821c7c1a1..e414d97abb 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
@@ -15,6 +15,7 @@ import {
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { Container, injected } from "brandi";
 import { visibleColumnsCountAtom } from "../models/columns.model";
+import { rowsAtom } from "../models/rows.model";
 import { DatagridSetupService } from "../services/DatagridSetup.service";
 import { TextsService } from "../services/Texts.service";
 import { CORE_TOKENS as CORE } from "../tokens";
@@ -27,6 +28,7 @@ injected(limitAtom, CORE.mainGate);
 injected(hasMoreItemsAtom, CORE.mainGate);
 injected(visibleColumnsCountAtom, CORE.columnsStore);
 injected(isAllItemsPresentAtom, CORE.atoms.offset, CORE.atoms.hasMoreItems);
+injected(rowsAtom, CORE.mainGate);
 
 // selection
 injected(
@@ -64,6 +66,7 @@ export class RootContainer extends Container {
         this.bind(CORE.atoms.totalCount).toInstance(totalCountAtom).inTransientScope();
         this.bind(CORE.atoms.visibleColumnsCount).toInstance(visibleColumnsCountAtom).inTransientScope();
         this.bind(CORE.atoms.isAllItemsPresent).toInstance(isAllItemsPresentAtom).inTransientScope();
+        this.bind(CORE.rows).toInstance(rowsAtom).inTransientScope();
 
         // selection
         this.bind(CORE.selection.selectedCount).toInstance(selectedCountMultiAtom).inTransientScope();
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index edc84d3fa0..20af5a7174 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -17,3 +17,5 @@ export const [useItemCount] = createInjectionHooks(CORE.atoms.itemCount);
 export const [useColumn] = createInjectionHooks(CORE.column);
 export const [useTexts] = createInjectionHooks(CORE.texts);
 export const [useRowClass] = createInjectionHooks(DG.rowClass);
+export const [useDatagridRootVM] = createInjectionHooks(DG.datagridRootVM);
+export const [useRows] = createInjectionHooks(CORE.rows);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/rows.model.spec.ts
similarity index 97%
rename from packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts
rename to packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/rows.model.spec.ts
index 11c4c2ed9a..d469574ee5 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/grid.model.spec.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/__tests__/rows.model.spec.ts
@@ -1,7 +1,7 @@
 import { listExpression, obj } from "@mendix/widget-plugin-test-utils";
 import { configure, isObservable, observable } from "mobx";
 import { MainGateProps } from "../../../../typings/MainGateProps";
-import { rowClassProvider } from "../grid.model";
+import { rowClassProvider } from "../rows.model";
 
 describe("rowClassProvider", () => {
     configure({
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
index 9909b7634d..559b2bf366 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/grid.model.ts
@@ -1,8 +1,6 @@
-import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
-import { ObjectItem } from "mendix";
-import { computed, observable } from "mobx";
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
 import { CSSProperties } from "react";
-import { MainGateProps } from "../../../typings/MainGateProps";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { DatagridConfig } from "../configs/Datagrid.config";
 
@@ -40,25 +38,3 @@ function gridStyle(
         gridTemplateColumns: sizes.join(" ")
     };
 }
-
-export interface RowClassProvider {
-    class: {
-        get(item: ObjectItem): string;
-    };
-}
-
-/** @injectable */
-export function rowClassProvider(gate: DerivedPropsGate<MainGateProps>): RowClassProvider {
-    const atom = {
-        get class() {
-            return {
-                get(item: ObjectItem): string {
-                    if (!gate.props.rowClass) return "";
-                    return gate.props.rowClass.get(item).value ?? "";
-                }
-            };
-        }
-    };
-
-    return observable(atom, { class: computed });
-}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/rows.model.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/rows.model.ts
new file mode 100644
index 0000000000..2c11fc535c
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/rows.model.ts
@@ -0,0 +1,33 @@
+import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { ObjectItem } from "mendix";
+import { computed, observable } from "mobx";
+import { MainGateProps } from "../../../typings/MainGateProps";
+
+export interface RowClassProvider {
+    class: {
+        get(item: ObjectItem): string;
+    };
+}
+
+/** @injectable */
+export function rowClassProvider(gate: DerivedPropsGate<MainGateProps>): RowClassProvider {
+    const atom = {
+        get class() {
+            return {
+                get(item: ObjectItem): string {
+                    if (!gate.props.rowClass) return "";
+                    return gate.props.rowClass.get(item).value ?? "";
+                }
+            };
+        }
+    };
+
+    return observable(atom, { class: computed });
+}
+
+/** @injectable */
+export function rowsAtom(gate: DerivedPropsGate<MainGateProps>): ComputedAtom<ObjectItem[]> {
+    return computed(() => {
+        return gate.props.datasource?.items ?? [];
+    });
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts b/packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts
index 7cacafee45..424ee99b2f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/services/Texts.service.ts
@@ -26,4 +26,12 @@ export class TextsService {
     get selectAllRowsLabel(): string | undefined {
         return this.props.selectAllRowsLabel?.value;
     }
+
+    get headerAriaLabel(): string | undefined {
+        return this.props.filterSectionTitle?.value;
+    }
+
+    get loadMoreButtonCaption(): string | undefined {
+        return this.props.loadMoreButtonCaption?.value;
+    }
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index b679997f3b..7bdf430a33 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -17,9 +17,10 @@ import {
 import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
 import { ComputedAtom, DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
 import { token } from "brandi";
-import { ListValue } from "mendix";
+import { ListValue, ObjectItem } from "mendix";
 import { CSSProperties, ReactNode } from "react";
 import { MainGateProps } from "../../typings/MainGateProps";
+import { WidgetRootViewModel } from "../features/base/WidgetRoot.viewModel";
 import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel";
 import { SelectAllBarViewModel } from "../features/select-all/SelectAllBar.viewModel";
 import { SelectionProgressDialogViewModel } from "../features/select-all/SelectionProgressDialog.viewModel";
@@ -29,7 +30,7 @@ import { GridPersonalizationStore } from "../helpers/state/GridPersonalizationSt
 import { DatasourceParamsController } from "../model/services/DatasourceParamsController";
 import { GridColumn } from "../typings/GridColumn";
 import { DatagridConfig } from "./configs/Datagrid.config";
-import { RowClassProvider } from "./models/grid.model";
+import { RowClassProvider } from "./models/rows.model";
 import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./services/PaginationController";
@@ -50,6 +51,7 @@ export const CORE_TOKENS = {
     },
     columnsStore: token<ColumnGroupStore>("ColumnGroupStore"),
     column: token<GridColumn>("@store:GridColumn"),
+    rows: token<ComputedAtom<ObjectItem[]>>("@computed:rowsArray"),
 
     config: token<DatagridConfig>("DatagridConfig"),
 
@@ -108,7 +110,9 @@ export const DG_TOKENS = {
 
     gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle"),
 
-    rowClass: token<RowClassProvider>("@store:RowClassProvider")
+    rowClass: token<RowClassProvider>("@store:RowClassProvider"),
+
+    datagridRootVM: token<WidgetRootViewModel>("WidgetRootViewModel")
 };
 
 /** "Select all" module tokens. */
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index a6c56f60d4..db7d7a8dc1 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -6,6 +6,7 @@ export type MainGateProps = Pick<
     | "allSelectedText"
     | "cancelExportLabel"
     | "cancelSelectionLabel"
+    | "class"
     | "clearSelectionButtonLabel"
     | "columns"
     | "configurationAttribute"
@@ -21,6 +22,7 @@ export type MainGateProps = Pick<
     | "pagination"
     | "refreshIndicator"
     | "refreshInterval"
+    | "rowClass"
     | "selectAllRowsLabel"
     | "selectAllTemplate"
     | "selectAllText"
@@ -29,5 +31,8 @@ export type MainGateProps = Pick<
     | "showNumberOfRows"
     | "showPagingButtons"
     | "storeFiltersInPersonalization"
-    | "rowClass"
+    | "style"
+    | "filtersPlaceholder"
+    | "filterSectionTitle"
+    | "loadMoreButtonCaption"
 >;

From d316ba48208b700fae8afd54d162ad8da56631df Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Thu, 20 Nov 2025 09:50:29 +0100
Subject: [PATCH 17/21] refactor: rewrite export widget

---
 .../src/components/ExportWidget.tsx           | 21 ------------------
 .../data-export/ExportProgressDialog.tsx      | 22 ++++++++++---------
 2 files changed, 12 insertions(+), 31 deletions(-)
 delete mode 100644 packages/pluggableWidgets/datagrid-web/src/components/ExportWidget.tsx

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/ExportWidget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/ExportWidget.tsx
deleted file mode 100644
index 7ab41f5b7f..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/components/ExportWidget.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { PropsWithChildren, ReactElement } from "react";
-import { PseudoModal } from "./PseudoModal";
-import { ExportAlert, ExportAlertProps } from "./ExportAlert";
-
-type ExportWidgetProps = PropsWithChildren<
-    ExportAlertProps & {
-        open: boolean;
-    }
->;
-
-export function ExportWidget({ open, ...alertProps }: ExportWidgetProps): ReactElement | null {
-    if (!open) {
-        return null;
-    }
-
-    return (
-        <PseudoModal>
-            <ExportAlert {...alertProps} />
-        </PseudoModal>
-    );
-}
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx b/packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx
index bf3cb3ef64..42d0101d98 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/features/data-export/ExportProgressDialog.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
-import { ExportWidget } from "../../components/ExportWidget";
+import { ExportAlert } from "../../components/ExportAlert";
+import { PseudoModal } from "../../components/PseudoModal";
 import { useExportProgressService, useTexts } from "../../model/hooks/injection-hooks";
 
 export const ExportProgressDialog = function ExportProgressDialog(props: { onExportCancel?: () => void }): ReactNode {
@@ -9,14 +10,15 @@ export const ExportProgressDialog = function ExportProgressDialog(props: { onExp
     if (!progressSrv.inProgress) return null;
 
     return (
-        <ExportWidget
-            alertLabel={texts.exportDialogLabel ?? "Export progress"}
-            cancelLabel={texts.cancelExportLabel ?? "Cancel data export"}
-            failed={false}
-            onCancel={props.onExportCancel}
-            open={progressSrv.inProgress}
-            progress={progressSrv.loaded}
-            total={progressSrv.total}
-        />
+        <PseudoModal>
+            <ExportAlert
+                alertLabel={texts.exportDialogLabel ?? "Export progress"}
+                cancelLabel={texts.cancelExportLabel ?? "Cancel data export"}
+                failed={false}
+                onCancel={props.onExportCancel}
+                progress={progressSrv.loaded}
+                total={progressSrv.total}
+            />
+        </PseudoModal>
     );
 };

From cbdbeee9a5c607732c0b256b643ba56c9b0f9d8d Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Thu, 20 Nov 2025 10:18:37 +0100
Subject: [PATCH 18/21] refactor: rename Cell to DataCell

---
 .../src/components/{Cell.tsx => DataCell.tsx} | 23 +++++++---
 .../datagrid-web/src/components/Row.tsx       | 13 +++---
 .../src/components/RowsRenderer.tsx           |  1 +
 .../datagrid-web/src/typings/CellComponent.ts | 19 +-------
 .../datagrid-web/src/utils/test-utils.tsx     | 46 -------------------
 5 files changed, 25 insertions(+), 77 deletions(-)
 rename packages/pluggableWidgets/datagrid-web/src/components/{Cell.tsx => DataCell.tsx} (73%)

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Cell.tsx b/packages/pluggableWidgets/datagrid-web/src/components/DataCell.tsx
similarity index 73%
rename from packages/pluggableWidgets/datagrid-web/src/components/Cell.tsx
rename to packages/pluggableWidgets/datagrid-web/src/components/DataCell.tsx
index 653862e79a..70307640f6 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Cell.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/DataCell.tsx
@@ -1,12 +1,26 @@
 import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps";
+import { ObjectItem } from "mendix";
 import { computed } from "mobx";
 import { observer } from "mobx-react-lite";
-import { ReactElement, useMemo } from "react";
-import { CellComponentProps } from "../typings/CellComponent";
+import { ReactElement, ReactNode, useMemo } from "react";
+import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
 import { CellElement } from "./CellElement";
 
-const component = observer(function Cell(props: CellComponentProps<GridColumn>): ReactElement {
+interface DataCellProps {
+    children?: ReactNode;
+    className?: string;
+    column: GridColumn;
+    item: ObjectItem;
+    key?: string | number;
+    rowIndex: number;
+    columnIndex?: number;
+    clickable?: boolean;
+    preview?: boolean;
+    eventsController: EventsController;
+}
+
+export const DataCell = observer(function DataCell(props: DataCellProps): ReactElement {
     const keyNavProps = useFocusTargetProps<HTMLDivElement>({
         columnIndex: props.columnIndex ?? -1,
         rowIndex: props.rowIndex
@@ -36,6 +50,3 @@ const component = observer(function Cell(props: CellComponentProps<GridColumn>):
         </CellElement>
     );
 });
-
-// Override NamedExoticComponent type
-export const Cell = component as (props: CellComponentProps<GridColumn>) => ReactElement;
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
index f49d74173c..bb720ba7ec 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
@@ -4,8 +4,8 @@ import { ReactElement } from "react";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
-import { Cell } from "./Cell";
 import { CheckboxCell } from "./CheckboxCell";
+import { DataCell } from "./DataCell";
 import { SelectorCell } from "./SelectorCell";
 
 export interface RowProps {
@@ -18,6 +18,7 @@ export interface RowProps {
     totalRows: number;
     clickable: boolean;
     eventsController: EventsController;
+    checkboxColumnEnabled: boolean;
 }
 
 export function Row(props: RowProps): ReactElement {
@@ -32,7 +33,7 @@ export function Row(props: RowProps): ReactElement {
             role="row"
             aria-selected={ariaSelected}
         >
-            {selectActionHelper.showCheckboxColumn && (
+            {props.checkboxColumnEnabled && (
                 <CheckboxCell
                     item={props.item}
                     key="checkbox_cell"
@@ -42,20 +43,18 @@ export function Row(props: RowProps): ReactElement {
                 />
             )}
             {props.columns.map((column, baseIndex) => {
-                const cell = (
-                    <Cell
+                return (
+                    <DataCell
                         key={`row_${props.item.id}_col_${column.columnId}`}
                         column={column}
                         rowIndex={props.index}
-                        columnIndex={selectActionHelper.showCheckboxColumn ? baseIndex + 1 : baseIndex}
+                        columnIndex={props.checkboxColumnEnabled ? baseIndex + 1 : baseIndex}
                         item={props.item}
                         clickable={props.clickable}
                         preview={false}
                         eventsController={eventsController}
                     />
                 );
-
-                return cell;
             })}
             {props.showSelectorCell && (
                 <SelectorCell
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
index 52a470d88c..fbdb49ddae 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
@@ -26,6 +26,7 @@ export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
                         item={item}
                         key={`row_${item.id}`}
                         showSelectorCell={config.columnsHidable}
+                        checkboxColumnEnabled={config.checkboxColumnEnabled}
                     />
                 );
             })}
diff --git a/packages/pluggableWidgets/datagrid-web/src/typings/CellComponent.ts b/packages/pluggableWidgets/datagrid-web/src/typings/CellComponent.ts
index bc0f756450..15f1fd9e48 100644
--- a/packages/pluggableWidgets/datagrid-web/src/typings/CellComponent.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/typings/CellComponent.ts
@@ -1,23 +1,6 @@
-import { ObjectItem } from "mendix";
-import { ReactElement, ReactNode } from "react";
-import { GridColumn } from "./GridColumn";
 import { ElementProps } from "@mendix/widget-plugin-grid/event-switch/base";
+import { ObjectItem } from "mendix";
 
 export interface EventsController {
     getProps(item: ObjectItem): ElementProps<HTMLDivElement>;
 }
-
-export interface CellComponentProps<C extends GridColumn> {
-    children?: ReactNode;
-    className?: string;
-    column: C;
-    item: ObjectItem;
-    key?: string | number;
-    rowIndex: number;
-    columnIndex?: number;
-    clickable?: boolean;
-    preview?: boolean;
-    eventsController: EventsController;
-}
-
-export type CellComponent<C extends GridColumn> = (props: CellComponentProps<C>) => ReactElement;
diff --git a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
index 454da591ec..58af33124c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
@@ -1,11 +1,5 @@
-import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
-import { PositionController } from "@mendix/widget-plugin-grid/keyboard-navigation/PositionController";
-import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout";
 import { dynamic, list, listAttr, listExp } from "@mendix/widget-plugin-test-utils";
-import { GUID, ObjectItem } from "mendix";
 import { ColumnsType, DatagridContainerProps } from "../../typings/DatagridProps";
-import { Cell } from "../components/Cell";
-import { WidgetProps } from "../components/Widget";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { ColumnStore } from "../helpers/state/column/ColumnStore";
 import { IColumnParentStore } from "../helpers/state/ColumnGroupStore";
@@ -68,46 +62,6 @@ export function mockGridColumn(c: ColumnsType, index: number): GridColumn {
     return new ColumnStore(index, c, parentStore);
 }
 
-export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
-    const id = "dg1";
-    const columnsProp = [column("Test")];
-    const columns = columnsProp.map((col, index) => mockGridColumn(col, index));
-
-    return {
-        CellComponent: Cell,
-        className: "test",
-        columnsDraggable: false,
-        columnsFilterable: false,
-        columnsHidable: false,
-        columnsResizable: false,
-        columnsSortable: false,
-        data: [{ id: "123456" as GUID }],
-        exporting: false,
-        filterRenderer: () => <input type="text" defaultValue="dummy" />,
-        headerWrapperRenderer: (_index, header) => header,
-        id,
-        onExportCancel: jest.fn(),
-        paginationType: "buttons",
-        visibleColumns: columns,
-        availableColumns: columns,
-        columnsSwap: jest.fn(),
-        setIsResizing: jest.fn(),
-        processedRows: 0,
-        selectActionHelper: mockSelectionProps(),
-        cellEventsController: { getProps: () => Object.create({}) },
-        checkboxEventsController: { getProps: () => Object.create({}) },
-        isFirstLoad: false,
-        isFetchingNextBatch: false,
-        loadingType: "spinner",
-        columnsLoading: false,
-        showRefreshIndicator: false,
-        focusController: new FocusTargetController(
-            new PositionController(),
-            new VirtualGridLayout(1, columns.length, 10)
-        )
-    };
-}
-
 export function mockContainerProps(overrides?: Partial<DatagridContainerProps>): DatagridContainerProps {
     return {
         class: "dg-one",

From 7dc218c88b63c821a42a97d1c0aff4d7b9e82dba Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Thu, 20 Nov 2025 11:37:07 +0100
Subject: [PATCH 19/21] refactor: add new select actions provider

---
 .../src/interfaces/SelectActionsService.ts    |  11 ++
 .../shared/widget-plugin-grid/src/main.ts     |   2 +
 .../SelectActionsProvider.service.ts          | 116 ++++++++++++++++++
 .../src/selection/select-action-handler.ts    |   1 +
 4 files changed, 130 insertions(+)
 create mode 100644 packages/shared/widget-plugin-grid/src/interfaces/SelectActionsService.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts

diff --git a/packages/shared/widget-plugin-grid/src/interfaces/SelectActionsService.ts b/packages/shared/widget-plugin-grid/src/interfaces/SelectActionsService.ts
new file mode 100644
index 0000000000..bffd4e8e84
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/interfaces/SelectActionsService.ts
@@ -0,0 +1,11 @@
+import { ObjectItem } from "mendix";
+import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType } from "../selection";
+
+export interface SelectActionsService {
+    selectionType: SelectionType;
+    select: SelectFx;
+    selectPage: SelectAllFx;
+    selectAdjacent: SelectAdjacentFx;
+    isSelected(item: ObjectItem): boolean;
+    clearSelection(): void;
+}
diff --git a/packages/shared/widget-plugin-grid/src/main.ts b/packages/shared/widget-plugin-grid/src/main.ts
index aeda935552..a8b12f7e3f 100644
--- a/packages/shared/widget-plugin-grid/src/main.ts
+++ b/packages/shared/widget-plugin-grid/src/main.ts
@@ -1,6 +1,7 @@
 export { DatasourceService } from "./core/Datasource.service";
 export { ProgressService } from "./core/Progress.service";
 export type { QueryService } from "./interfaces/QueryService";
+export type { SelectActionsService } from "./interfaces/SelectActionsService";
 export type { SelectionDynamicProps } from "./interfaces/SelectionDynamicProps";
 export { type SelectionHelperService } from "./interfaces/SelectionHelperService";
 export type { TaskProgressService } from "./interfaces/TaskProgressService";
@@ -8,3 +9,4 @@ export { SelectAllService } from "./select-all/SelectAll.service";
 export { SelectionCounterViewModel } from "./selection-counter/SelectionCounter.viewModel";
 export * from "./selection/context";
 export { createSelectionHelper } from "./selection/createSelectionHelper";
+export { SelectActionsProvider } from "./selection/SelectActionsProvider.service";
diff --git a/packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts b/packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts
new file mode 100644
index 0000000000..ab67db4f0e
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts
@@ -0,0 +1,116 @@
+import { ObjectItem } from "mendix";
+import { SelectActionsService } from "../interfaces/SelectActionsService";
+import { SelectionHelperService } from "../interfaces/SelectionHelperService";
+import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType } from "./types";
+
+export class SelectActionsProvider implements SelectActionsService {
+    constructor(
+        private type: SelectionType,
+        private selectionHelper?: SelectionHelperService
+    ) {
+        if (type === "Multi") {
+            if (!selectionHelper || selectionHelper.type !== "Multi") {
+                throw new Error("SelectionHelperService of type Multi is required for Multi selection type");
+            }
+        }
+        if (type === "Single") {
+            if (!selectionHelper || selectionHelper.type !== "Single") {
+                throw new Error("SelectionHelperService of type Single is required for Single selection type");
+            }
+        }
+    }
+
+    get selectionType(): SelectionType {
+        return this.type;
+    }
+
+    select: SelectFx = (...params) => {
+        if (!this.selectionHelper) {
+            return;
+        }
+
+        if (this.selectionHelper.type === "Multi") {
+            this.selectItemMulti(...params);
+        } else {
+            this.selectItemSingle(...params);
+        }
+    };
+
+    selectPage: SelectAllFx = (requestedAction?: "selectAll") => {
+        if (!this.selectionHelper) {
+            return;
+        }
+
+        if (this.selectionHelper.type === "Single") {
+            console.warn("Calling selectPage in single selection mode have no effect");
+            return;
+        }
+
+        if (requestedAction === "selectAll") {
+            this.selectionHelper.selectAll();
+            return;
+        }
+
+        if (this.selectionHelper.selectionStatus === "all") {
+            this.selectionHelper.selectNone();
+        } else {
+            this.selectionHelper.selectAll();
+        }
+    };
+
+    selectAdjacent: SelectAdjacentFx = (...params) => {
+        if (this.selectionHelper?.type === "Multi") {
+            this.selectionHelper.selectUpToAdjacent(...params);
+        }
+    };
+
+    isSelected = (item: ObjectItem): boolean => {
+        return this.selectionHelper ? this.selectionHelper.isSelected(item) : false;
+    };
+
+    clearSelection = (): void => {
+        if (this.selectionHelper?.type === "Multi") {
+            this.selectionHelper.clearSelection();
+        } else if (this.selectionHelper?.type === "Single") {
+            this.selectionHelper.remove();
+        }
+    };
+
+    private selectItemMulti: SelectFx = (item, shiftKey, toggleMode = false) => {
+        if (this.selectionHelper?.type !== "Multi") {
+            return;
+        }
+
+        if (shiftKey) {
+            this.selectionHelper.selectUpTo(item, toggleMode ? "toggle" : "clear");
+            return;
+        }
+
+        this.selectItem(item, toggleMode);
+    };
+
+    private selectItemSingle: SelectFx = (item, _, toggleMode = false) => {
+        this.selectItem(item, toggleMode);
+    };
+
+    private selectItem = (item: ObjectItem, toggleMode: boolean): void => {
+        if (this.selectionHelper === undefined) {
+            return;
+        }
+
+        // clear mode
+        if (toggleMode === false) {
+            this.selectionHelper.reduceTo(item);
+            return;
+        }
+
+        // toggle mode
+        if (this.selectionHelper.isSelected(item)) {
+            this.selectionHelper.remove(item);
+        } else if (this.selectionHelper.type === "Multi") {
+            this.selectionHelper.add(item);
+        } else {
+            this.selectionHelper.reduceTo(item);
+        }
+    };
+}
diff --git a/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts b/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
index 08c4c48bad..4cd1c3a28c 100644
--- a/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
@@ -2,6 +2,7 @@ import { ObjectItem } from "mendix";
 import { SelectionHelperService } from "../interfaces/SelectionHelperService";
 import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType, WidgetSelectionProperty } from "./types";
 
+/** @deprecated use `SelectActionsProvider` instead */
 export class SelectActionHandler {
     constructor(
         private selection: WidgetSelectionProperty,

From fc9dcebb5eb0a43bddafbbae11a3829ce289f0ec Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Fri, 21 Nov 2025 13:28:16 +0100
Subject: [PATCH 20/21] refactor: migrate to brandi

---
 .../datagrid-web/src/Datagrid.tsx             | 55 +-------------
 .../src/components/CheckboxCell.tsx           | 22 +++---
 .../src/components/CheckboxColumnHeader.tsx   | 39 +++++-----
 .../datagrid-web/src/components/Row.tsx       | 10 +--
 .../src/components/RowsRenderer.tsx           | 20 ++++--
 .../components/loader/RowSkeletonLoader.tsx   |  6 +-
 .../src/features/base/WidgetRoot.viewModel.ts | 10 +--
 .../row-interaction/CellEventsController.ts   | 71 +++++++++++--------
 .../CheckboxEventsController.ts               | 61 +++++++++-------
 .../__tests__/cell-keyboard.spec.tsx          | 13 +++-
 .../__tests__/cell-pointer.spec.tsx           |  8 ++-
 .../src/features/row-interaction/base.ts      | 14 ++--
 .../selection-counter/SelectionCounter.tsx    |  6 +-
 .../src/helpers/SelectActionHelper.ts         | 63 ----------------
 .../datagrid-web/src/helpers/root-context.ts  | 23 ------
 .../src/helpers/useDataGridJSActions.ts       |  8 +--
 .../src/model/configs/Datagrid.config.ts      | 25 ++++---
 .../model/containers/Datagrid.container.ts    | 70 +++++++++++++++---
 .../src/model/containers/Root.container.ts    | 16 ++++-
 .../src/model/hooks/injection-hooks.ts        |  5 ++
 .../src/model/models/columns.model.ts         | 12 ++++
 .../src/model/models/paging.model.ts          |  6 ++
 .../model/services/SelectionGate.service.ts   |  3 -
 .../src/model/stores/PageSize.store.ts        | 14 ++++
 .../datagrid-web/src/model/tokens.ts          | 25 ++++++-
 .../datagrid-web/src/utils/test-utils.tsx     |  2 +-
 .../datagrid-web/typings/MainGateProps.ts     |  8 ++-
 .../src/helpers/createClickActionHelper.ts    | 21 ++++++
 .../src/interfaces/SelectionDynamicProps.ts   |  2 +-
 .../src/interfaces/SelectionHelperService.ts  |  2 +-
 .../createFocusController.ts                  | 24 +++++++
 .../src/keyboard-navigation/layout.model.ts   | 12 ++++
 .../shared/widget-plugin-grid/src/main.ts     |  3 +
 .../SelectActionsProvider.service.ts          |  4 +-
 .../src/selection/createSelectionHelper.ts    | 17 +++--
 .../src/selection/select-action-handler.ts    |  4 +-
 36 files changed, 409 insertions(+), 295 deletions(-)
 delete mode 100644 packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts
 delete mode 100644 packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/models/paging.model.ts
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/model/stores/PageSize.store.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/helpers/createClickActionHelper.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts
 create mode 100644 packages/shared/widget-plugin-grid/src/keyboard-navigation/layout.model.ts

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 59d039d1eb..3eeddd6be1 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -1,71 +1,22 @@
-import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
-import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
-import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { ContainerProvider } from "brandi-react";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Widget } from "./components/Widget";
 import { useDataExport } from "./features/data-export/useDataExport";
-import { useCellEventsController } from "./features/row-interaction/CellEventsController";
-import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
-import { LegacyContext } from "./helpers/root-context";
-import { useSelectActionHelper } from "./helpers/SelectActionHelper";
 import { useDataGridJSActions } from "./helpers/useDataGridJSActions";
-import {
-    useColumnsStore,
-    useExportProgressService,
-    useMainGate,
-    useSelectionHelper
-} from "./model/hooks/injection-hooks";
+import { useColumnsStore, useExportProgressService } from "./model/hooks/injection-hooks";
 import { useDatagridContainer } from "./model/hooks/useDatagridContainer";
 
 const DatagridRoot = observer((props: DatagridContainerProps): ReactElement => {
-    const gate = useMainGate();
     const columnsStore = useColumnsStore();
     const exportProgress = useExportProgressService();
-    const items = gate.props.datasource.items ?? [];
 
     const [abortExport] = useDataExport(props, columnsStore, exportProgress);
 
-    const selectionHelper = useSelectionHelper();
+    useDataGridJSActions();
 
-    const selectActionHelper = useSelectActionHelper(props, selectionHelper);
-
-    const clickActionHelper = useClickActionHelper({
-        onClickTrigger: props.onClickTrigger,
-        onClick: props.onClick
-    });
-
-    useDataGridJSActions(selectActionHelper);
-
-    const visibleColumnsCount = selectActionHelper.showCheckboxColumn
-        ? columnsStore.visibleColumns.length + 1
-        : columnsStore.visibleColumns.length;
-
-    const focusController = useFocusTargetController({
-        rows: items.length,
-        columns: visibleColumnsCount,
-        pageSize: props.pageSize
-    });
-
-    const cellEventsController = useCellEventsController(selectActionHelper, clickActionHelper, focusController);
-
-    const checkboxEventsController = useCheckboxEventsController(selectActionHelper, focusController);
-
-    return (
-        <LegacyContext.Provider
-            value={useConst({
-                selectionHelper,
-                selectActionHelper,
-                cellEventsController,
-                checkboxEventsController,
-                focusController
-            })}
-        >
-            <Widget onExportCancel={abortExport} />
-        </LegacyContext.Provider>
-    );
+    return <Widget onExportCancel={abortExport} />;
 });
 
 DatagridRoot.displayName = "DatagridComponent";
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/CheckboxCell.tsx b/packages/pluggableWidgets/datagrid-web/src/components/CheckboxCell.tsx
index 8c67978e5b..c907a62820 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/CheckboxCell.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/CheckboxCell.tsx
@@ -1,8 +1,12 @@
 import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps";
 import { ObjectItem } from "mendix";
-import { FocusEvent, ReactElement } from "react";
-import { useLegacyContext } from "../helpers/root-context";
-import { useBasicData } from "../model/hooks/injection-hooks";
+import { FocusEvent, ReactElement, useMemo } from "react";
+import {
+    useCheckboxEventsHandler,
+    useDatagridConfig,
+    useSelectActions,
+    useTexts
+} from "../model/hooks/injection-hooks";
 import { CellElement, CellElementProps } from "./CellElement";
 
 export type CheckboxCellProps = CellElementProps & {
@@ -12,17 +16,19 @@ export type CheckboxCellProps = CellElementProps & {
 };
 
 export function CheckboxCell({ item, rowIndex, lastRow, ...rest }: CheckboxCellProps): ReactElement {
+    const config = useDatagridConfig();
+    const selectActions = useSelectActions();
+    const checkboxEventsHandler = useCheckboxEventsHandler();
+    const { selectRowLabel } = useTexts();
     const keyNavProps = useFocusTargetProps<HTMLInputElement>({
         columnIndex: 0,
         rowIndex
     });
 
-    const { selectActionHelper, checkboxEventsController } = useLegacyContext();
-    const { selectRowLabel, gridInteractive } = useBasicData();
     return (
-        <CellElement {...rest} clickable={gridInteractive} className="widget-datagrid-col-select" tabIndex={-1}>
+        <CellElement {...rest} clickable={config.isInteractive} className="widget-datagrid-col-select" tabIndex={-1}>
             <input
-                checked={selectActionHelper.isSelected(item)}
+                checked={selectActions.isSelected(item)}
                 type="checkbox"
                 tabIndex={keyNavProps.tabIndex}
                 data-position={keyNavProps["data-position"]}
@@ -30,7 +36,7 @@ export function CheckboxCell({ item, rowIndex, lastRow, ...rest }: CheckboxCellP
                 onFocus={lastRow ? scrollParentOnFocus : undefined}
                 ref={keyNavProps.ref}
                 aria-label={`${selectRowLabel ?? "Select row"} ${rowIndex + 1}`}
-                {...checkboxEventsController.getProps(item)}
+                {...useMemo(() => checkboxEventsHandler.getProps(item), [item, checkboxEventsHandler])}
             />
         </CellElement>
     );
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx
index dec1876094..810c64fd3e 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx
@@ -1,41 +1,38 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
 import { ThreeStateCheckBox } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
-import { SelectionStatus } from "@mendix/widget-plugin-grid/selection";
+import { observer } from "mobx-react-lite";
 import { Fragment, ReactElement, ReactNode } from "react";
-import { useLegacyContext } from "../helpers/root-context";
-import { useBasicData } from "../model/hooks/injection-hooks";
+import { useDatagridConfig, useSelectActions, useSelectionHelper, useTexts } from "../model/hooks/injection-hooks";
 
 export function CheckboxColumnHeader(): ReactElement {
-    const { selectActionHelper, selectionHelper } = useLegacyContext();
-    const { showCheckboxColumn, showSelectAllToggle, onSelectAll } = selectActionHelper;
-    const { selectAllRowsLabel } = useBasicData();
+    const { selectAllCheckboxEnabled, checkboxColumnEnabled } = useDatagridConfig();
 
-    if (showCheckboxColumn === false) {
+    if (checkboxColumnEnabled === false) {
         return <Fragment />;
     }
 
     return (
         <div className="th widget-datagrid-col-select" role="columnheader">
-            {showSelectAllToggle && (
-                <Checkbox
-                    status={selectionHelper?.type === "Multi" ? selectionHelper.selectionStatus : "none"}
-                    onChange={onSelectAll}
-                    aria-label={selectAllRowsLabel}
-                />
-            )}
+            <If condition={selectAllCheckboxEnabled}>
+                <Checkbox />
+            </If>
         </div>
     );
 }
 
-function Checkbox(props: { status: SelectionStatus; onChange: () => void; "aria-label"?: string }): ReactNode {
-    if (props.status === "unknown") {
-        console.error("Data grid 2: don't know how to render column checkbox with selectionStatus=unknown");
+const Checkbox = observer(function Checkbox(): ReactNode {
+    const { selectAllRowsLabel } = useTexts();
+    const selectionHelper = useSelectionHelper();
+    const selectActions = useSelectActions();
+
+    if (!selectionHelper || selectionHelper.type !== "Multi") {
         return null;
     }
     return (
         <ThreeStateCheckBox
-            value={props.status}
-            onChange={props.onChange}
-            aria-label={props["aria-label"] ?? "Select all rows"}
+            value={selectionHelper.selectionStatus}
+            onChange={() => selectActions.selectPage()}
+            aria-label={selectAllRowsLabel || "Select all rows"}
         />
     );
-}
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
index bb720ba7ec..4d41de7428 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Row.tsx
@@ -1,7 +1,7 @@
+import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
 import classNames from "classnames";
 import { ObjectItem } from "mendix";
 import { ReactElement } from "react";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { EventsController } from "../typings/CellComponent";
 import { GridColumn } from "../typings/GridColumn";
 import { CheckboxCell } from "./CheckboxCell";
@@ -14,7 +14,7 @@ export interface RowProps {
     item: ObjectItem;
     index: number;
     showSelectorCell?: boolean;
-    selectActionHelper: SelectActionHelper;
+    selectActions: SelectActionsService;
     totalRows: number;
     clickable: boolean;
     eventsController: EventsController;
@@ -22,9 +22,9 @@ export interface RowProps {
 }
 
 export function Row(props: RowProps): ReactElement {
-    const { selectActionHelper, totalRows, eventsController } = props;
-    const selected = selectActionHelper.isSelected(props.item);
-    const ariaSelected = selectActionHelper.selectionType === "None" ? undefined : selected;
+    const { selectActions, totalRows, eventsController } = props;
+    const selected = selectActions.isSelected(props.item);
+    const ariaSelected = selectActions.selectionType === "None" ? undefined : selected;
     const borderTop = props.index === 0;
 
     return (
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
index fbdb49ddae..11de6a4e44 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/RowsRenderer.tsx
@@ -1,8 +1,15 @@
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
-import { useLegacyContext } from "../helpers/root-context";
-import { useColumnsStore, useDatagridConfig, useRowClass, useRows } from "../model/hooks/injection-hooks";
+import {
+    useCellEventsHandler,
+    useColumnsStore,
+    useDatagridConfig,
+    useFocusService,
+    useRowClass,
+    useRows,
+    useSelectActions
+} from "../model/hooks/injection-hooks";
 import { Row } from "./Row";
 
 export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
@@ -10,15 +17,18 @@ export const RowsRenderer = observer(function RowsRenderer(): ReactElement {
     const config = useDatagridConfig();
     const { visibleColumns } = useColumnsStore();
     const rowClass = useRowClass();
-    const { cellEventsController, focusController, selectActionHelper } = useLegacyContext();
+    const cellEventsController = useCellEventsHandler();
+    const focusService = useFocusService();
+    const selectActions = useSelectActions();
+
     return (
-        <KeyNavProvider focusController={focusController}>
+        <KeyNavProvider focusController={focusService}>
             {rows.map((item, rowIndex) => {
                 return (
                     <Row
                         totalRows={rows.length}
                         clickable={config.isInteractive}
-                        selectActionHelper={selectActionHelper}
+                        selectActions={selectActions}
                         eventsController={cellEventsController}
                         className={rowClass.class.get(item)}
                         columns={visibleColumns}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/loader/RowSkeletonLoader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/loader/RowSkeletonLoader.tsx
index a784220308..a7039fe8a5 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/loader/RowSkeletonLoader.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/loader/RowSkeletonLoader.tsx
@@ -1,5 +1,5 @@
 import { Fragment, ReactElement } from "react";
-import { useLegacyContext } from "../../helpers/root-context";
+import { useDatagridConfig } from "../../model/hooks/injection-hooks";
 import { CellElement } from "../CellElement";
 import { SelectorCell } from "../SelectorCell";
 import { SkeletonLoader } from "./SkeletonLoader";
@@ -17,14 +17,14 @@ export function RowSkeletonLoader({
     pageSize,
     useBorderTop = true
 }: RowSkeletonLoaderProps): ReactElement {
-    const { selectActionHelper } = useLegacyContext();
+    const { checkboxColumnEnabled } = useDatagridConfig();
     return (
         <Fragment>
             {Array.from({ length: pageSize }).map((_, i) => {
                 const borderTop = useBorderTop && i === 0;
                 return (
                     <div className="tr" role="row" key={i}>
-                        {selectActionHelper.showCheckboxColumn && (
+                        {checkboxColumnEnabled && (
                             <CellElement borderTop={borderTop} className="widget-datagrid-col-select" tabIndex={-1}>
                                 <input type="checkbox" />
                             </CellElement>
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts b/packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts
index 8f689a6bae..0ac435dfab 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/base/WidgetRoot.viewModel.ts
@@ -2,7 +2,7 @@ import { TaskProgressService } from "@mendix/widget-plugin-grid/main";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { makeAutoObservable } from "mobx";
 import { createRef, CSSProperties } from "react";
-import { ItemSelectionMethodEnum } from "../../../typings/DatagridProps";
+import { type SelectionMethod } from "../row-interaction/base";
 
 export class WidgetRootViewModel {
     ref = createRef<HTMLDivElement>();
@@ -12,9 +12,9 @@ export class WidgetRootViewModel {
             style?: CSSProperties;
             class?: string;
         }>,
-        private config: { selectionEnabled: boolean; selectionMethod: ItemSelectionMethodEnum },
+        private config: { selectionEnabled: boolean; selectionMethod: SelectionMethod },
         private exportTask: TaskProgressService,
-        private selectAllTask: TaskProgressService
+        private selectAllVM: { isOpen: boolean }
     ) {
         makeAutoObservable(this);
     }
@@ -28,14 +28,14 @@ export class WidgetRootViewModel {
     }
 
     get selecting(): boolean {
-        return this.selectAllTask.inProgress;
+        return this.selectAllVM.isOpen;
     }
 
     get selectable(): boolean {
         return this.config.selectionEnabled;
     }
 
-    get selectionMethod(): ItemSelectionMethodEnum {
+    get selectionMethod(): SelectionMethod {
         return this.config.selectionMethod;
     }
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CellEventsController.ts b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CellEventsController.ts
index fc84562371..4116f85999 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CellEventsController.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CellEventsController.ts
@@ -1,17 +1,24 @@
+import { ClickEntry, ClickEventSwitch } from "@mendix/widget-plugin-grid/event-switch/ClickEventSwitch";
 import { ElementEntry, ElementProps } from "@mendix/widget-plugin-grid/event-switch/base";
 import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
-import { ObjectItem } from "mendix";
-import { useMemo } from "react";
-import { createActionHandlers } from "./action-handlers";
-import { CellContext } from "./base";
-import { createSelectHandlers } from "./select-handlers";
-import { SelectActionHelper } from "../../helpers/SelectActionHelper";
-import { SelectAdjacentFx, SelectAllFx, SelectFx } from "@mendix/widget-plugin-grid/selection";
 import { ClickActionHelper, ExecuteActionFx } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
+import {
+    SelectAdjacentFx,
+    SelectAllFx,
+    SelectFx,
+    SelectionMode,
+    SelectionType
+} from "@mendix/widget-plugin-grid/selection";
+import { ObjectItem } from "mendix";
+
+import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { createActionHandlers } from "./action-handlers";
+import { CellContext, SelectionMethod } from "./base";
 import { createFocusTargetHandlers } from "./focus-target-handlers";
-import { ClickEntry, ClickEventSwitch } from "@mendix/widget-plugin-grid/event-switch/ClickEventSwitch";
+import { createSelectHandlers } from "./select-handlers";
 
 export class CellEventsController {
     constructor(
@@ -44,28 +51,34 @@ export class CellEventsController {
     }
 }
 
-export function useCellEventsController(
-    selectHelper: SelectActionHelper,
+export function createCellEventsController(
+    config: {
+        selectionType: SelectionType;
+        selectionMethod: SelectionMethod;
+        selectionMode: SelectionMode;
+    },
+    selectActions: SelectActionsService,
+    focusController: FocusTargetController,
     clickHelper: ClickActionHelper,
-    focusController: FocusTargetController
+    pageSize: ComputedAtom<number>
 ): CellEventsController {
-    return useMemo(() => {
-        const cellContextFactory = (item: ObjectItem): CellContext => ({
-            item,
-            pageSize: selectHelper.pageSize,
-            selectionType: selectHelper.selectionType,
-            selectionMethod: selectHelper.selectionMethod,
-            selectionMode: selectHelper.selectionMode,
-            clickTrigger: clickHelper.clickTrigger
-        });
+    // Placeholder function, actual implementation will depend on the specific context and services available.
+    const cellContextFactory = (item: ObjectItem): CellContext => ({
+        type: "cell",
+        item,
+        pageSize: pageSize.get(),
+        selectionType: config.selectionType,
+        selectionMethod: config.selectionMethod,
+        selectionMode: config.selectionMode,
+        clickTrigger: clickHelper.clickTrigger
+    });
 
-        return new CellEventsController(
-            cellContextFactory,
-            selectHelper.onSelect,
-            selectHelper.onSelectAll,
-            selectHelper.onSelectAdjacent,
-            clickHelper.onExecuteAction,
-            focusController.dispatch
-        );
-    }, [selectHelper, clickHelper, focusController]);
+    return new CellEventsController(
+        cellContextFactory,
+        selectActions.select,
+        selectActions.selectPage,
+        selectActions.selectAdjacent,
+        clickHelper.onExecuteAction,
+        focusController.dispatch
+    );
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CheckboxEventsController.ts b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CheckboxEventsController.ts
index a2239dd16a..559e720f25 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CheckboxEventsController.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/CheckboxEventsController.ts
@@ -1,14 +1,20 @@
 import { ElementProps } from "@mendix/widget-plugin-grid/event-switch/base";
 import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
-import { SelectAdjacentFx, SelectAllFx, SelectFx } from "@mendix/widget-plugin-grid/selection";
+import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
+import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
+import { SelectActionsService } from "@mendix/widget-plugin-grid/main";
+import {
+    SelectAdjacentFx,
+    SelectAllFx,
+    SelectFx,
+    SelectionMode,
+    SelectionType
+} from "@mendix/widget-plugin-grid/selection";
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
 import { ObjectItem } from "mendix";
-import { useMemo } from "react";
-import { SelectActionHelper } from "../../helpers/SelectActionHelper";
-import { CheckboxContext } from "./base";
+import { CheckboxContext, SelectionMethod } from "./base";
 import { checkboxHandlers } from "./checkbox-handlers";
-import { FocusTargetFx } from "@mendix/widget-plugin-grid/keyboard-navigation/base";
 import { createFocusTargetHandlers } from "./focus-target-handlers";
-import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
 
 export class CheckboxEventsController {
     constructor(
@@ -29,24 +35,29 @@ export class CheckboxEventsController {
         );
 }
 
-export function useCheckboxEventsController(
-    selectHelper: SelectActionHelper,
-    focusController: FocusTargetController
+export function creteCheckboxEventsController(
+    config: {
+        selectionType: SelectionType;
+        selectionMethod: SelectionMethod;
+        selectionMode: SelectionMode;
+    },
+    selectActions: SelectActionsService,
+    focusController: FocusTargetController,
+    pageSize: ComputedAtom<number>
 ): CheckboxEventsController {
-    return useMemo(() => {
-        const contextFactory = (item: ObjectItem): CheckboxContext => ({
-            item,
-            pageSize: selectHelper.pageSize,
-            selectionType: selectHelper.selectionType,
-            selectionMethod: selectHelper.selectionMethod,
-            selectionMode: selectHelper.selectionMode
-        });
-        return new CheckboxEventsController(
-            contextFactory,
-            selectHelper.onSelect,
-            selectHelper.onSelectAll,
-            selectHelper.onSelectAdjacent,
-            focusController.dispatch
-        );
-    }, [selectHelper, focusController]);
+    const contextFactory = (item: ObjectItem): CheckboxContext => ({
+        type: "checkbox",
+        item,
+        pageSize: pageSize.get(),
+        selectionType: config.selectionType,
+        selectionMethod: config.selectionMethod,
+        selectionMode: config.selectionMode
+    });
+    return new CheckboxEventsController(
+        contextFactory,
+        selectActions.select,
+        selectActions.selectPage,
+        selectActions.selectAdjacent,
+        focusController.dispatch
+    );
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-keyboard.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-keyboard.spec.tsx
index fa894e411c..3193d3f973 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-keyboard.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-keyboard.spec.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
 import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { SelectionType } from "@mendix/widget-plugin-grid/selection";
@@ -5,9 +6,9 @@ import { objectItems } from "@mendix/widget-plugin-test-utils";
 import { render, RenderResult } from "@testing-library/react";
 import userEvent, { UserEvent } from "@testing-library/user-event";
 import { ReactElement } from "react";
-import { SelectionMethod } from "../../../helpers/SelectActionHelper";
+
 import { createActionHandlers } from "../action-handlers";
-import { CellContext } from "../base";
+import { CellContext, SelectionMethod } from "../base";
 import { createSelectHandlers } from "../select-handlers";
 
 function setup(jsx: ReactElement): { user: UserEvent } & RenderResult {
@@ -41,6 +42,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: sm as SelectionMethod,
@@ -88,6 +90,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: "rowClick",
@@ -171,6 +174,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: "rowClick",
@@ -212,6 +216,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: "none",
@@ -235,6 +240,7 @@ describe("grid cell", () => {
 
             const props = eventSwitch<CellContext, HTMLDivElement>(
                 (): CellContext => ({
+                    type: "cell",
                     item,
                     pageSize: 10,
                     selectionMethod: "none",
@@ -261,6 +267,7 @@ describe("grid cell", () => {
 
             const props = eventSwitch<CellContext, HTMLDivElement>(
                 (): CellContext => ({
+                    type: "cell",
                     item,
                     pageSize: 10,
                     selectionMethod: "none",
@@ -302,6 +309,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod,
@@ -330,6 +338,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: "checkbox",
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-pointer.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-pointer.spec.tsx
index 7c699f388b..b75f38877a 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-pointer.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/__tests__/cell-pointer.spec.tsx
@@ -1,12 +1,12 @@
+/* eslint-disable jest/no-conditional-expect */
 import { eventSwitch } from "@mendix/widget-plugin-grid/event-switch/event-switch";
 import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { objectItems } from "@mendix/widget-plugin-test-utils";
 import { render, RenderResult } from "@testing-library/react";
 import userEvent, { UserEvent } from "@testing-library/user-event";
 import { ReactElement } from "react";
-import { SelectionMethod } from "../../../helpers/SelectActionHelper";
 import { createActionHandlers } from "../action-handlers";
-import { CellContext } from "../base";
+import { CellContext, SelectionMethod } from "../base";
 import { createSelectHandlers } from "../select-handlers";
 
 function setup(jsx: ReactElement): { user: UserEvent } & RenderResult {
@@ -40,6 +40,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: sm as SelectionMethod,
@@ -90,6 +91,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: sm as SelectionMethod,
@@ -142,6 +144,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: sm as SelectionMethod,
@@ -192,6 +195,7 @@ describe("grid cell", () => {
 
                 const props = eventSwitch<CellContext, HTMLDivElement>(
                     (): CellContext => ({
+                        type: "cell",
                         item,
                         pageSize: 10,
                         selectionMethod: sm as SelectionMethod,
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/base.ts b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/base.ts
index ad4685117c..05c0278feb 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/base.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/row-interaction/base.ts
@@ -1,9 +1,10 @@
+import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { SelectionMode, SelectionType } from "@mendix/widget-plugin-grid/selection";
 import { ObjectItem } from "mendix";
-import { ClickTrigger } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
-import { SelectionMethod } from "../../helpers/SelectActionHelper";
 
-interface BaseContext {
+export type SelectionMethod = "rowClick" | "checkbox" | "none";
+
+interface BaseEventContext {
     item: ObjectItem;
     pageSize: number;
     selectionMethod: SelectionMethod;
@@ -11,8 +12,11 @@ interface BaseContext {
     selectionMode: SelectionMode;
 }
 
-export interface CellContext extends BaseContext {
+export interface CellContext extends BaseEventContext {
+    type: "cell";
     clickTrigger: ClickTrigger;
 }
 
-export interface CheckboxContext extends BaseContext {}
+export interface CheckboxContext extends BaseEventContext {
+    type: "checkbox";
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx
index ce4e19983b..978025e56d 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react-lite";
-import { useLegacyContext } from "../../helpers/root-context";
+import { useSelectActions } from "../../model/hooks/injection-hooks";
 import { useSelectionCounterViewModel } from "./injection-hooks";
 
 export const SelectionCounter = observer(function SelectionCounter() {
     const selectionCountStore = useSelectionCounterViewModel();
-    const { selectActionHelper } = useLegacyContext();
+    const selectActions = useSelectActions();
 
     return (
         <div className="widget-datagrid-selection-counter">
@@ -12,7 +12,7 @@ export const SelectionCounter = observer(function SelectionCounter() {
                 {selectionCountStore.selectedCountText}
             </span>
             &nbsp;|&nbsp;
-            <button className="widget-datagrid-btn-link" onClick={selectActionHelper.onClearSelection}>
+            <button className="widget-datagrid-btn-link" onClick={() => selectActions.clearSelection()}>
                 {selectionCountStore.clearButtonLabel}
             </button>
         </div>
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts
deleted file mode 100644
index c14d8492b1..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { SelectionHelperService } from "@mendix/widget-plugin-grid/main";
-import { SelectActionHandler, SelectionMode, WidgetSelectionProperty } from "@mendix/widget-plugin-grid/selection";
-import { useMemo } from "react";
-import { DatagridContainerProps, DatagridPreviewProps, ItemSelectionMethodEnum } from "../../typings/DatagridProps";
-export type SelectionMethod = "rowClick" | "checkbox" | "none";
-
-export class SelectActionHelper extends SelectActionHandler {
-    pageSize: number;
-    private _selectionMethod: ItemSelectionMethodEnum;
-    private _showSelectAllToggle: boolean;
-
-    constructor(
-        selection: WidgetSelectionProperty,
-        selectionHelper: SelectionHelperService | undefined,
-        _selectionMethod: ItemSelectionMethodEnum,
-        _showSelectAllToggle: boolean,
-        pageSize: number,
-        private _selectionMode: SelectionMode
-    ) {
-        super(selection, selectionHelper);
-        this._selectionMethod = _selectionMethod;
-        this._showSelectAllToggle = _showSelectAllToggle;
-        this.pageSize = pageSize;
-    }
-
-    get selectionMethod(): SelectionMethod {
-        return this.selectionType === "None" ? "none" : this._selectionMethod;
-    }
-
-    get showCheckboxColumn(): boolean {
-        return this.selectionMethod === "checkbox";
-    }
-
-    get showSelectAllToggle(): boolean {
-        return this._showSelectAllToggle && this.selectionType === "Multi";
-    }
-
-    get selectionMode(): SelectionMode {
-        return this.selectionMethod === "checkbox" ? "toggle" : this._selectionMode;
-    }
-}
-
-export function useSelectActionHelper(
-    props: Pick<
-        DatagridContainerProps | DatagridPreviewProps,
-        "itemSelection" | "itemSelectionMethod" | "showSelectAllToggle" | "pageSize" | "itemSelectionMode"
-    >,
-    selectionHelper?: SelectionHelperService
-): SelectActionHelper {
-    return useMemo(
-        () =>
-            new SelectActionHelper(
-                props.itemSelection,
-                selectionHelper,
-                props.itemSelectionMethod,
-                props.showSelectAllToggle,
-                props.pageSize ?? 5,
-                props.itemSelectionMode
-            ),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [selectionHelper]
-    );
-}
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
deleted file mode 100644
index aa7e4c5664..0000000000
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
-import { SelectionHelperService } from "@mendix/widget-plugin-grid/main";
-import { createContext, useContext } from "react";
-import { EventsController } from "../typings/CellComponent";
-import { SelectActionHelper } from "./SelectActionHelper";
-
-export interface LegacyRootScope {
-    selectionHelper: SelectionHelperService | undefined;
-    selectActionHelper: SelectActionHelper;
-    cellEventsController: EventsController;
-    checkboxEventsController: EventsController;
-    focusController: FocusTargetController;
-}
-
-export const LegacyContext = createContext<LegacyRootScope | null>(null);
-
-export const useLegacyContext = (): LegacyRootScope => {
-    const contextValue = useContext(LegacyContext);
-    if (!contextValue) {
-        throw new Error("useDatagridRootScope must be used within a root context provider");
-    }
-    return contextValue;
-};
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts
index dbd3e2520f..78f70a245e 100644
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts
@@ -1,12 +1,12 @@
 import { useOnClearSelectionEvent, useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
-import { useDatagridConfig } from "../model/hooks/injection-hooks";
-import { SelectActionHelper } from "./SelectActionHelper";
+import { useDatagridConfig, useSelectActions } from "../model/hooks/injection-hooks";
 
-export function useDataGridJSActions(selectActionHelper?: SelectActionHelper): void {
+export function useDataGridJSActions(): void {
     const info = useDatagridConfig();
+    const selectActions = useSelectActions();
     useOnResetFiltersEvent(info.name, info.filtersChannelName);
     useOnClearSelectionEvent({
         widgetName: info.name,
-        listener: () => selectActionHelper?.onClearSelection()
+        listener: () => selectActions.clearSelection()
     });
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
index c007e8e599..1ce8da4b69 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/configs/Datagrid.config.ts
@@ -1,10 +1,7 @@
+import { SelectionMode, SelectionType } from "@mendix/widget-plugin-grid/selection";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import {
-    DatagridContainerProps,
-    ItemSelectionMethodEnum,
-    LoadingTypeEnum,
-    PagingPositionEnum
-} from "../../../typings/DatagridProps";
+import { DatagridContainerProps, LoadingTypeEnum, PagingPositionEnum } from "../../../typings/DatagridProps";
+import { type SelectionMethod } from "../../features/row-interaction/base";
 
 /** Config for static values that don't change at runtime. */
 export interface DatagridConfig {
@@ -15,7 +12,9 @@ export interface DatagridConfig {
     refreshIntervalMs: number;
     selectAllCheckboxEnabled: boolean;
     selectionEnabled: boolean;
-    selectionMethod: ItemSelectionMethodEnum;
+    selectionType: SelectionType;
+    selectionMethod: SelectionMethod;
+    selectionMode: SelectionMode;
     selectorColumnEnabled: boolean;
     settingsStorageEnabled: boolean;
     enableSelectAll: boolean;
@@ -42,7 +41,9 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         refreshIntervalMs: props.refreshInterval * 1000,
         selectAllCheckboxEnabled: props.showSelectAllToggle,
         selectionEnabled: isSelectionEnabled(props),
-        selectionMethod: props.itemSelectionMethod,
+        selectionType: selectionType(props),
+        selectionMethod: selectionMethod(props),
+        selectionMode: props.itemSelectionMode,
         selectorColumnEnabled: props.columnsHidable,
         settingsStorageEnabled: isSettingsStorageEnabled(props),
         enableSelectAll: props.enableSelectAll,
@@ -84,3 +85,11 @@ function isSettingsStorageEnabled(props: DatagridContainerProps): boolean {
 function isInteractive(props: DatagridContainerProps): boolean {
     return props.itemSelection !== undefined || props.onClick !== undefined;
 }
+
+function selectionType(props: DatagridContainerProps): SelectionType {
+    return props.itemSelection ? props.itemSelection.type : "None";
+}
+
+function selectionMethod(props: DatagridContainerProps): SelectionMethod {
+    return props.itemSelection ? props.itemSelectionMethod : "none";
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
index 5ebbe195d9..fd99730e77 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts
@@ -2,7 +2,15 @@ import { WidgetFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
 import { emptyStateWidgetsAtom } from "@mendix/widget-plugin-grid/core/models/empty-state.model";
-import { createSelectionHelper, DatasourceService, TaskProgressService } from "@mendix/widget-plugin-grid/main";
+import {
+    createClickActionHelper,
+    createFocusController,
+    createSelectionHelper,
+    DatasourceService,
+    layoutAtom,
+    SelectActionsProvider,
+    TaskProgressService
+} from "@mendix/widget-plugin-grid/main";
 import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
@@ -10,6 +18,8 @@ import { Container, injected } from "brandi";
 import { MainGateProps } from "../../../typings/MainGateProps";
 import { WidgetRootViewModel } from "../../features/base/WidgetRoot.viewModel";
 import { EmptyPlaceholderViewModel } from "../../features/empty-message/EmptyPlaceholder.viewModel";
+import { createCellEventsController } from "../../features/row-interaction/CellEventsController";
+import { creteCheckboxEventsController } from "../../features/row-interaction/CheckboxEventsController";
 import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
@@ -23,32 +33,56 @@ import { PaginationController } from "../services/PaginationController";
 import { SelectionGate } from "../services/SelectionGate.service";
 import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../tokens";
 
+// base
 injected(ColumnGroupStore, CORE.setupService, CORE.mainGate, CORE.config, DG.filterHost);
-injected(CombinedFilter, CORE.setupService, DG.combinedFilterConfig);
 injected(DatasourceParamsController, CORE.setupService, DG.query, DG.combinedFilter, CORE.columnsStore);
 injected(DatasourceService, CORE.setupService, DG.queryGate, DG.refreshInterval.optional);
+injected(PaginationController, CORE.setupService, DG.paginationConfig, DG.query);
+injected(GridBasicData, CORE.mainGate);
+injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.selectionDialogVM);
+
+// loader
 injected(DerivedLoaderController, DG.query, DG.exportProgressService, CORE.columnsStore, DG.loaderConfig);
 
-injected(GridBasicData, CORE.mainGate);
-injected(GridPersonalizationStore, CORE.setupService, CORE.mainGate, CORE.columnsStore, DG.filterHost);
-injected(PaginationController, CORE.setupService, DG.paginationConfig, DG.query);
+// filtering
+injected(CombinedFilter, CORE.setupService, DG.combinedFilterConfig);
 injected(WidgetFilterAPI, DG.parentChannelName, DG.filterHost);
+
+// empty state
 injected(emptyStateWidgetsAtom, CORE.mainGate, CORE.atoms.itemCount);
+injected(EmptyPlaceholderViewModel, DG.emptyPlaceholderWidgets, CORE.atoms.visibleColumnsCount, CORE.config);
+
+// personalization
+injected(GridPersonalizationStore, CORE.setupService, CORE.mainGate, CORE.columnsStore, DG.filterHost);
+
+// selection
 injected(SelectionGate, CORE.mainGate);
 injected(createSelectionHelper, CORE.setupService, DG.selectionGate, CORE.config.optional);
 injected(gridStyleAtom, CORE.columnsStore, CORE.config);
 injected(rowClassProvider, CORE.mainGate);
 
-// View models
+// row-interaction
+injected(SelectActionsProvider, DG.selectionType, DG.selectionHelper);
+injected(createFocusController, CORE.setupService, DG.virtualLayout);
+injected(creteCheckboxEventsController, CORE.config, DG.selectActions, DG.focusService, CORE.atoms.pageSize);
+injected(layoutAtom, CORE.atoms.itemCount, CORE.atoms.columnCount, CORE.atoms.pageSize);
+injected(createClickActionHelper, CORE.setupService, CORE.mainGate);
+injected(
+    createCellEventsController,
+    CORE.config,
+    DG.selectActions,
+    DG.focusService,
+    DG.clickActionHelper,
+    CORE.atoms.pageSize
+);
 
+// selection counter
 injected(
     SelectionCounterViewModel,
     CORE.selection.selectedCount,
     CORE.selection.selectedCounterTextsStore,
     DG.selectionCounterCfg.optional
 );
-injected(WidgetRootViewModel, CORE.mainGate, CORE.config, DG.exportProgressService, SA_TOKENS.progressService);
-injected(EmptyPlaceholderViewModel, DG.emptyPlaceholderWidgets, CORE.atoms.visibleColumnsCount, CORE.config);
 
 export class DatagridContainer extends Container {
     id = `DatagridContainer@${generateUUID()}`;
@@ -92,6 +126,18 @@ export class DatagridContainer extends Container {
         this.bind(DG.rowClass).toInstance(rowClassProvider).inTransientScope();
         // Widget root view model
         this.bind(DG.datagridRootVM).toInstance(WidgetRootViewModel).inTransientScope();
+        // Select actions provider
+        this.bind(DG.selectActions).toInstance(SelectActionsProvider).inSingletonScope();
+        // Virtual layout
+        this.bind(DG.virtualLayout).toInstance(layoutAtom).inTransientScope();
+        // Focus service
+        this.bind(DG.focusService).toInstance(createFocusController).inSingletonScope();
+        // Checkbox events service
+        this.bind(DG.checkboxEventsHandler).toInstance(creteCheckboxEventsController).inSingletonScope();
+        // Cell events service
+        this.bind(DG.cellEventsHandler).toInstance(createCellEventsController).inSingletonScope();
+        // Click action helper
+        this.bind(DG.clickActionHelper).toInstance(createClickActionHelper).inSingletonScope();
     }
 
     /**
@@ -149,9 +195,15 @@ export class DatagridContainer extends Container {
             pageSize: props.pageSize
         });
 
+        // Bind init page size
+        this.bind(CORE.initPageSize).toConstant(props.pageSize);
+
         // Bind selection counter position
         this.bind(DG.selectionCounterCfg).toConstant({ position: props.selectionCounterPosition });
 
+        // Bind selection type
+        this.bind(DG.selectionType).toConstant(config.selectionType);
+
         this.postInit(props, config);
 
         return this;
@@ -172,7 +224,7 @@ export class DatagridContainer extends Container {
             this.get(DG.selectionHelper);
         } else {
             // Override selection helper with undefined to disable selection features
-            this.bind(DG.selectionHelper).toConstant(undefined);
+            this.bind(DG.selectionHelper).toConstant(null);
         }
 
         // Hydrate filters from props
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
index e414d97abb..30ee19b4b9 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
@@ -14,10 +14,12 @@ import {
 } from "@mendix/widget-plugin-grid/core/models/selection.model";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { Container, injected } from "brandi";
-import { visibleColumnsCountAtom } from "../models/columns.model";
+import { columnCount, visibleColumnsCountAtom } from "../models/columns.model";
+import { pageSizeAtom } from "../models/paging.model";
 import { rowsAtom } from "../models/rows.model";
 import { DatagridSetupService } from "../services/DatagridSetup.service";
 import { TextsService } from "../services/Texts.service";
+import { PageSizeStore } from "../stores/PageSize.store";
 import { CORE_TOKENS as CORE } from "../tokens";
 
 // datasource
@@ -29,6 +31,8 @@ injected(hasMoreItemsAtom, CORE.mainGate);
 injected(visibleColumnsCountAtom, CORE.columnsStore);
 injected(isAllItemsPresentAtom, CORE.atoms.offset, CORE.atoms.hasMoreItems);
 injected(rowsAtom, CORE.mainGate);
+injected(pageSizeAtom, CORE.pageSizeStore);
+injected(columnCount, CORE.atoms.visibleColumnsCount, CORE.config);
 
 // selection
 injected(
@@ -41,6 +45,7 @@ injected(
 injected(isCurrentPageSelectedAtom, CORE.mainGate);
 injected(selectedCountMultiAtom, CORE.mainGate);
 injected(selectionCounterTextsStore, CORE.mainGate, CORE.selection.selectedCount);
+injected(PageSizeStore, CORE.initPageSize.optional);
 
 // other
 injected(TextsService, CORE.mainGate);
@@ -64,15 +69,22 @@ export class RootContainer extends Container {
         this.bind(CORE.atoms.limit).toInstance(limitAtom).inTransientScope();
         this.bind(CORE.atoms.offset).toInstance(offsetAtom).inTransientScope();
         this.bind(CORE.atoms.totalCount).toInstance(totalCountAtom).inTransientScope();
-        this.bind(CORE.atoms.visibleColumnsCount).toInstance(visibleColumnsCountAtom).inTransientScope();
         this.bind(CORE.atoms.isAllItemsPresent).toInstance(isAllItemsPresentAtom).inTransientScope();
         this.bind(CORE.rows).toInstance(rowsAtom).inTransientScope();
 
+        // columns
+        this.bind(CORE.atoms.visibleColumnsCount).toInstance(visibleColumnsCountAtom).inTransientScope();
+        this.bind(CORE.atoms.columnCount).toInstance(columnCount).inTransientScope();
+
         // selection
         this.bind(CORE.selection.selectedCount).toInstance(selectedCountMultiAtom).inTransientScope();
         this.bind(CORE.selection.isCurrentPageSelected).toInstance(isCurrentPageSelectedAtom).inTransientScope();
         this.bind(CORE.selection.selectedCounterTextsStore).toInstance(selectionCounterTextsStore).inTransientScope();
         this.bind(CORE.selection.isAllItemsSelected).toInstance(isAllItemsSelectedAtom).inTransientScope();
         this.bind(CORE.texts).toInstance(TextsService).inTransientScope();
+
+        // paging
+        this.bind(CORE.atoms.pageSize).toInstance(pageSizeAtom).inTransientScope();
+        this.bind(CORE.pageSizeStore).toInstance(PageSizeStore).inSingletonScope();
     }
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index 20af5a7174..337a03637f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -19,3 +19,8 @@ export const [useTexts] = createInjectionHooks(CORE.texts);
 export const [useRowClass] = createInjectionHooks(DG.rowClass);
 export const [useDatagridRootVM] = createInjectionHooks(DG.datagridRootVM);
 export const [useRows] = createInjectionHooks(CORE.rows);
+export const [useSelectActions] = createInjectionHooks(DG.selectActions);
+export const [useClickActionHelper] = createInjectionHooks(DG.clickActionHelper);
+export const [useFocusService] = createInjectionHooks(DG.focusService);
+export const [useCheckboxEventsHandler] = createInjectionHooks(DG.checkboxEventsHandler);
+export const [useCellEventsHandler] = createInjectionHooks(DG.cellEventsHandler);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts
index f3ba7dd46b..cf9a56b5d6 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/columns.model.ts
@@ -5,3 +5,15 @@ import { computed } from "mobx";
 export function visibleColumnsCountAtom(source: { visibleColumns: { length: number } }): ComputedAtom<number> {
     return computed(() => source.visibleColumns.length);
 }
+
+/** @injectable */
+export function columnCount(
+    visibleColumns: ComputedAtom<number>,
+    config: { checkboxColumnEnabled: boolean }
+): ComputedAtom<number> {
+    return computed(() => {
+        const count = visibleColumns.get();
+
+        return config.checkboxColumnEnabled ? count + 1 : count;
+    });
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/models/paging.model.ts b/packages/pluggableWidgets/datagrid-web/src/model/models/paging.model.ts
new file mode 100644
index 0000000000..b3c003f2d1
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/models/paging.model.ts
@@ -0,0 +1,6 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+
+export function pageSizeAtom(source: { pageSize: number }): ComputedAtom<number> {
+    return computed(() => source.pageSize);
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts b/packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts
index 4e0674d73b..9db5719f93 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/services/SelectionGate.service.ts
@@ -9,9 +9,6 @@ export class SelectionGate extends MappedGate<MainGateProps, SelectionDynamicPro
 }
 
 function map(props: MainGateProps): SelectionDynamicProps {
-    if (!props.itemSelection) {
-        throw new Error("'itemSelection' prop is required for SelectionGate");
-    }
     return {
         selection: props.itemSelection,
         datasource: props.datasource,
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/stores/PageSize.store.ts b/packages/pluggableWidgets/datagrid-web/src/model/stores/PageSize.store.ts
new file mode 100644
index 0000000000..763d63d0cb
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/model/stores/PageSize.store.ts
@@ -0,0 +1,14 @@
+import { action, makeAutoObservable } from "mobx";
+
+export class PageSizeStore {
+    pageSize: number;
+
+    constructor(initSize = 0) {
+        this.pageSize = initSize;
+        makeAutoObservable(this, { setPageSize: action.bound });
+    }
+
+    setPageSize(size: number): void {
+        this.pageSize = size;
+    }
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index 7bdf430a33..26b3e38201 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -1,8 +1,12 @@
 import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { CombinedFilter, CombinedFilterConfig } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
+import { ClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
+import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
+import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout";
 import {
     QueryService,
+    SelectActionsService,
     SelectAllService,
     SelectionDynamicProps,
     SelectionHelperService,
@@ -22,6 +26,8 @@ import { CSSProperties, ReactNode } from "react";
 import { MainGateProps } from "../../typings/MainGateProps";
 import { WidgetRootViewModel } from "../features/base/WidgetRoot.viewModel";
 import { EmptyPlaceholderViewModel } from "../features/empty-message/EmptyPlaceholder.viewModel";
+import { CellEventsController } from "../features/row-interaction/CellEventsController";
+import { CheckboxEventsController } from "../features/row-interaction/CheckboxEventsController";
 import { SelectAllBarViewModel } from "../features/select-all/SelectAllBar.viewModel";
 import { SelectionProgressDialogViewModel } from "../features/select-all/SelectionProgressDialog.viewModel";
 import { ColumnGroupStore } from "../helpers/state/ColumnGroupStore";
@@ -35,6 +41,7 @@ import { DatagridSetupService } from "./services/DatagridSetup.service";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./services/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./services/PaginationController";
 import { TextsService } from "./services/Texts.service";
+import { PageSizeStore } from "./stores/PageSize.store";
 
 /** Tokens to resolve dependencies from the container. */
 
@@ -47,9 +54,13 @@ export const CORE_TOKENS = {
         offset: token<ComputedAtom<number>>("@computed:offset"),
         totalCount: token<ComputedAtom<number>>("@computed:totalCount"),
         visibleColumnsCount: token<ComputedAtom<number>>("@computed:visibleColumnsCount"),
-        isAllItemsPresent: token<ComputedAtom<boolean>>("@computed:isAllItemsPresent")
+        isAllItemsPresent: token<ComputedAtom<boolean>>("@computed:isAllItemsPresent"),
+        pageSize: token<ComputedAtom<number>>("@computed:pageSize"),
+        columnCount: token<ComputedAtom<number>>("@computed:columnCount")
     },
     columnsStore: token<ColumnGroupStore>("ColumnGroupStore"),
+    initPageSize: token<number>("@const:initialPageSize"),
+    pageSizeStore: token<PageSizeStore>("@store:PageSizeStore"),
     column: token<GridColumn>("@store:GridColumn"),
     rows: token<ComputedAtom<ObjectItem[]>>("@computed:rowsArray"),
 
@@ -106,13 +117,21 @@ export const DG_TOKENS = {
     selectionCounterVM: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
 
     selectionGate: token<DerivedPropsGate<SelectionDynamicProps>>("@gate:GateForSelectionHelper"),
-    selectionHelper: token<SelectionHelperService | undefined>("SelectionHelperService"),
+    selectionHelper: token<SelectionHelperService>("@service:SelectionHelperService"),
+    selectActions: token<SelectActionsService>("@service:SelectActionsService"),
+    selectionType: token<"Single" | "Multi" | "None">("@const:selectionType"),
 
     gridColumnsStyle: token<ComputedAtom<CSSProperties>>("@computed:GridColumnsStyle"),
 
     rowClass: token<RowClassProvider>("@store:RowClassProvider"),
 
-    datagridRootVM: token<WidgetRootViewModel>("WidgetRootViewModel")
+    datagridRootVM: token<WidgetRootViewModel>("WidgetRootViewModel"),
+
+    virtualLayout: token<ComputedAtom<VirtualGridLayout>>("@computed:virtualLayout"),
+    clickActionHelper: token<ClickActionHelper>("@service:ClickActionHelper"),
+    focusService: token<FocusTargetController>("@service:FocusTargetController"),
+    checkboxEventsHandler: token<CheckboxEventsController>("@service:CheckboxEventsController"),
+    cellEventsHandler: token<CellEventsController>("@service:CellEventsController")
 };
 
 /** "Select all" module tokens. */
diff --git a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
index 58af33124c..d4e05edc9c 100644
--- a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx
@@ -1,8 +1,8 @@
 import { dynamic, list, listAttr, listExp } from "@mendix/widget-plugin-test-utils";
 import { ColumnsType, DatagridContainerProps } from "../../typings/DatagridProps";
-import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { ColumnStore } from "../helpers/state/column/ColumnStore";
 import { IColumnParentStore } from "../helpers/state/ColumnGroupStore";
+import { SelectActionHelper } from "../model/services/GridSelectActionsProvider.service";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
 
 export const column = (header = "Test", patch?: (col: ColumnsType) => void): ColumnsType => {
diff --git a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
index db7d7a8dc1..5e93b89aea 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/MainGateProps.ts
@@ -15,8 +15,13 @@ export type MainGateProps = Pick<
     | "emptyPlaceholder"
     | "enableSelectAll"
     | "exportDialogLabel"
+    | "filterSectionTitle"
+    | "filtersPlaceholder"
     | "itemSelection"
+    | "loadMoreButtonCaption"
     | "name"
+    | "onClick"
+    | "onClickTrigger"
     | "onSelectionChange"
     | "pageSize"
     | "pagination"
@@ -32,7 +37,4 @@ export type MainGateProps = Pick<
     | "showPagingButtons"
     | "storeFiltersInPersonalization"
     | "style"
-    | "filtersPlaceholder"
-    | "filterSectionTitle"
-    | "loadMoreButtonCaption"
 >;
diff --git a/packages/shared/widget-plugin-grid/src/helpers/createClickActionHelper.ts b/packages/shared/widget-plugin-grid/src/helpers/createClickActionHelper.ts
new file mode 100644
index 0000000000..8767f2b2af
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/helpers/createClickActionHelper.ts
@@ -0,0 +1,21 @@
+import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { ListActionValue } from "mendix";
+import { autorun } from "mobx";
+import { ClickActionHelper, ClickTrigger } from "./ClickActionHelper";
+
+export function createClickActionHelper(
+    host: SetupComponentHost,
+    gate: DerivedPropsGate<{ onClickTrigger: ClickTrigger; onClick?: ListActionValue }>
+): ClickActionHelper {
+    const helper = new ClickActionHelper(gate.props.onClickTrigger, gate.props.onClick);
+
+    function setup(): () => void {
+        return autorun(() => {
+            helper.update(gate.props.onClick);
+        });
+    }
+
+    host.add({ setup });
+
+    return helper;
+}
diff --git a/packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts b/packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts
index b94fc7a40a..d13bb8341d 100644
--- a/packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts
+++ b/packages/shared/widget-plugin-grid/src/interfaces/SelectionDynamicProps.ts
@@ -1,7 +1,7 @@
 import { ActionValue, ListValue, SelectionMultiValue, SelectionSingleValue } from "mendix";
 
 export interface SelectionDynamicProps {
-    selection: SelectionSingleValue | SelectionMultiValue;
+    selection?: SelectionSingleValue | SelectionMultiValue;
     datasource: ListValue;
     onSelectionChange: ActionValue | undefined;
 }
diff --git a/packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts b/packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts
index 45977b2368..deda64c275 100644
--- a/packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts
+++ b/packages/shared/widget-plugin-grid/src/interfaces/SelectionHelperService.ts
@@ -1,4 +1,4 @@
 import { MultiSelectionService } from "./MultiSelectionService";
 import { SingleSelectionService } from "./SingleSelectionService";
 
-export type SelectionHelperService = MultiSelectionService | SingleSelectionService;
+export type SelectionHelperService = MultiSelectionService | SingleSelectionService | null;
diff --git a/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts b/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts
new file mode 100644
index 0000000000..be46545700
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts
@@ -0,0 +1,24 @@
+import { ComputedAtom, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { reaction } from "mobx";
+import { FocusTargetController } from "./FocusTargetController";
+import { PositionController } from "./PositionController";
+import { VirtualGridLayout } from "./VirtualGridLayout";
+
+/** @injectable */
+export function createFocusController(
+    host: SetupComponentHost,
+    layout: ComputedAtom<VirtualGridLayout>
+): FocusTargetController {
+    const controller = new FocusTargetController(new PositionController(), layout.get());
+
+    function setup(): void | (() => void) {
+        return reaction(
+            () => layout.get(),
+            newLayout => controller.updateGridLayout(newLayout)
+        );
+    }
+
+    host.add({ setup });
+
+    return controller;
+}
diff --git a/packages/shared/widget-plugin-grid/src/keyboard-navigation/layout.model.ts b/packages/shared/widget-plugin-grid/src/keyboard-navigation/layout.model.ts
new file mode 100644
index 0000000000..293f820d19
--- /dev/null
+++ b/packages/shared/widget-plugin-grid/src/keyboard-navigation/layout.model.ts
@@ -0,0 +1,12 @@
+import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
+import { computed } from "mobx";
+import { VirtualGridLayout } from "./VirtualGridLayout";
+
+/** @injectable */
+export function layoutAtom(
+    rows: ComputedAtom<number>,
+    columns: ComputedAtom<number>,
+    pageSize: ComputedAtom<number>
+): ComputedAtom<VirtualGridLayout> {
+    return computed(() => new VirtualGridLayout(rows.get(), columns.get(), pageSize.get()));
+}
diff --git a/packages/shared/widget-plugin-grid/src/main.ts b/packages/shared/widget-plugin-grid/src/main.ts
index a8b12f7e3f..7bb034257b 100644
--- a/packages/shared/widget-plugin-grid/src/main.ts
+++ b/packages/shared/widget-plugin-grid/src/main.ts
@@ -1,10 +1,13 @@
 export { DatasourceService } from "./core/Datasource.service";
 export { ProgressService } from "./core/Progress.service";
+export { createClickActionHelper } from "./helpers/createClickActionHelper";
 export type { QueryService } from "./interfaces/QueryService";
 export type { SelectActionsService } from "./interfaces/SelectActionsService";
 export type { SelectionDynamicProps } from "./interfaces/SelectionDynamicProps";
 export { type SelectionHelperService } from "./interfaces/SelectionHelperService";
 export type { TaskProgressService } from "./interfaces/TaskProgressService";
+export { createFocusController } from "./keyboard-navigation/createFocusController";
+export { layoutAtom } from "./keyboard-navigation/layout.model";
 export { SelectAllService } from "./select-all/SelectAll.service";
 export { SelectionCounterViewModel } from "./selection-counter/SelectionCounter.viewModel";
 export * from "./selection/context";
diff --git a/packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts b/packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts
index ab67db4f0e..5a42974096 100644
--- a/packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/SelectActionsProvider.service.ts
@@ -6,7 +6,7 @@ import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType } from "./types"
 export class SelectActionsProvider implements SelectActionsService {
     constructor(
         private type: SelectionType,
-        private selectionHelper?: SelectionHelperService
+        private selectionHelper: SelectionHelperService
     ) {
         if (type === "Multi") {
             if (!selectionHelper || selectionHelper.type !== "Multi") {
@@ -94,7 +94,7 @@ export class SelectActionsProvider implements SelectActionsService {
     };
 
     private selectItem = (item: ObjectItem, toggleMode: boolean): void => {
-        if (this.selectionHelper === undefined) {
+        if (this.selectionHelper == null) {
             return;
         }
 
diff --git a/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts b/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
index ab5cf21051..3902487856 100644
--- a/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/createSelectionHelper.ts
@@ -13,19 +13,26 @@ export function createSelectionHelper(
 ): SelectionHelperService {
     const { selection, datasource } = gate.props;
 
-    let helper: SelectionHelperService;
+    let helper: SelectionHelperService | null = null;
+
+    if (!selection) {
+        return null;
+    }
+
     if (selection.type === "Multi") {
         helper = new MultiSelectionHelper(selection, datasource.items ?? []);
-    } else {
+    } else if (selection.type === "Single") {
         helper = new SingleSelectionHelper(selection);
     }
     if (config.keepSelection) {
-        selection.setKeepSelection(() => true);
+        selection?.setKeepSelection(() => true);
     }
 
-    function setup(): () => void {
+    function setup(): (() => void) | void {
         const [add, disposeAll] = disposeBatch();
 
+        if (!helper) return;
+
         add(
             autorun(() => {
                 const { selection, datasource } = gate.props;
@@ -41,7 +48,7 @@ export function createSelectionHelper(
         if (gate.props.onSelectionChange) {
             const cleanup = reaction(
                 (): ObjectItem[] => {
-                    const selected = gate.props.selection.selection;
+                    const selected = gate.props.selection!.selection;
                     if (Array.isArray(selected)) return selected;
                     if (selected !== undefined) return [selected];
                     return [];
diff --git a/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts b/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
index 4cd1c3a28c..c5bcccad46 100644
--- a/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/select-action-handler.ts
@@ -6,7 +6,7 @@ import { SelectAdjacentFx, SelectAllFx, SelectFx, SelectionType, WidgetSelection
 export class SelectActionHandler {
     constructor(
         private selection: WidgetSelectionProperty,
-        protected selectionHelper: SelectionHelperService | undefined
+        protected selectionHelper: SelectionHelperService
     ) {}
 
     get selectionType(): SelectionType {
@@ -93,7 +93,7 @@ export class SelectActionHandler {
     };
 
     private selectItem = (item: ObjectItem, toggleMode: boolean): void => {
-        if (this.selectionHelper === undefined) {
+        if (this.selectionHelper == null) {
             return;
         }
 

From 0122c68c839e6c08ae83f748b654e9d2c2544ec6 Mon Sep 17 00:00:00 2001
From: Illia Obukhau <8282906+iobuhov@users.noreply.github.com>
Date: Fri, 21 Nov 2025 14:06:51 +0100
Subject: [PATCH 21/21] fix: add observer

---
 .../pluggableWidgets/datagrid-web/src/components/GridBody.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
index 807d830907..00d054f82d 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
@@ -12,7 +12,7 @@ import {
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
 import { SpinnerLoader } from "./loader/SpinnerLoader";
 
-export function GridBody(props: PropsWithChildren): ReactElement {
+export const GridBody = observer(function GridBody(props: PropsWithChildren): ReactElement {
     const { children } = props;
     const { bodySize, containerRef, isInfinite, handleScroll } = useBodyScroll();
 
@@ -27,7 +27,7 @@ export function GridBody(props: PropsWithChildren): ReactElement {
             <ContentGuard>{children}</ContentGuard>
         </div>
     );
-}
+});
 
 const ContentGuard = observer(function ContentGuard(props: PropsWithChildren): ReactNode {
     const loaderVM = useLoaderViewModel();