fix: reference to updated scss variable

Author: yordan-st

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.6.1] DataWidgets - 2025-10-14
 
 ### [3.6.1] Datagrid

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;
+        }
+    }
+}

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -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

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}