Skip to content

[WC-2961] Selection items count #1828

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[WC-2961] Selection items count #1828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3c43234
feat: add selection counter
iobuhov Aug 13, 2025
ca073cc
test: cleanup and update
iobuhov Aug 13, 2025
3ba41c9
chore: switch to if component
iobuhov Aug 18, 2025
d568341
feat: add keep selection logic
iobuhov Aug 21, 2025
d980ceb
chore: fix the selection status, select none and select all
iobuhov Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ $root: ".widget-datagrid";
color: $dg-pagination-caption-color;

.paging-status {
padding: 0 8px 8px;
padding: 0 8px 0;
}

.pagination-button {
Expand Down Expand Up @@ -629,6 +629,23 @@ $root: ".widget-datagrid";
z-index: 1;
}

:where(#{$root}-paging-bottom) {
display: flex;
flex-flow: row nowrap;
align-items: center;
}

:where(#{$root}-pb-left, #{$root}-pb-right, #{$root}-pb-middle) {
flex-grow: 1;
flex-basis: 33.3%;
min-height: 20px;
}

:where(#{$root}-pb-left) {
margin-block: var(--spacing-medium);
padding-inline: var(--spacing-medium);
}

@keyframes skeleton-loading {
0% {
background-position: right;
Expand Down
1 change: 1 addition & 0 deletions packages/pluggableWidgets/datagrid-web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Added

- We implemented a new property to show a refresh indicator. With the refresh indicator, any datasource change shows a progress bar on top of Datagrid 2.
- We added a selection count display that shows the number of selected rows in the grid footer. The count appears automatically when items are selected and supports customizable text formats for singular and plural forms via the new "Row count singular" and "Row count plural" properties.

## [3.2.0] - 2025-08-18

Expand Down
153 changes: 86 additions & 67 deletions packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
import { enableStaticRendering } from "mobx-react-lite";
enableStaticRendering(true);

import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
import { GUID, ObjectItem } from "mendix";
import { Selectable } from "mendix/preview/Selectable";
Expand All @@ -12,8 +15,10 @@ import { ColumnsPreviewType, DatagridPreviewProps } from "typings/DatagridProps"
import { Cell } from "./components/Cell";
import { Widget } from "./components/Widget";
import { ColumnPreview } from "./helpers/ColumnPreview";
import { DatagridContext } from "./helpers/root-context";
import { useSelectActionHelper } from "./helpers/SelectActionHelper";
import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
import { GridBasicData } from "./helpers/state/GridBasicData";
import { SelectionCountStore } from "./helpers/state/SelectionCountStore";
import "./ui/DatagridPreview.scss";

// Fix type definition for Selectable
Expand Down Expand Up @@ -80,74 +85,88 @@ export function preview(props: DatagridPreviewProps): ReactElement {

const eventsController = { getProps: () => Object.create({}) };

const ctx = useConst(() => {
const gateProvider = new GateProvider({});
const basicData = new GridBasicData(gateProvider.gate);
const selectionCountStore = new SelectionCountStore(gateProvider.gate);
return {
basicData,
selectionHelper: undefined,
selectActionHelper,
cellEventsController: eventsController,
checkboxEventsController: eventsController,
focusController,
selectionCountStore
};
});

return (
<Widget
CellComponent={Cell}
className={props.class}
columnsDraggable={props.columnsDraggable}
columnsFilterable={props.columnsFilterable}
columnsHidable={props.columnsHidable}
columnsResizable={props.columnsResizable}
columnsSortable={props.columnsSortable}
visibleColumns={columns}
availableColumns={[]}
columnsSwap={noop}
setIsResizing={noop}
data={data}
emptyPlaceholderRenderer={useCallback(
(renderWrapper: (children: ReactNode) => ReactElement) => (
<EmptyPlaceholder caption="Empty list message: Place widgets here">
{renderWrapper(null)}
</EmptyPlaceholder>
),
[EmptyPlaceholder]
)}
exporting={false}
filterRenderer={useCallback(
(renderWrapper, columnIndex) => {
const column = props.columns.at(columnIndex);
return column?.filter ? (
<column.filter.renderer caption="Place filter widget here">
<DatagridContext.Provider value={ctx}>
<Widget
CellComponent={Cell}
className={props.class}
columnsDraggable={props.columnsDraggable}
columnsFilterable={props.columnsFilterable}
columnsHidable={props.columnsHidable}
columnsResizable={props.columnsResizable}
columnsSortable={props.columnsSortable}
visibleColumns={columns}
availableColumns={[]}
columnsSwap={noop}
setIsResizing={noop}
data={data}
emptyPlaceholderRenderer={useCallback(
(renderWrapper: (children: ReactNode) => ReactElement) => (
<EmptyPlaceholder caption="Empty list message: Place widgets here">
{renderWrapper(null)}
</column.filter.renderer>
) : (
renderWrapper(null)
);
},
[props.columns]
)}
headerContent={
<props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
<div />
</props.filtersPlaceholder.renderer>
}
hasMoreItems={false}
headerWrapperRenderer={selectableWrapperRenderer(previewColumns)}
numberOfItems={props.pageSize ?? numberOfItems}
page={0}
paginationType={props.pagination}
pageSize={props.pageSize ?? numberOfItems}
showPagingButtons={props.showPagingButtons}
loadMoreButtonCaption={props.loadMoreButtonCaption}
paging={props.pagination === "buttons" || props.showNumberOfRows}
pagingPosition={props.pagingPosition}
preview
processedRows={0}
styles={parseStyle(props.style)}
selectionStatus={"none"}
id={gridId}
gridInteractive={!!(props.itemSelection !== "None" || props.onClick)}
selectActionHelper={selectActionHelper}
cellEventsController={eventsController}
checkboxEventsController={eventsController}
focusController={focusController}
isFirstLoad={false}
isLoading={false}
isFetchingNextBatch={false}
loadingType="spinner"
columnsLoading={false}
showRefreshIndicator={false}
/>
</EmptyPlaceholder>
),
[EmptyPlaceholder]
)}
exporting={false}
filterRenderer={useCallback(
(renderWrapper, columnIndex) => {
const column = props.columns.at(columnIndex);
return column?.filter ? (
<column.filter.renderer caption="Place filter widget here">
{renderWrapper(null)}
</column.filter.renderer>
) : (
renderWrapper(null)
);
},
[props.columns]
)}
headerContent={
<props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
<div />
</props.filtersPlaceholder.renderer>
}
hasMoreItems={false}
headerWrapperRenderer={selectableWrapperRenderer(previewColumns)}
numberOfItems={props.pageSize ?? numberOfItems}
page={0}
paginationType={props.pagination}
pageSize={props.pageSize ?? numberOfItems}
showPagingButtons={props.showPagingButtons}
loadMoreButtonCaption={props.loadMoreButtonCaption}
paging={props.pagination === "buttons" || props.showNumberOfRows}
pagingPosition={props.pagingPosition}
preview
processedRows={0}
styles={parseStyle(props.style)}
id={gridId}
selectActionHelper={selectActionHelper}
cellEventsController={eventsController}
checkboxEventsController={eventsController}
focusController={focusController}
isFetchingNextBatch={false}
loadingType="spinner"
columnsLoading={false}
isFirstLoad={false}
showRefreshIndicator={false}
/>
</DatagridContext.Provider>
);
}

Expand Down
151 changes: 83 additions & 68 deletions packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/ho
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 { observer } from "mobx-react-lite";
import { ReactElement, ReactNode, createElement, useCallback, useMemo } from "react";
Expand All @@ -13,6 +14,7 @@ import { ProgressStore } from "./features/data-export/ProgressStore";
import { useDataExport } from "./features/data-export/useDataExport";
import { useCellEventsController } from "./features/row-interaction/CellEventsController";
import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
import { DatagridContext } from "./helpers/root-context";
import { useSelectActionHelper } from "./helpers/SelectActionHelper";
import { IColumnGroupStore } from "./helpers/state/ColumnGroupStore";
import { RootGridStore } from "./helpers/state/RootGridStore";
Expand All @@ -32,7 +34,12 @@ const Container = observer((props: Props): ReactElement => {

const [exportProgress, abortExport] = useDataExport(props, props.columnsStore, props.progressStore);

const selectionHelper = useSelectionHelper(props.itemSelection, props.datasource, props.onSelectionChange);
const selectionHelper = useSelectionHelper(
props.itemSelection,
props.datasource,
props.onSelectionChange,
"always keep"
);

const selectActionHelper = useSelectActionHelper(props, selectionHelper);

Expand All @@ -57,74 +64,82 @@ const Container = observer((props: Props): ReactElement => {

const checkboxEventsController = useCheckboxEventsController(selectActionHelper, focusController);

const ctx = useConst(() => {
rootStore.basicData.setSelectionHelper(selectionHelper);
return {
basicData: rootStore.basicData,
selectionHelper,
selectActionHelper,
cellEventsController,
checkboxEventsController,
focusController,
selectionCountStore: rootStore.selectionCountStore
};
});

return (
<Widget
className={props.class}
CellComponent={Cell}
columnsDraggable={props.columnsDraggable}
columnsFilterable={props.columnsFilterable}
columnsHidable={props.columnsHidable}
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];
return renderWrapper(columnFilter.renderFilterWidgets());
},
[columnsStore.columnFilters]
)}
headerTitle={props.filterSectionTitle?.value}
headerContent={
props.filtersPlaceholder && (
<WidgetHeaderContext selectionHelper={selectionHelper} rootStore={rootStore}>
{props.filtersPlaceholder}
</WidgetHeaderContext>
)
}
hasMoreItems={props.datasource.hasMoreItems ?? false}
headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
id={useMemo(() => `DataGrid${generateUUID()}`, [])}
numberOfItems={props.datasource.totalCount}
onExportCancel={abortExport}
page={paginationCtrl.currentPage}
pageSize={props.pageSize}
paginationType={props.pagination}
loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
paging={paginationCtrl.showPagination}
pagingPosition={props.pagingPosition}
showPagingButtons={props.showPagingButtons}
rowClass={useCallback((value: any) => props.rowClass?.get(value)?.value ?? "", [props.rowClass])}
gridInteractive={!!(props.itemSelection || props.onClick)}
setPage={paginationCtrl.setPage}
styles={props.style}
selectionStatus={selectionHelper?.type === "Multi" ? selectionHelper.selectionStatus : "unknown"}
exporting={exportProgress.exporting}
processedRows={exportProgress.loaded}
exportDialogLabel={props.exportDialogLabel?.value}
cancelExportLabel={props.cancelExportLabel?.value}
selectRowLabel={props.selectRowLabel?.value}
selectAllRowsLabel={props.selectAllRowsLabel?.value}
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}
focusController={focusController}
isFirstLoad={rootStore.loaderCtrl.isFirstLoad}
isFetchingNextBatch={rootStore.loaderCtrl.isFetchingNextBatch}
isLoading={props.datasource.status === "loading"}
loadingType={props.loadingType}
columnsLoading={!columnsStore.loaded}
showRefreshIndicator={rootStore.loaderCtrl.showRefreshIndicator}
/>
<DatagridContext.Provider value={ctx}>
<Widget
className={props.class}
CellComponent={Cell}
columnsDraggable={props.columnsDraggable}
columnsFilterable={props.columnsFilterable}
columnsHidable={props.columnsHidable}
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];
return renderWrapper(columnFilter.renderFilterWidgets());
},
[columnsStore.columnFilters]
)}
headerTitle={props.filterSectionTitle?.value}
headerContent={
props.filtersPlaceholder && (
<WidgetHeaderContext selectionHelper={selectionHelper} rootStore={rootStore}>
{props.filtersPlaceholder}
</WidgetHeaderContext>
)
}
hasMoreItems={props.datasource.hasMoreItems ?? false}
headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
id={useMemo(() => `DataGrid${generateUUID()}`, [])}
numberOfItems={props.datasource.totalCount}
onExportCancel={abortExport}
page={paginationCtrl.currentPage}
pageSize={props.pageSize}
paginationType={props.pagination}
loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
paging={paginationCtrl.showPagination}
pagingPosition={props.pagingPosition}
showPagingButtons={props.showPagingButtons}
rowClass={useCallback((value: any) => props.rowClass?.get(value)?.value ?? "", [props.rowClass])}
setPage={paginationCtrl.setPage}
styles={props.style}
exporting={exportProgress.exporting}
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}
focusController={focusController}
isFirstLoad={rootStore.loaderCtrl.isFirstLoad}
isFetchingNextBatch={rootStore.loaderCtrl.isFetchingNextBatch}
showRefreshIndicator={rootStore.loaderCtrl.showRefreshIndicator}
loadingType={props.loadingType}
columnsLoading={!columnsStore.loaded}
/>
</DatagridContext.Provider>
);
});

Expand Down
Loading
Loading