From 1189fce634c61b7876279c116594a52f072042d7 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Mon, 15 Sep 2025 15:24:15 +0200
Subject: [PATCH 1/4] feat: add clear selection button label config

---
 .../datagrid-web/src/Datagrid.tsx             |  1 +
 .../datagrid-web/src/Datagrid.xml             |  7 ++++++
 .../datagrid-web/src/components/Widget.tsx    |  3 +++
 .../src/components/WidgetFooter.tsx           | 23 +++++++++++++++----
 .../datagrid-web/typings/DatagridProps.d.ts   |  2 ++
 5 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 9ff9f6bb04..91b5cab318 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -117,6 +117,7 @@ const Container = observer((props: Props): ReactElement => {
                 pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
+                clearSelectionButtonLabel={props.clearSelectionButtonLabel?.value}
                 paging={paginationCtrl.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
index c19285b1cd..b5c2c08ef3 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
@@ -65,6 +65,13 @@
                     <caption>Show refresh indicator</caption>
                     <description>Show a refresh indicator when the data is being loaded.</description>
                 </property>
+                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
+                    <caption>Clear selection</caption>
+                    <description>Customize the label of the 'Clear section' button</description>
+                    <translations>
+                        <translation lang="en_US">Clear selection</translation>
+                    </translations>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Columns">
                 <property key="columns" type="object" isList="true">
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index dfb7831e90..ff5da82285 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -48,6 +48,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     page: number;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
+    clearSelectionButtonLabel?: string;
     pageSize: number;
     paging: boolean;
     pagingPosition: PagingPositionEnum;
@@ -118,6 +119,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerContent,
         headerTitle,
         loadMoreButtonCaption,
+        clearSelectionButtonLabel,
         numberOfItems,
         page,
         pageSize,
@@ -235,6 +237,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 pagingPosition={pagingPosition}
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
+                clearSelectionButtonLabel={clearSelectionButtonLabel}
                 hasMoreItems={hasMoreItems}
                 setPage={setPage}
             />
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
index ebd732a3f0..1e209970ba 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -9,17 +9,28 @@ type WidgetFooterProps = {
     pagination: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
+    clearSelectionButtonLabel?: string;
     hasMoreItems: boolean;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const { pagingPosition, pagination, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
+    const {
+        pagingPosition,
+        pagination,
+        paginationType,
+        loadMoreButtonCaption,
+        clearSelectionButtonLabel,
+        hasMoreItems,
+        setPage,
+        ...rest
+    } = props;
+
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
                 <div className="widget-datagrid-pb-start">
-                    <SelectionCounter />
+                    <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
                 </div>
                 {hasMoreItems && paginationType === "loadMore" && (
                     <div className="widget-datagrid-pb-middle">
@@ -40,14 +51,18 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
     );
 }
 
-const SelectionCounter = observer(function SelectionCounter() {
+const SelectionCounter = observer(function SelectionCounter({
+    clearSelectionButtonLabel
+}: {
+    clearSelectionButtonLabel?: string;
+}) {
     const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
 
     return (
         <If condition={selectionCountStore.displayCount !== ""}>
             <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
             <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
-                Clear selection
+                {clearSelectionButtonLabel || "Clear selection"}
             </button>
         </If>
     );
diff --git a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
index a3e01d2e2d..a4c7983372 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
@@ -98,6 +98,7 @@ export interface DatagridContainerProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
+    clearSelectionButtonLabel?: DynamicValue<string>;
     columns: ColumnsType[];
     columnsFilterable: boolean;
     pageSize: number;
@@ -150,6 +151,7 @@ export interface DatagridPreviewProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
+    clearSelectionButtonLabel: string;
     columns: ColumnsPreviewType[];
     columnsFilterable: boolean;
     pageSize: number | null;

From 72d65cff72c5ad4240b25982f51d49d6ade5b533 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Mon, 15 Sep 2025 17:06:25 +0200
Subject: [PATCH 2/4] feat: add selection count visibility to config

---
 .../datagrid-web/src/Datagrid.tsx             |  1 +
 .../datagrid-web/src/Datagrid.xml             | 23 ++++++++++-----
 .../src/components/SelectionCounter.tsx       | 21 ++++++++++++++
 .../datagrid-web/src/components/Widget.tsx    | 15 ++++++++--
 .../src/components/WidgetFooter.tsx           | 29 +++++--------------
 .../src/components/WidgetTopBar.tsx           | 16 +++++++++-
 .../datagrid-web/typings/DatagridProps.d.ts   |  8 +++--
 7 files changed, 79 insertions(+), 34 deletions(-)
 create mode 100644 packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 91b5cab318..5dc255fa69 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -118,6 +118,7 @@ const Container = observer((props: Props): ReactElement => {
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
                 clearSelectionButtonLabel={props.clearSelectionButtonLabel?.value}
+                selectionCountVisibility={props.selectionCountVisibility}
                 paging={paginationCtrl.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
index b5c2c08ef3..e5df826c81 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
@@ -65,13 +65,6 @@
                     <caption>Show refresh indicator</caption>
                     <description>Show a refresh indicator when the data is being loaded.</description>
                 </property>
-                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
-                    <caption>Clear selection</caption>
-                    <description>Customize the label of the 'Clear section' button</description>
-                    <translations>
-                        <translation lang="en_US">Clear selection</translation>
-                    </translations>
-                </property>
             </propertyGroup>
             <propertyGroup caption="Columns">
                 <property key="columns" type="object" isList="true">
@@ -251,6 +244,22 @@
                         <enumerationValue key="both">Both</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="selectionCountVisibility" type="enumeration" defaultValue="bottom" required="true">
+                    <caption>Show selection count</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="top">Top</enumerationValue>
+                        <enumerationValue key="bottom">Bottom</enumerationValue>
+                        <enumerationValue key="off">Off</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
+                    <caption>Clear selection label</caption>
+                    <description>Customize the label of the 'Clear section' button</description>
+                    <translations>
+                        <translation lang="en_US">Clear selection</translation>
+                    </translations>
+                </property>
                 <property key="loadMoreButtonCaption" type="textTemplate" required="false">
                     <caption>Load more caption</caption>
                     <description />
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx
new file mode 100644
index 0000000000..1c884a172f
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx
@@ -0,0 +1,21 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
+import { observer } from "mobx-react-lite";
+import { createElement } from "react";
+import { useDatagridRootScope } from "../helpers/root-context";
+
+export const SelectionCounter = observer(function SelectionCounter({
+    clearSelectionButtonLabel
+}: {
+    clearSelectionButtonLabel?: string;
+}) {
+    const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
+
+    return (
+        <If condition={selectionCountStore.displayCount !== ""}>
+            <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
+            <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
+                {clearSelectionButtonLabel || "Clear selection"}
+            </button>
+        </If>
+    );
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index ff5da82285..90a6dbfd38 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -9,7 +9,8 @@ import {
     LoadingTypeEnum,
     PaginationEnum,
     PagingPositionEnum,
-    ShowPagingButtonsEnum
+    ShowPagingButtonsEnum,
+    SelectionCountVisibilityEnum
 } from "../../typings/DatagridProps";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { useDatagridRootScope } from "../helpers/root-context";
@@ -49,6 +50,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
     clearSelectionButtonLabel?: string;
+    selectionCountVisibility?: SelectionCountVisibilityEnum;
     pageSize: number;
     paging: boolean;
     pagingPosition: PagingPositionEnum;
@@ -120,6 +122,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerTitle,
         loadMoreButtonCaption,
         clearSelectionButtonLabel,
+        selectionCountVisibility,
         numberOfItems,
         page,
         pageSize,
@@ -162,7 +165,14 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     return (
         <Fragment>
-            {showTopBar && <WidgetTopBar>{pagination}</WidgetTopBar>}
+            {showTopBar && (
+                <WidgetTopBar
+                    selectionCountVisibility={selectionCountVisibility}
+                    clearSelectionButtonLabel={clearSelectionButtonLabel}
+                >
+                    {pagination}
+                </WidgetTopBar>
+            )}
             {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
             <WidgetContent>
                 <Grid
@@ -238,6 +248,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
                 clearSelectionButtonLabel={clearSelectionButtonLabel}
+                selectionCountVisibility={selectionCountVisibility}
                 hasMoreItems={hasMoreItems}
                 setPage={setPage}
             />
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
index 1e209970ba..d387b9c395 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -1,8 +1,6 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import { observer } from "mobx-react-lite";
 import { createElement, ReactElement, ReactNode } from "react";
-import { PaginationEnum, PagingPositionEnum } from "../../typings/DatagridProps";
-import { useDatagridRootScope } from "../helpers/root-context";
+import { PaginationEnum, PagingPositionEnum, SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
+import { SelectionCounter } from "./SelectionCounter";
 
 type WidgetFooterProps = {
     pagingPosition: PagingPositionEnum;
@@ -10,6 +8,7 @@ type WidgetFooterProps = {
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
     clearSelectionButtonLabel?: string;
+    selectionCountVisibility?: SelectionCountVisibilityEnum;
     hasMoreItems: boolean;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
@@ -21,6 +20,7 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
         paginationType,
         loadMoreButtonCaption,
         clearSelectionButtonLabel,
+        selectionCountVisibility,
         hasMoreItems,
         setPage,
         ...rest
@@ -30,7 +30,9 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
                 <div className="widget-datagrid-pb-start">
-                    <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
+                    {selectionCountVisibility === "bottom" && (
+                        <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
+                    )}
                 </div>
                 {hasMoreItems && paginationType === "loadMore" && (
                     <div className="widget-datagrid-pb-middle">
@@ -50,20 +52,3 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
         </div>
     );
 }
-
-const SelectionCounter = observer(function SelectionCounter({
-    clearSelectionButtonLabel
-}: {
-    clearSelectionButtonLabel?: string;
-}) {
-    const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
-
-    return (
-        <If condition={selectionCountStore.displayCount !== ""}>
-            <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
-            <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
-                {clearSelectionButtonLabel || "Clear selection"}
-            </button>
-        </If>
-    );
-});
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
index 50eebeeb01..1a11f81987 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
@@ -1,8 +1,22 @@
 import { createElement, ReactElement } from "react";
+import { SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
+import { SelectionCounter } from "./SelectionCounter";
+
+type WidgetTopBarProps = {
+    selectionCountVisibility?: SelectionCountVisibilityEnum;
+    clearSelectionButtonLabel?: string;
+} & JSX.IntrinsicElements["div"];
+
+export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
+    const { selectionCountVisibility, clearSelectionButtonLabel } = props;
+
+    console.warn(selectionCountVisibility);
 
-export function WidgetTopBar(props: JSX.IntrinsicElements["div"]): ReactElement {
     return (
         <div {...props} className="widget-datagrid-top-bar table-header">
+            {selectionCountVisibility === "top" && (
+                <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
+            )}
             {props.children}
         </div>
     );
diff --git a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
index a4c7983372..d61b596773 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
@@ -53,6 +53,8 @@ export type ShowPagingButtonsEnum = "always" | "auto";
 
 export type PagingPositionEnum = "bottom" | "top" | "both";
 
+export type SelectionCountVisibilityEnum = "top" | "bottom" | "off";
+
 export type ShowEmptyPlaceholderEnum = "none" | "custom";
 
 export type OnClickTriggerEnum = "single" | "double";
@@ -98,7 +100,6 @@ export interface DatagridContainerProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
-    clearSelectionButtonLabel?: DynamicValue<string>;
     columns: ColumnsType[];
     columnsFilterable: boolean;
     pageSize: number;
@@ -106,6 +107,8 @@ export interface DatagridContainerProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
+    selectionCountVisibility: SelectionCountVisibilityEnum;
+    clearSelectionButtonLabel?: DynamicValue<string>;
     loadMoreButtonCaption?: DynamicValue<string>;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder?: ReactNode;
@@ -151,7 +154,6 @@ export interface DatagridPreviewProps {
     keepSelection: boolean;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
-    clearSelectionButtonLabel: string;
     columns: ColumnsPreviewType[];
     columnsFilterable: boolean;
     pageSize: number | null;
@@ -159,6 +161,8 @@ export interface DatagridPreviewProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
+    selectionCountVisibility: SelectionCountVisibilityEnum;
+    clearSelectionButtonLabel: string;
     loadMoreButtonCaption: string;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

From 149bb3896b07e87cb5d77ae4d0dfb5cc9c4bd82a Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Fri, 19 Sep 2025 15:53:13 +0200
Subject: [PATCH 3/4] fix: reference to updated scss variable

---
 packages/modules/data-widgets/CHANGELOG.md    |   4 +
 .../datawidgets/web/_datagrid.scss            |  49 +++++-
 .../datagrid-web/CHANGELOG.md                 |   4 +
 .../datagrid-web/src/components/Widget.tsx    |  26 +--
 .../src/components/WidgetFooter.tsx           |  26 +--
 .../src/components/WidgetTopBar.tsx           |  21 ++-
 .../__snapshots__/Table.spec.tsx.snap         | 160 ++++++++++++------
 7 files changed, 202 insertions(+), 88 deletions(-)

diff --git a/packages/modules/data-widgets/CHANGELOG.md b/packages/modules/data-widgets/CHANGELOG.md
index 08715434ba..4fab57747c 100644
--- a/packages/modules/data-widgets/CHANGELOG.md
+++ b/packages/modules/data-widgets/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We enhanced datagrid selection UI with responsive container queries and improved layout styling for header and footer components.
+
 ## [3.5.0] DataWidgets - 2025-09-16
 
 ### Changed
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
index e6ecaea017..84673f7b95 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
@@ -311,7 +311,7 @@ $root: ".widget-datagrid";
     justify-content: flex-end;
     white-space: nowrap;
     align-items: baseline;
-    margin: 16px;
+    margin: 0 16px;
     color: $pagination-caption-color;
 
     .paging-status {
@@ -397,6 +397,10 @@ $root: ".widget-datagrid";
         }
     }
 
+    &-top-bar {
+        container: widget-datagrid-header / inline-size;
+    }
+
     &-content {
         overflow-x: auto;
     }
@@ -409,6 +413,10 @@ $root: ".widget-datagrid";
         display: contents;
     }
 
+    &-footer {
+        container: widget-datagrid-footer / inline-size;
+    }
+
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
             background-color: $grid-selected-row-background;
@@ -517,7 +525,7 @@ $root: ".widget-datagrid";
 
 .widget-datagrid .widget-datagrid-load-more {
     display: block !important;
-    margin: 0 auto;
+    margin: 0;
 }
 
 .infinite-loading.widget-datagrid-grid-body {
@@ -540,21 +548,30 @@ $root: ".widget-datagrid";
     grid-column: 1 / -1;
 }
 
-:where(#{$root}-paging-bottom) {
+:where(#{$root}-paging-bottom, #{$root}-padding-top) {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
 }
 
-:where(#{$root}-pb-start, #{$root}-pb-end, #{$root}-pb-middle) {
+:where(#{$root}-pb-end, #{$root}-tb-end) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+:where(#{$root}-pb-start, #{$root}-tb-start, #{$root}-pb-end, #{$root}-tb-end, #{$root}-pb-middle) {
     flex-grow: 1;
     flex-basis: 33.33%;
     min-height: 20px;
+    height: 54px;
+    padding: var(--spacing-small) 0;
 }
 
-:where(#{$root}-pb-start) {
-    margin-block: var(--spacing-medium);
+:where(#{$root}-pb-start, #{$root}-tb-start) {
     padding-inline: var(--spacing-medium);
+    display: flex;
+    align-items: center;
 }
 
 #{$root}-clear-selection {
@@ -578,3 +595,23 @@ $root: ".widget-datagrid";
         transform: rotate(1turn);
     }
 }
+
+@container widget-datagrid-footer (width < 500px) {
+    #{$root}-paging-bottom {
+        flex-direction: column;
+        :where(#{$root}-pb-start, #{$root}-pb-end, #{$root}-pb-middle) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}
+
+@container widget-datagrid-header (width < 500px) {
+    #{$root}-padding-top {
+        flex-direction: column-reverse;
+        :where(#{$root}-tb-start, #{$root}-tb-end) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
index 19ab167c0d..e2efba99dc 100644
--- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added configurable selection count visibility and clear selection button label template for improved row selection management.
+
 ## [3.4.0] - 2025-09-12
 
 ### Fixed
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 90a6dbfd38..9a8a1a204e 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -9,8 +9,8 @@ import {
     LoadingTypeEnum,
     PaginationEnum,
     PagingPositionEnum,
-    ShowPagingButtonsEnum,
-    SelectionCountVisibilityEnum
+    SelectionCountVisibilityEnum,
+    ShowPagingButtonsEnum
 } from "../../typings/DatagridProps";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { useDatagridRootScope } from "../helpers/root-context";
@@ -136,10 +136,11 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         visibleColumns
     } = props;
 
-    const { basicData } = useDatagridRootScope();
+    const { basicData, selectionCountStore } = useDatagridRootScope();
 
     const showHeader = !!headerContent;
     const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both");
+    const showFooter = paging && (pagingPosition === "bottom" || pagingPosition === "both");
 
     const pagination = paging ? (
         <Pagination
@@ -165,14 +166,14 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     return (
         <Fragment>
-            {showTopBar && (
-                <WidgetTopBar
-                    selectionCountVisibility={selectionCountVisibility}
-                    clearSelectionButtonLabel={clearSelectionButtonLabel}
-                >
-                    {pagination}
-                </WidgetTopBar>
-            )}
+            <WidgetTopBar
+                selectedCount={selectionCountStore.selectedCount}
+                showTopBar={showTopBar}
+                selectionCountVisibility={selectionCountVisibility}
+                clearSelectionButtonLabel={clearSelectionButtonLabel}
+            >
+                {pagination}
+            </WidgetTopBar>
             {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
             <WidgetContent>
                 <Grid
@@ -243,8 +244,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 </Grid>
             </WidgetContent>
             <WidgetFooter
+                selectedCount={selectionCountStore.selectedCount}
+                showFooter={showFooter}
                 pagination={pagination}
-                pagingPosition={pagingPosition}
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
                 clearSelectionButtonLabel={clearSelectionButtonLabel}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
index d387b9c395..25190d55ca 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -1,21 +1,21 @@
 import { createElement, ReactElement, ReactNode } from "react";
-import { PaginationEnum, PagingPositionEnum, SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
+import { PaginationEnum, SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
 import { SelectionCounter } from "./SelectionCounter";
 
 type WidgetFooterProps = {
-    pagingPosition: PagingPositionEnum;
     pagination: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
     clearSelectionButtonLabel?: string;
     selectionCountVisibility?: SelectionCountVisibilityEnum;
     hasMoreItems: boolean;
+    showFooter: boolean;
+    selectedCount: number;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
     const {
-        pagingPosition,
         pagination,
         paginationType,
         loadMoreButtonCaption,
@@ -23,19 +23,22 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
         selectionCountVisibility,
         hasMoreItems,
         setPage,
+        showFooter,
+        selectedCount,
         ...rest
     } = props;
 
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                <div className="widget-datagrid-pb-start">
-                    {selectionCountVisibility === "bottom" && (
+                {selectionCountVisibility === "bottom" && selectedCount > 0 && (
+                    <div className="widget-datagrid-pb-start">
                         <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-                    )}
-                </div>
-                {hasMoreItems && paginationType === "loadMore" && (
-                    <div className="widget-datagrid-pb-middle">
+                    </div>
+                )}
+                <div className="widget-datagrid-pb-end">
+                    {showFooter && pagination}
+                    {hasMoreItems && paginationType === "loadMore" && (
                         <button
                             className="btn btn-primary widget-datagrid-load-more"
                             onClick={() => setPage && setPage(prev => prev + 1)}
@@ -43,10 +46,7 @@ export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
                         >
                             {loadMoreButtonCaption}
                         </button>
-                    </div>
-                )}
-                <div className="widget-datagrid-pb-end">
-                    {(pagingPosition === "bottom" || pagingPosition === "both") && pagination}
+                    )}
                 </div>
             </div>
         </div>
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
index 1a11f81987..fbebea8f35 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
@@ -5,19 +5,22 @@ import { SelectionCounter } from "./SelectionCounter";
 type WidgetTopBarProps = {
     selectionCountVisibility?: SelectionCountVisibilityEnum;
     clearSelectionButtonLabel?: string;
+    showTopBar: boolean;
+    selectedCount: number;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
-    const { selectionCountVisibility, clearSelectionButtonLabel } = props;
-
-    console.warn(selectionCountVisibility);
-
+    const { selectionCountVisibility, clearSelectionButtonLabel, showTopBar, selectedCount, ...restProps } = props;
     return (
-        <div {...props} className="widget-datagrid-top-bar table-header">
-            {selectionCountVisibility === "top" && (
-                <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-            )}
-            {props.children}
+        <div {...restProps} className="widget-datagrid-top-bar table-header">
+            <div className="widget-datagrid-padding-top">
+                {selectionCountVisibility === "top" && selectedCount > 0 && (
+                    <div className="widget-datagrid-tb-start">
+                        <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
+                    </div>
+                )}
+                {showTopBar && <div className="widget-datagrid-tb-end">{props.children}</div>}
+            </div>
         </div>
     );
 }
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
index cdc8ba6713..9b26eb9fe5 100644
--- 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
@@ -5,6 +5,13 @@ exports[`Table renders the structure correctly 1`] = `
   <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"
     >
@@ -74,9 +81,6 @@ exports[`Table renders the structure correctly 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -91,6 +95,13 @@ exports[`Table renders the structure correctly for preview when no header is pro
   <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"
     >
@@ -160,9 +171,6 @@ exports[`Table renders the structure correctly for preview when no header is pro
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -177,6 +185,13 @@ exports[`Table renders the structure correctly with column alignments 1`] = `
   <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"
     >
@@ -279,9 +294,6 @@ exports[`Table renders the structure correctly with column alignments 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -296,6 +308,13 @@ exports[`Table renders the structure correctly with custom filtering 1`] = `
   <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"
     >
@@ -369,9 +388,6 @@ exports[`Table renders the structure correctly with custom filtering 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -386,6 +402,13 @@ exports[`Table renders the structure correctly with dragging 1`] = `
   <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"
     >
@@ -455,9 +478,6 @@ exports[`Table renders the structure correctly with dragging 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -472,6 +492,13 @@ exports[`Table renders the structure correctly with dynamic row class 1`] = `
   <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"
     >
@@ -541,9 +568,6 @@ exports[`Table renders the structure correctly with dynamic row class 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -558,6 +582,13 @@ exports[`Table renders the structure correctly with empty placeholder 1`] = `
   <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"
     >
@@ -627,9 +658,6 @@ exports[`Table renders the structure correctly with empty placeholder 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -644,6 +672,13 @@ exports[`Table renders the structure correctly with filtering 1`] = `
   <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"
     >
@@ -717,9 +752,6 @@ exports[`Table renders the structure correctly with filtering 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -734,6 +766,13 @@ exports[`Table renders the structure correctly with header filters and a11y 1`]
   <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"
@@ -813,9 +852,6 @@ exports[`Table renders the structure correctly with header filters and a11y 1`]
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -830,6 +866,13 @@ exports[`Table renders the structure correctly with header wrapper 1`] = `
   <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"
     >
@@ -903,9 +946,6 @@ exports[`Table renders the structure correctly with header wrapper 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -920,6 +960,13 @@ exports[`Table renders the structure correctly with hiding 1`] = `
   <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"
     >
@@ -1030,9 +1077,6 @@ exports[`Table renders the structure correctly with hiding 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -1047,6 +1091,13 @@ exports[`Table renders the structure correctly with paging 1`] = `
   <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"
     >
@@ -1116,9 +1167,6 @@ exports[`Table renders the structure correctly with paging 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         >
@@ -1223,6 +1271,13 @@ exports[`Table renders the structure correctly with resizing 1`] = `
   <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"
     >
@@ -1292,9 +1347,6 @@ exports[`Table renders the structure correctly with resizing 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -1309,6 +1361,13 @@ exports[`Table renders the structure correctly with sorting 1`] = `
   <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"
     >
@@ -1378,9 +1437,6 @@ exports[`Table renders the structure correctly with sorting 1`] = `
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         />
@@ -1395,6 +1451,13 @@ exports[`Table with selection method checkbox render an extra column and add cla
   <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"
     >
@@ -1545,9 +1608,6 @@ exports[`Table with selection method checkbox render an extra column and add cla
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         >
@@ -1652,6 +1712,13 @@ exports[`Table with selection method rowClick add class to each selected cell 1`
   <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"
     >
@@ -1759,9 +1826,6 @@ exports[`Table with selection method rowClick add class to each selected cell 1`
       <div
         class="widget-datagrid-paging-bottom"
       >
-        <div
-          class="widget-datagrid-pb-start"
-        />
         <div
           class="widget-datagrid-pb-end"
         >

From f4c904b264a465a21b5e38731ef76acde2c4d3c8 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Thu, 25 Sep 2025 16:20:25 +0200
Subject: [PATCH 4/4] refactor: improve naming, reduce prop drilling and unify
 component rendering

---
 .../datagrid-web/src/Datagrid.tsx             |  3 +-
 .../datagrid-web/src/Datagrid.xml             |  2 +-
 .../src/components/SelectionCounter.tsx       | 18 ++++++---
 .../datagrid-web/src/components/Widget.tsx    | 38 +++++++++----------
 .../src/components/WidgetFooter.tsx           | 29 +++-----------
 .../src/components/WidgetTopBar.tsx           | 23 ++++-------
 .../src/helpers/state/RootGridStore.ts        |  1 +
 .../datagrid-web/typings/DatagridProps.d.ts   |  6 +--
 .../selection/stores/SelectionCountStore.ts   | 12 +++++-
 9 files changed, 60 insertions(+), 72 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
index 5dc255fa69..4eaf381991 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -117,8 +117,7 @@ const Container = observer((props: Props): ReactElement => {
                 pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
-                clearSelectionButtonLabel={props.clearSelectionButtonLabel?.value}
-                selectionCountVisibility={props.selectionCountVisibility}
+                selectionCountPosition={props.selectionCountPosition}
                 paging={paginationCtrl.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
index e5df826c81..a1edb73ec2 100644
--- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
+++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
@@ -244,7 +244,7 @@
                         <enumerationValue key="both">Both</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="selectionCountVisibility" type="enumeration" defaultValue="bottom" required="true">
+                <property key="selectionCountPosition" type="enumeration" defaultValue="bottom" required="true">
                     <caption>Show selection count</caption>
                     <description />
                     <enumerationValues>
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx
index 1c884a172f..8ba2c046e6 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx
@@ -3,19 +3,25 @@ import { observer } from "mobx-react-lite";
 import { createElement } from "react";
 import { useDatagridRootScope } from "../helpers/root-context";
 
+type SelectionCounterLocation = "top" | "bottom" | undefined;
+
 export const SelectionCounter = observer(function SelectionCounter({
-    clearSelectionButtonLabel
+    location
 }: {
-    clearSelectionButtonLabel?: string;
+    location?: SelectionCounterLocation;
 }) {
     const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
 
+    const containerClass = location === "top" ? "widget-datagrid-tb-start" : "widget-datagrid-pb-start";
+
     return (
         <If condition={selectionCountStore.displayCount !== ""}>
-            <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
-            <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
-                {clearSelectionButtonLabel || "Clear selection"}
-            </button>
+            <div className={containerClass}>
+                <span className="widget-datagrid-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
+                <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
+                    {selectionCountStore.clearButtonLabel}
+                </button>
+            </div>
         </If>
     );
 });
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 9a8a1a204e..ea0ceca31f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -9,7 +9,7 @@ import {
     LoadingTypeEnum,
     PaginationEnum,
     PagingPositionEnum,
-    SelectionCountVisibilityEnum,
+    SelectionCountPositionEnum,
     ShowPagingButtonsEnum
 } from "../../typings/DatagridProps";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
@@ -26,6 +26,7 @@ import { WidgetFooter } from "./WidgetFooter";
 import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
+import { SelectionCounter } from "./SelectionCounter";
 
 export interface WidgetProps<C extends GridColumn, T extends ObjectItem = ObjectItem> {
     CellComponent: CellComponent<C>;
@@ -49,8 +50,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     page: number;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    clearSelectionButtonLabel?: string;
-    selectionCountVisibility?: SelectionCountVisibilityEnum;
+    selectionCountPosition?: SelectionCountPositionEnum;
     pageSize: number;
     paging: boolean;
     pagingPosition: PagingPositionEnum;
@@ -121,8 +121,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         headerContent,
         headerTitle,
         loadMoreButtonCaption,
-        clearSelectionButtonLabel,
-        selectionCountVisibility,
+        selectionCountPosition,
         numberOfItems,
         page,
         pageSize,
@@ -139,8 +138,8 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
     const { basicData, selectionCountStore } = useDatagridRootScope();
 
     const showHeader = !!headerContent;
-    const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both");
-    const showFooter = paging && (pagingPosition === "bottom" || pagingPosition === "both");
+    const showTopBarPagination = paging && (pagingPosition === "top" || pagingPosition === "both");
+    const showFooterPagination = paging && (pagingPosition === "bottom" || pagingPosition === "both");
 
     const pagination = paging ? (
         <Pagination
@@ -157,6 +156,14 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         />
     ) : null;
 
+    const selectionCount =
+        selectionCountStore.selectedCount > 0 && selectionCountPosition !== "off" && selectionCountPosition ? (
+            <SelectionCounter location={selectionCountPosition} />
+        ) : null;
+
+    const showTopbarSelectionCount = selectionCount && selectionCountPosition === "top";
+    const showFooterSelectionCount = selectionCount && selectionCountPosition === "bottom";
+
     const cssGridStyles = gridStyle(visibleColumns, {
         selectItemColumn: selectActionHelper.showCheckboxColumn,
         visibilitySelectorColumn: columnsHidable
@@ -167,13 +174,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
     return (
         <Fragment>
             <WidgetTopBar
-                selectedCount={selectionCountStore.selectedCount}
-                showTopBar={showTopBar}
-                selectionCountVisibility={selectionCountVisibility}
-                clearSelectionButtonLabel={clearSelectionButtonLabel}
-            >
-                {pagination}
-            </WidgetTopBar>
+                pagination={showTopBarPagination ? pagination : undefined}
+                selectionCount={showTopbarSelectionCount ? selectionCount : undefined}
+            ></WidgetTopBar>
             {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
             <WidgetContent>
                 <Grid
@@ -244,13 +247,10 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 </Grid>
             </WidgetContent>
             <WidgetFooter
-                selectedCount={selectionCountStore.selectedCount}
-                showFooter={showFooter}
-                pagination={pagination}
+                pagination={showFooterPagination ? pagination : undefined}
+                selectionCount={showFooterSelectionCount ? selectionCount : undefined}
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
-                clearSelectionButtonLabel={clearSelectionButtonLabel}
-                selectionCountVisibility={selectionCountVisibility}
                 hasMoreItems={hasMoreItems}
                 setPage={setPage}
             />
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
index 25190d55ca..3fbf798117 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -1,43 +1,24 @@
 import { createElement, ReactElement, ReactNode } from "react";
-import { PaginationEnum, SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
-import { SelectionCounter } from "./SelectionCounter";
+import { PaginationEnum } from "../../typings/DatagridProps";
 
 type WidgetFooterProps = {
     pagination: ReactNode;
+    selectionCount: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
-    clearSelectionButtonLabel?: string;
-    selectionCountVisibility?: SelectionCountVisibilityEnum;
     hasMoreItems: boolean;
-    showFooter: boolean;
-    selectedCount: number;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
-    const {
-        pagination,
-        paginationType,
-        loadMoreButtonCaption,
-        clearSelectionButtonLabel,
-        selectionCountVisibility,
-        hasMoreItems,
-        setPage,
-        showFooter,
-        selectedCount,
-        ...rest
-    } = props;
+    const { pagination, selectionCount, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
 
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                {selectionCountVisibility === "bottom" && selectedCount > 0 && (
-                    <div className="widget-datagrid-pb-start">
-                        <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-                    </div>
-                )}
+                {selectionCount}
                 <div className="widget-datagrid-pb-end">
-                    {showFooter && pagination}
+                    {pagination}
                     {hasMoreItems && paginationType === "loadMore" && (
                         <button
                             className="btn btn-primary widget-datagrid-load-more"
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
index fbebea8f35..d3417b84f4 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
@@ -1,25 +1,18 @@
-import { createElement, ReactElement } from "react";
-import { SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
-import { SelectionCounter } from "./SelectionCounter";
+import { createElement, ReactElement, ReactNode } from "react";
 
 type WidgetTopBarProps = {
-    selectionCountVisibility?: SelectionCountVisibilityEnum;
-    clearSelectionButtonLabel?: string;
-    showTopBar: boolean;
-    selectedCount: number;
+    pagination: ReactNode;
+    selectionCount: ReactNode;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
-    const { selectionCountVisibility, clearSelectionButtonLabel, showTopBar, selectedCount, ...restProps } = props;
+    const { pagination, selectionCount, ...rest } = props;
+
     return (
-        <div {...restProps} className="widget-datagrid-top-bar table-header">
+        <div {...rest} className="widget-datagrid-top-bar table-header">
             <div className="widget-datagrid-padding-top">
-                {selectionCountVisibility === "top" && selectedCount > 0 && (
-                    <div className="widget-datagrid-tb-start">
-                        <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-                    </div>
-                )}
-                {showTopBar && <div className="widget-datagrid-tb-end">{props.children}</div>}
+                {selectionCount}
+                {pagination && <div className="widget-datagrid-tb-end">{pagination}</div>}
             </div>
         </div>
     );
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts b/packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts
index 7e64c08ec0..c1644d2ea0 100644
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts
@@ -34,6 +34,7 @@ type RequiredProps = Pick<
     | "pagination"
     | "showPagingButtons"
     | "showNumberOfRows"
+    | "clearSelectionButtonLabel"
 >;
 
 type Gate = DerivedPropsGate<RequiredProps>;
diff --git a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
index d61b596773..1b5baa1072 100644
--- a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
+++ b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
@@ -53,7 +53,7 @@ export type ShowPagingButtonsEnum = "always" | "auto";
 
 export type PagingPositionEnum = "bottom" | "top" | "both";
 
-export type SelectionCountVisibilityEnum = "top" | "bottom" | "off";
+export type SelectionCountPositionEnum = "top" | "bottom" | "off";
 
 export type ShowEmptyPlaceholderEnum = "none" | "custom";
 
@@ -107,7 +107,7 @@ export interface DatagridContainerProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
-    selectionCountVisibility: SelectionCountVisibilityEnum;
+    selectionCountPosition: SelectionCountPositionEnum;
     clearSelectionButtonLabel?: DynamicValue<string>;
     loadMoreButtonCaption?: DynamicValue<string>;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
@@ -161,7 +161,7 @@ export interface DatagridPreviewProps {
     showPagingButtons: ShowPagingButtonsEnum;
     showNumberOfRows: boolean;
     pagingPosition: PagingPositionEnum;
-    selectionCountVisibility: SelectionCountVisibilityEnum;
+    selectionCountPosition: SelectionCountPositionEnum;
     clearSelectionButtonLabel: string;
     loadMoreButtonCaption: string;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
diff --git a/packages/shared/widget-plugin-grid/src/selection/stores/SelectionCountStore.ts b/packages/shared/widget-plugin-grid/src/selection/stores/SelectionCountStore.ts
index 96227850a2..73b2a6a93a 100644
--- a/packages/shared/widget-plugin-grid/src/selection/stores/SelectionCountStore.ts
+++ b/packages/shared/widget-plugin-grid/src/selection/stores/SelectionCountStore.ts
@@ -6,26 +6,34 @@ type Gate = DerivedPropsGate<{
     itemSelection?: SelectionSingleValue | SelectionMultiValue;
     selectedCountTemplateSingular?: DynamicValue<string>;
     selectedCountTemplatePlural?: DynamicValue<string>;
+    clearSelectionButtonLabel?: DynamicValue<string>;
 }>;
 
 export class SelectionCountStore {
     private gate: Gate;
     private singular: string = "%d row selected";
     private plural: string = "%d rows selected";
+    private defaultClearLabel: string = "Clear selection";
 
-    constructor(gate: Gate, spec: { singular?: string; plural?: string } = {}) {
+    constructor(gate: Gate, spec: { singular?: string; plural?: string; clearLabel?: string } = {}) {
         this.singular = spec.singular ?? this.singular;
         this.plural = spec.plural ?? this.plural;
+        this.defaultClearLabel = spec.clearLabel ?? this.defaultClearLabel;
         this.gate = gate;
 
         makeObservable(this, {
             displayCount: computed,
             selectedCount: computed,
             fmtSingular: computed,
-            fmtPlural: computed
+            fmtPlural: computed,
+            clearButtonLabel: computed
         });
     }
 
+    get clearButtonLabel(): string {
+        return this.gate.props.clearSelectionButtonLabel?.value || this.defaultClearLabel;
+    }
+
     get fmtSingular(): string {
         return this.gate.props.selectedCountTemplateSingular?.value || this.singular;
     }