feat(dg): show numbers of rows pagination

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 have introduced show number of rows for virtual scrolling and load more pagination mode.
+
 ## [2.28.2] - 2024-12-12
 
 ### Fixed

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -83,10 +83,16 @@ export function getProperties(
             ]);
         }
     });
-    if (values.pagination !== "buttons") {
+    if (values.pagination === "buttons") {
+        hidePropertyIn(defaultProperties, values, "showNumberOfRows");
+    } else {
         hidePropertyIn(defaultProperties, values, "showPagingButtons");
+    }
+
+    if (values.showNumberOfRows === false) {
         hidePropertyIn(defaultProperties, values, "pagingPosition");
     }
+
     if (values.pagination !== "loadMore") {
         hidePropertyIn(defaultProperties, values, "loadMoreButtonCaption");
     }

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -132,7 +132,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
             pageSize={props.pageSize ?? numberOfItems}
             showPagingButtons={props.showPagingButtons}
             loadMoreButtonCaption={props.loadMoreButtonCaption}
-            paging={props.pagination === "buttons"}
+            paging={props.pagination === "buttons" || props.showNumberOfRows}
             pagingPosition={props.pagingPosition}
             preview
             processedRows={0}

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -93,6 +93,8 @@ const Container = observer((props: Props): ReactElement => {
         return props.datasource.status === ValueStatus.Loading;
     }, [exportProgress, isRefreshing, props.datasource.status, props.datasource.hasMoreItems]);
 
+    const showPagingButtonsOrRows = props.pagination === "buttons" ? props.showPagingButtons : props.showNumberOfRows;
+
     return (
         <Widget
             className={props.class}
@@ -134,9 +136,10 @@ const Container = observer((props: Props): ReactElement => {
             loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
             paging={useShowPagination({
                 pagination: props.pagination,
-                showPagingButtons: props.showPagingButtons,
+                showPagingButtonsOrRows,
                 totalCount: props.datasource.totalCount,
-                limit: props.datasource.limit
+                limit: props.datasource.limit,
+                requestTotalCount: props.datasource.requestTotalCount
             })}
             pagingPosition={props.pagingPosition}
             showPagingButtons={props.showPagingButtons}

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -236,15 +236,6 @@
                         <enumerationValue key="loadMore">Load more</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="pagingPosition" type="enumeration" defaultValue="bottom">
-                    <caption>Position of paging buttons</caption>
-                    <description />
-                    <enumerationValues>
-                        <enumerationValue key="bottom">Below grid</enumerationValue>
-                        <enumerationValue key="top">Above grid</enumerationValue>
-                        <enumerationValue key="both">Both</enumerationValue>
-                    </enumerationValues>
-                </property>
                 <property key="showPagingButtons" type="enumeration" defaultValue="always">
                     <caption>Show paging buttons</caption>
                     <description />
@@ -253,6 +244,19 @@
                         <enumerationValue key="auto">Auto</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="showNumberOfRows" type="boolean" defaultValue="false">
+                    <caption>Show number of rows</caption>
+                    <description />
+                </property>
+                <property key="pagingPosition" type="enumeration" defaultValue="bottom">
+                    <caption>Position of pagination</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="bottom">Below grid</enumerationValue>
+                        <enumerationValue key="top">Above grid</enumerationValue>
+                        <enumerationValue key="both">Both</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <property key="loadMoreButtonCaption" type="textTemplate" required="false">
                     <caption>Load more caption</caption>
                     <description />

packages/pluggableWidgets/datagrid-web/src/__tests__/perf.spec.tsx

@@ -84,7 +84,8 @@ describe("Datagrid", () => {
             filterList: [],
             configurationStorageType: "attribute",
             configurationAttribute: undefined,
-            loadingType: "spinner"
+            loadingType: "spinner",
+            showNumberOfRows: false
         };
         const user = userEvent.setup();
         let renderCount = 0;

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -134,7 +134,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         visibleColumns
     } = props;
 
-    const isInfinite = !paging;
+    const isInfinite = paginationType === "virtualScrolling";
     const showHeader = !!headerContent;
     const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both");
 
@@ -149,6 +149,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
             pageSize={pageSize}
             showPagingButtons={props.showPagingButtons}
             previousPage={() => setPage && setPage(prev => prev - 1)}
+            pagination={paginationType}
         />
     ) : null;
 

packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Table renders the structure correctly 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -80,7 +80,7 @@ exports[`Table renders the structure correctly for preview when no header is pro
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -154,7 +154,7 @@ exports[`Table renders the structure correctly with column alignments 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -261,7 +261,7 @@ exports[`Table renders the structure correctly with custom filtering 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -339,7 +339,7 @@ exports[`Table renders the structure correctly with dragging 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -413,7 +413,7 @@ exports[`Table renders the structure correctly with dynamic row class 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -487,7 +487,7 @@ exports[`Table renders the structure correctly with empty placeholder 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -561,7 +561,7 @@ exports[`Table renders the structure correctly with filtering 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -649,7 +649,7 @@ exports[`Table renders the structure correctly with header filters and a11y 1`]
       </div>
     </div>
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -723,7 +723,7 @@ exports[`Table renders the structure correctly with header wrapper 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -801,7 +801,7 @@ exports[`Table renders the structure correctly with hiding 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -1035,13 +1035,13 @@ exports[`Table renders the structure correctly with paging 1`] = `
         <span
           class="sr-only sr-only-focusable"
         >
-          Currently showing 11 to 20 
+          Currently showing 11 to 0 
         </span>
         <div
           aria-hidden="true"
           class="paging-status"
         >
-          11 to 20 
+          11 to 0 
         </div>
         <button
           aria-label="Go to next page"
@@ -1080,7 +1080,7 @@ exports[`Table renders the structure correctly with resizing 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -1154,7 +1154,7 @@ exports[`Table renders the structure correctly with sorting 1`] = `
     class="test widget-datagrid"
   >
     <div
-      class="widget-datagrid-content sticky-table-container infinite-loading"
+      class="widget-datagrid-content sticky-table-container"
     >
       <div
         class="sticky-sentinel"
@@ -1428,13 +1428,13 @@ exports[`Table with selection method checkbox render an extra column and add cla
         <span
           class="sr-only sr-only-focusable"
         >
-          Currently showing 11 to 20 
+          Currently showing 11 to 0 
         </span>
         <div
           aria-hidden="true"
           class="paging-status"
         >
-          11 to 20 
+          11 to 0 
         </div>
         <button
           aria-label="Go to next page"
@@ -1630,13 +1630,13 @@ exports[`Table with selection method rowClick add class to each selected cell 1`
         <span
           class="sr-only sr-only-focusable"
         >
-          Currently showing 11 to 20 
+          Currently showing 11 to 0 
         </span>
         <div
           aria-hidden="true"
           class="paging-status"
         >
-          11 to 20 
+          11 to 0 
         </div>
         <button
           aria-label="Go to next page"

packages/pluggableWidgets/datagrid-web/src/utils/useShowPagination.ts

@@ -1,20 +1,28 @@
-import { useMemo } from "react";
+import { useMemo, useEffect } from "react";
 import { PaginationEnum, ShowPagingButtonsEnum } from "../../typings/DatagridProps";
 
 interface ShowPaginationProps {
     pagination: PaginationEnum;
-    showPagingButtons: ShowPagingButtonsEnum;
+    showPagingButtonsOrRows: ShowPagingButtonsEnum | boolean;
     totalCount?: number;
     limit: number;
+    requestTotalCount: (needTotalCount: boolean) => void;
 }
 
 export const useShowPagination = (props: ShowPaginationProps): boolean => {
-    const { pagination, showPagingButtons, totalCount, limit } = props;
+    const { pagination, showPagingButtonsOrRows, totalCount, limit, requestTotalCount } = props;
+
+    useEffect(() => {
+        if (pagination !== "buttons" && showPagingButtonsOrRows) {
+            requestTotalCount(true);
+        }
+    }, [pagination]);
+
     return useMemo(() => {
         return (
-            pagination === "buttons" &&
-            (showPagingButtons === "always" ||
-                (showPagingButtons === "auto" && (totalCount ? totalCount > limit : false)))
+            showPagingButtonsOrRows === true ||
+            showPagingButtonsOrRows === "always" ||
+            (showPagingButtonsOrRows === "auto" && (totalCount ? totalCount > limit : false))
         );
-    }, [pagination, showPagingButtons, totalCount, limit]);
+    }, [pagination, showPagingButtonsOrRows, totalCount, limit]);
 };

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -53,10 +53,10 @@ export interface ColumnsType {
 
 export type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore";
 
-export type PagingPositionEnum = "bottom" | "top" | "both";
-
 export type ShowPagingButtonsEnum = "always" | "auto";
 
+export type PagingPositionEnum = "bottom" | "top" | "both";
+
 export type ShowEmptyPlaceholderEnum = "none" | "custom";
 
 export type OnClickTriggerEnum = "single" | "double";
@@ -116,8 +116,9 @@ export interface DatagridContainerProps {
     columnsFilterable: boolean;
     pageSize: number;
     pagination: PaginationEnum;
-    pagingPosition: PagingPositionEnum;
     showPagingButtons: ShowPagingButtonsEnum;
+    showNumberOfRows: boolean;
+    pagingPosition: PagingPositionEnum;
     loadMoreButtonCaption?: DynamicValue<string>;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder?: ReactNode;
@@ -161,8 +162,9 @@ export interface DatagridPreviewProps {
     columnsFilterable: boolean;
     pageSize: number | null;
     pagination: PaginationEnum;
-    pagingPosition: PagingPositionEnum;
     showPagingButtons: ShowPagingButtonsEnum;
+    showNumberOfRows: boolean;
+    pagingPosition: PagingPositionEnum;
     loadMoreButtonCaption: string;
     showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
     emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx

@@ -59,6 +59,7 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                 page={props.page}
                 pageSize={props.pageSize}
                 previousPage={() => props.setPage && props.setPage(prev => prev - 1)}
+                pagination={props.paging ? "buttons" : "virtualScrolling"}
             />
         </div>
     ) : null;