mendix · yordan-st · Sep 15, 2025 · Sep 15, 2025 · Sep 19, 2025 · Sep 25, 2025
@@ -6,6 +6,11 @@ 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.
+- We enhanced gallery selection UI with responsive container queries and improved layout styling for header and footer components to match datagrid implementation.
+
 ## [3.6.1] DataWidgets - 2025-10-14
 
 ### [3.6.1] Datagrid

@@ -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 {
@@ -565,6 +582,15 @@ $root: ".widget-datagrid";
     color: var(--link-color);
     padding: 0;
     display: inline-block;
+
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 1px solid var(--brand-primary, $brand-primary);
+        outline-offset: 2px;
+    }
 }
 
 @keyframes skeleton-loading {
@@ -578,3 +604,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;
+        }
+    }
+}
@@ -20,7 +20,7 @@
             display: flex;
             padding: 4px;
             &:focus-visible {
-                outline: 1px solid $brand-primary;
+                outline: 1px solid var(--brand-primary, $brand-primary);
             }
         }
     }

@@ -75,11 +75,18 @@ $gallery-screen-md: $screen-md;
     }
 
     .widget-gallery-filter,
-    .widget-gallery-empty,
-    .widget-gallery-pagination {
+    .widget-gallery-empty {
         flex: 1;
     }
 
+    &-top-bar {
+        container: widget-gallery-header / inline-size;
+    }
+
+    &-footer {
+        container: widget-gallery-footer / inline-size;
+    }
+
     /**
      Helper classes
       */
@@ -91,20 +98,30 @@ $gallery-screen-md: $screen-md;
     width: inherit;
 }
 
-:where(.widget-gallery-footer-controls) {
+:where(.widget-gallery-footer-controls, .widget-gallery-top-bar-controls) {
     display: flex;
     flex-flow: row nowrap;
+    align-items: center;
 }
 
-:where(.widget-gallery-fc-start) {
-    margin-block: var(--spacing-medium);
-    padding-inline: var(--spacing-medium);
+:where(.widget-gallery-fc-end, .widget-gallery-tb-end) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 }
 
-:where(.widget-gallery-fc-start, .widget-gallery-fc-middle, .widget-gallery-fc-end) {
+:where(.widget-gallery-fc-start, .widget-gallery-tb-start, .widget-gallery-fc-end, .widget-gallery-tb-end) {
     flex-grow: 1;
     flex-basis: 33.33%;
     min-height: 20px;
+    height: 54px;
+    padding: var(--spacing-small) 0;
+}
+
+:where(.widget-gallery-fc-start, .widget-gallery-tb-start) {
+    padding-inline: var(--spacing-medium);
+    display: flex;
+    align-items: center;
 }
 
 .widget-gallery-clear-selection {
@@ -115,4 +132,33 @@ $gallery-screen-md: $screen-md;
     color: var(--link-color);
     padding: 0;
     display: inline-block;
+
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 1px solid var(--brand-primary, $brand-primary);
+        outline-offset: 2px;
+    }
+}
+
+@container widget-gallery-footer (width < 500px) {
+    .widget-gallery-footer-controls {
+        flex-direction: column;
+        :where(.widget-gallery-fc-start, .widget-gallery-fc-end, .widget-gallery-fc-middle) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}
+
+@container widget-gallery-header (width < 500px) {
+    .widget-gallery-top-bar-controls {
+        flex-direction: column-reverse;
+        :where(.widget-gallery-tb-start, .widget-gallery-tb-end) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
 }
@@ -22,7 +22,7 @@ export function withParentProvidedEnumStore<P extends { filterable: boolean }>(
 
 function useEnumFilterAPI(): Result<EnumFilterProps, APIError> {
     const ctx = useFilterAPI();
-    const slctAPI = useRef<EnumFilterProps>(undefined);
+    const slctAPI = useRef<EnumFilterProps | undefined>(undefined);
 
     if (ctx.hasError) {
         return error(ctx.error);

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- We added configurable selection count visibility and clear selection button label template for improved row selection management.
+
 - We fixed an issue where missing consistency checks for the captions were causing runtime errors instead of in Studio Pro
 
 ## [3.6.1] - 2025-10-14

@@ -75,6 +75,7 @@ export function getProperties(
             ]);
         }
     });
+
     if (values.pagination === "buttons") {
         hidePropertyIn(defaultProperties, values, "showNumberOfRows");
     } else {
@@ -169,7 +170,11 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
     }
 
     if (itemSelection !== "Multi") {
-        hidePropertyIn(defaultProperties, values, "keepSelection");
+        hidePropertiesIn(defaultProperties, values, [
+            "keepSelection",
+            "selectionCountPosition",
+            "clearSelectionButtonLabel"
+        ]);
     }
 }
 

@@ -117,6 +117,7 @@ const Container = observer((props: Props): ReactElement => {
                 pageSize={props.pageSize}
                 paginationType={props.pagination}
                 loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
+                selectionCountPosition={props.selectionCountPosition}
                 paging={paginationCtrl.showPagination}
                 pagingPosition={props.pagingPosition}
                 showPagingButtons={props.showPagingButtons}

@@ -53,6 +53,22 @@
                     <caption>Keep selection</caption>
                     <description>If enabled, selected items will stay selected unless cleared by the user or a Nanoflow.</description>
                 </property>
+                <property key="selectionCountPosition" 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="loadingType" type="enumeration" defaultValue="spinner" required="true">
                     <caption>Loading type</caption>
                     <description />

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { DOMAttributes, forwardRef, JSX, memo, ReactElement, ReactNode } from "react";
+import { ComponentPropsWithoutRef, DOMAttributes, forwardRef, memo, ReactElement, ReactNode } from "react";
 import { AlignmentEnum } from "typings/DatagridProps";
 
 export type CellElementProps = {
@@ -14,7 +14,7 @@ export type CellElementProps = {
     wrapText?: boolean;
     ["aria-hidden"]?: boolean;
     tabIndex?: number;
-} & Omit<JSX.IntrinsicElements["div"], "ref" | "children">;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
 
 const component = forwardRef<HTMLDivElement, CellElementProps>(function CellElement(
     { className, borderTop, clickable, previewAsHidden, wrapText, alignment, tabIndex, ...rest }: CellElementProps,

@@ -1,7 +1,7 @@
 import classNames from "classnames";
-import { JSX, ReactElement } from "react";
+import { ComponentPropsWithoutRef, ReactElement } from "react";
 
-type P = Omit<JSX.IntrinsicElements["div"], "role" | "ref">;
+type P = Omit<ComponentPropsWithoutRef<"div">, "role">;
 
 export interface GridProps extends P {
     className?: string;

@@ -0,0 +1,29 @@
+import { If } from "@mendix/widget-plugin-component-kit/If";
+import { observer } from "mobx-react-lite";
+import { useDatagridRootScope } from "../helpers/root-context";
+
+type SelectionCounterLocation = "top" | "bottom" | undefined;
+
+export const SelectionCounter = observer(function SelectionCounter({
+    location
+}: {
+    location?: SelectionCounterLocation;
+}) {
+    const { selectionCountStore, selectActionHelper } = useDatagridRootScope();
+
+    const containerClass = location === "top" ? "widget-datagrid-tb-start" : "widget-datagrid-pb-start";
+
+    return (
+        <If condition={selectionCountStore.displayCount !== ""}>
+            <div className={containerClass}>
+                <span className="widget-datagrid-selection-count" aria-live="polite" aria-atomic="true">
+                    {selectionCountStore.displayCount}
+                </span>
+                &nbsp;|&nbsp;
+                <button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
+                    {selectionCountStore.clearButtonLabel}
+                </button>
+            </div>
+        </If>
+    );
+});