Skip to content

Commit 375c11d

Browse files
gjulivangjulivan
committed
feat(dg): show numbers of rows pagination
1 parent 17ddc16 commit 375c11d

File tree

12 files changed

+134
-90
lines changed

12 files changed

+134
-90
lines changed

‎packages/pluggableWidgets/datagrid-web/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
99
### Added
1010

1111
- We introduced a setting to exclude filters from being stored in the Personalization configuration.
12+
- We have introduced show number of rows for virtual scrolling and load more pagination mode.
1213

1314
## [2.28.2] - 2024-12-12
1415

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,16 @@ export function getProperties(
8383
]);
8484
}
8585
});
86-
if (values.pagination !== "buttons") {
86+
if (values.pagination === "buttons") {
87+
hidePropertyIn(defaultProperties, values, "showNumberOfRows");
88+
} else {
8789
hidePropertyIn(defaultProperties, values, "showPagingButtons");
90+
}
91+
92+
if (values.showNumberOfRows === false) {
8893
hidePropertyIn(defaultProperties, values, "pagingPosition");
8994
}
95+
9096
if (values.pagination !== "loadMore") {
9197
hidePropertyIn(defaultProperties, values, "loadMoreButtonCaption");
9298
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
132132
pageSize={props.pageSize ?? numberOfItems}
133133
showPagingButtons={props.showPagingButtons}
134134
loadMoreButtonCaption={props.loadMoreButtonCaption}
135-
paging={props.pagination === "buttons"}
135+
paging={props.pagination === "buttons" || props.showNumberOfRows}
136136
pagingPosition={props.pagingPosition}
137137
preview
138138
processedRows={0}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ const Container = observer((props: Props): ReactElement => {
9393
return props.datasource.status === ValueStatus.Loading;
9494
}, [exportProgress, isRefreshing, props.datasource.status, props.datasource.hasMoreItems]);
9595

96+
const showPagingButtonsOrRows = props.pagination === "buttons" ? props.showPagingButtons : props.showNumberOfRows;
97+
9698
return (
9799
<Widget
98100
className={props.class}
@@ -134,9 +136,10 @@ const Container = observer((props: Props): ReactElement => {
134136
loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
135137
paging={useShowPagination({
136138
pagination: props.pagination,
137-
showPagingButtons: props.showPagingButtons,
139+
showPagingButtonsOrRows,
138140
totalCount: props.datasource.totalCount,
139-
limit: props.datasource.limit
141+
limit: props.datasource.limit,
142+
requestTotalCount: props.datasource.requestTotalCount
140143
})}
141144
pagingPosition={props.pagingPosition}
142145
showPagingButtons={props.showPagingButtons}

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -236,15 +236,6 @@
236236
<enumerationValue key="loadMore">Load more</enumerationValue>
237237
</enumerationValues>
238238
</property>
239-
<property key="pagingPosition" type="enumeration" defaultValue="bottom">
240-
<caption>Position of paging buttons</caption>
241-
<description />
242-
<enumerationValues>
243-
<enumerationValue key="bottom">Below grid</enumerationValue>
244-
<enumerationValue key="top">Above grid</enumerationValue>
245-
<enumerationValue key="both">Both</enumerationValue>
246-
</enumerationValues>
247-
</property>
248239
<property key="showPagingButtons" type="enumeration" defaultValue="always">
249240
<caption>Show paging buttons</caption>
250241
<description />
@@ -253,6 +244,19 @@
253244
<enumerationValue key="auto">Auto</enumerationValue>
254245
</enumerationValues>
255246
</property>
247+
<property key="showNumberOfRows" type="boolean" defaultValue="false">
248+
<caption>Show number of rows</caption>
249+
<description />
250+
</property>
251+
<property key="pagingPosition" type="enumeration" defaultValue="bottom">
252+
<caption>Position of pagination</caption>
253+
<description />
254+
<enumerationValues>
255+
<enumerationValue key="bottom">Below grid</enumerationValue>
256+
<enumerationValue key="top">Above grid</enumerationValue>
257+
<enumerationValue key="both">Both</enumerationValue>
258+
</enumerationValues>
259+
</property>
256260
<property key="loadMoreButtonCaption" type="textTemplate" required="false">
257261
<caption>Load more caption</caption>
258262
<description />

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@ describe("Datagrid", () => {
8585
configurationStorageType: "attribute",
8686
configurationAttribute: undefined,
8787
loadingType: "spinner",
88-
storeFiltersInPersonalization: true
88+
storeFiltersInPersonalization: true,
89+
showNumberOfRows: false
8990
};
9091
const user = userEvent.setup();
9192
let renderCount = 0;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
134134
visibleColumns
135135
} = props;
136136

137-
const isInfinite = !paging;
137+
const isInfinite = paginationType === "virtualScrolling";
138138
const showHeader = !!headerContent;
139139
const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both");
140140

@@ -149,6 +149,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
149149
pageSize={pageSize}
150150
showPagingButtons={props.showPagingButtons}
151151
previousPage={() => setPage && setPage(prev => prev - 1)}
152+
pagination={paginationType}
152153
/>
153154
) : null;
154155

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`Table renders the structure correctly 1`] = `
66
class="test widget-datagrid"
77
>
88
<div
9-
class="widget-datagrid-content sticky-table-container infinite-loading"
9+
class="widget-datagrid-content sticky-table-container"
1010
>
1111
<div
1212
class="sticky-sentinel"
@@ -80,7 +80,7 @@ exports[`Table renders the structure correctly for preview when no header is pro
8080
class="test widget-datagrid"
8181
>
8282
<div
83-
class="widget-datagrid-content sticky-table-container infinite-loading"
83+
class="widget-datagrid-content sticky-table-container"
8484
>
8585
<div
8686
class="sticky-sentinel"
@@ -154,7 +154,7 @@ exports[`Table renders the structure correctly with column alignments 1`] = `
154154
class="test widget-datagrid"
155155
>
156156
<div
157-
class="widget-datagrid-content sticky-table-container infinite-loading"
157+
class="widget-datagrid-content sticky-table-container"
158158
>
159159
<div
160160
class="sticky-sentinel"
@@ -261,7 +261,7 @@ exports[`Table renders the structure correctly with custom filtering 1`] = `
261261
class="test widget-datagrid"
262262
>
263263
<div
264-
class="widget-datagrid-content sticky-table-container infinite-loading"
264+
class="widget-datagrid-content sticky-table-container"
265265
>
266266
<div
267267
class="sticky-sentinel"
@@ -339,7 +339,7 @@ exports[`Table renders the structure correctly with dragging 1`] = `
339339
class="test widget-datagrid"
340340
>
341341
<div
342-
class="widget-datagrid-content sticky-table-container infinite-loading"
342+
class="widget-datagrid-content sticky-table-container"
343343
>
344344
<div
345345
class="sticky-sentinel"
@@ -413,7 +413,7 @@ exports[`Table renders the structure correctly with dynamic row class 1`] = `
413413
class="test widget-datagrid"
414414
>
415415
<div
416-
class="widget-datagrid-content sticky-table-container infinite-loading"
416+
class="widget-datagrid-content sticky-table-container"
417417
>
418418
<div
419419
class="sticky-sentinel"
@@ -487,7 +487,7 @@ exports[`Table renders the structure correctly with empty placeholder 1`] = `
487487
class="test widget-datagrid"
488488
>
489489
<div
490-
class="widget-datagrid-content sticky-table-container infinite-loading"
490+
class="widget-datagrid-content sticky-table-container"
491491
>
492492
<div
493493
class="sticky-sentinel"
@@ -561,7 +561,7 @@ exports[`Table renders the structure correctly with filtering 1`] = `
561561
class="test widget-datagrid"
562562
>
563563
<div
564-
class="widget-datagrid-content sticky-table-container infinite-loading"
564+
class="widget-datagrid-content sticky-table-container"
565565
>
566566
<div
567567
class="sticky-sentinel"
@@ -649,7 +649,7 @@ exports[`Table renders the structure correctly with header filters and a11y 1`]
649649
</div>
650650
</div>
651651
<div
652-
class="widget-datagrid-content sticky-table-container infinite-loading"
652+
class="widget-datagrid-content sticky-table-container"
653653
>
654654
<div
655655
class="sticky-sentinel"
@@ -723,7 +723,7 @@ exports[`Table renders the structure correctly with header wrapper 1`] = `
723723
class="test widget-datagrid"
724724
>
725725
<div
726-
class="widget-datagrid-content sticky-table-container infinite-loading"
726+
class="widget-datagrid-content sticky-table-container"
727727
>
728728
<div
729729
class="sticky-sentinel"
@@ -801,7 +801,7 @@ exports[`Table renders the structure correctly with hiding 1`] = `
801801
class="test widget-datagrid"
802802
>
803803
<div
804-
class="widget-datagrid-content sticky-table-container infinite-loading"
804+
class="widget-datagrid-content sticky-table-container"
805805
>
806806
<div
807807
class="sticky-sentinel"
@@ -1080,7 +1080,7 @@ exports[`Table renders the structure correctly with resizing 1`] = `
10801080
class="test widget-datagrid"
10811081
>
10821082
<div
1083-
class="widget-datagrid-content sticky-table-container infinite-loading"
1083+
class="widget-datagrid-content sticky-table-container"
10841084
>
10851085
<div
10861086
class="sticky-sentinel"
@@ -1154,7 +1154,7 @@ exports[`Table renders the structure correctly with sorting 1`] = `
11541154
class="test widget-datagrid"
11551155
>
11561156
<div
1157-
class="widget-datagrid-content sticky-table-container infinite-loading"
1157+
class="widget-datagrid-content sticky-table-container"
11581158
>
11591159
<div
11601160
class="sticky-sentinel"

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
1-
import { useMemo } from "react";
1+
import { useMemo, useEffect } from "react";
22
import { PaginationEnum, ShowPagingButtonsEnum } from "../../typings/DatagridProps";
33

44
interface ShowPaginationProps {
55
pagination: PaginationEnum;
6-
showPagingButtons: ShowPagingButtonsEnum;
6+
showPagingButtonsOrRows: ShowPagingButtonsEnum | boolean;
77
totalCount?: number;
88
limit: number;
9+
requestTotalCount: (needTotalCount: boolean) => void;
910
}
1011

1112
export const useShowPagination = (props: ShowPaginationProps): boolean => {
12-
const { pagination, showPagingButtons, totalCount, limit } = props;
13+
const { pagination, showPagingButtonsOrRows, totalCount, limit, requestTotalCount } = props;
14+
15+
useEffect(() => {
16+
if (pagination !== "buttons" && showPagingButtonsOrRows) {
17+
requestTotalCount(true);
18+
}
19+
}, [pagination]);
20+
1321
return useMemo(() => {
1422
return (
15-
pagination === "buttons" &&
16-
(showPagingButtons === "always" ||
17-
(showPagingButtons === "auto" && (totalCount ? totalCount > limit : false)))
23+
showPagingButtonsOrRows === true ||
24+
showPagingButtonsOrRows === "always" ||
25+
(showPagingButtonsOrRows === "auto" && (totalCount ? totalCount > limit : false))
1826
);
19-
}, [pagination, showPagingButtons, totalCount, limit]);
27+
}, [pagination, showPagingButtonsOrRows, totalCount, limit]);
2028
};

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@ export interface ColumnsType {
5353

5454
export type PaginationEnum = "buttons" | "virtualScrolling" | "loadMore";
5555

56-
export type PagingPositionEnum = "bottom" | "top" | "both";
57-
5856
export type ShowPagingButtonsEnum = "always" | "auto";
5957

58+
export type PagingPositionEnum = "bottom" | "top" | "both";
59+
6060
export type ShowEmptyPlaceholderEnum = "none" | "custom";
6161

6262
export type OnClickTriggerEnum = "single" | "double";
@@ -116,8 +116,9 @@ export interface DatagridContainerProps {
116116
columnsFilterable: boolean;
117117
pageSize: number;
118118
pagination: PaginationEnum;
119-
pagingPosition: PagingPositionEnum;
120119
showPagingButtons: ShowPagingButtonsEnum;
120+
showNumberOfRows: boolean;
121+
pagingPosition: PagingPositionEnum;
121122
loadMoreButtonCaption?: DynamicValue<string>;
122123
showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
123124
emptyPlaceholder?: ReactNode;
@@ -162,8 +163,9 @@ export interface DatagridPreviewProps {
162163
columnsFilterable: boolean;
163164
pageSize: number | null;
164165
pagination: PaginationEnum;
165-
pagingPosition: PagingPositionEnum;
166166
showPagingButtons: ShowPagingButtonsEnum;
167+
showNumberOfRows: boolean;
168+
pagingPosition: PagingPositionEnum;
167169
loadMoreButtonCaption: string;
168170
showEmptyPlaceholder: ShowEmptyPlaceholderEnum;
169171
emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

0 commit comments

Comments
 (0)