From 6606d00777a0ffdd4a84a91749cbc97eb6fe9779 Mon Sep 17 00:00:00 2001 From: Suryavanshi Date: Fri, 18 Oct 2024 13:54:39 +0530 Subject: [PATCH] feat(Datagrid): added pagination for load more & virtual scrolling --- .../datagrid-web/src/Datagrid.editorConfig.ts | 1 - .../src/Datagrid.editorPreview.tsx | 1 + .../datagrid-web/src/Datagrid.tsx | 6 ++++++ .../datagrid-web/src/components/Widget.tsx | 9 ++++++--- .../datagrid-web/src/utils/test-utils.tsx | 1 + .../src/components/Pagination.tsx | 20 ++++++++++++------- 6 files changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts index 56116a8878..73f4b44608 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts @@ -84,7 +84,6 @@ export function getProperties( }); if (values.pagination !== "buttons") { hidePropertyIn(defaultProperties, values, "showPagingButtons"); - hidePropertyIn(defaultProperties, values, "pagingPosition"); } if (values.pagination !== "loadMore") { hidePropertyIn(defaultProperties, values, "loadMoreButtonCaption"); diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx index 1b113163aa..c2e895eb03 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx @@ -124,6 +124,7 @@ export function preview(props: DatagridPreviewProps): ReactElement { headerWrapperRenderer={selectableWrapperRenderer(previewColumns)} numberOfItems={props.pageSize ?? numberOfItems} page={0} + isInfiniteLoad={false} paginationType={props.pagination} pageSize={props.pageSize ?? numberOfItems} showPagingButtons={props.showPagingButtons} diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx index 72406f07e8..a072072c18 100644 --- a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx @@ -37,6 +37,11 @@ const Container = observer((props: Props): ReactElement => { const items = props.datasource.items ?? []; const [exportProgress, abortExport] = useDataExport(props, props.columnsStore, props.progressStore); + useEffect(() => { + if (props.pagination !== "buttons") { + props.datasource.requestTotalCount(true); + } + }, [props.datasource, props.pagination]); useEffect(() => { let timer: ReturnType; @@ -98,6 +103,7 @@ const Container = observer((props: Props): ReactElement => { columnsResizable={props.columnsResizable} columnsSortable={props.columnsSortable} data={items} + isInfiniteLoad={isInfiniteLoad} emptyPlaceholderRenderer={useCallback( (renderWrapper: (children: ReactNode) => ReactElement) => props.showEmptyPlaceholder === "custom" ? renderWrapper(props.emptyPlaceholder) :
, diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx index 5bc14ed567..47de641d0d 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx @@ -35,6 +35,7 @@ export interface WidgetProps ReactElement) => ReactElement; exporting: boolean; + isInfiniteLoad: boolean; filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement; hasMoreItems: boolean; headerContent?: ReactNode; @@ -141,7 +142,7 @@ const Main = observer((props: WidgetProps): ReactElemen const [isDragging, setIsDragging] = useState<[ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined>(); const [dragOver, setDragOver] = useState<[ColumnId, "before" | "after"] | undefined>(undefined); const showHeader = !!headerContent; - const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both"); + const showTopBar = pagingPosition === "top" || pagingPosition === "both"; const renderFilterWrapper = useCallback( (children: ReactNode) => ( @@ -152,7 +153,7 @@ const Main = observer((props: WidgetProps): ReactElemen [isDragging] ); - const pagination = paging ? ( + const pagination = ( (props: WidgetProps): ReactElemen nextPage={() => setPage && setPage(prev => prev + 1)} numberOfItems={numberOfItems} page={page} + paginationType={props.paginationType} pageSize={pageSize} + isInfiniteLoad={props.isInfiniteLoad} showPagingButtons={props.showPagingButtons} previousPage={() => setPage && setPage(prev => prev - 1)} /> - ) : null; + ); const cssGridStyles = gridStyle(visibleColumns, { selectItemColumn: selectActionHelper.showCheckboxColumn, diff --git a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx index 24bdc8dd3a..95d048ae6a 100644 --- a/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx @@ -89,6 +89,7 @@ export function mockWidgetProps(): WidgetProps { onExportCancel: jest.fn(), page: 1, pageSize: 10, + isInfiniteLoad: false, paginationType: "buttons", paging: false, pagingPosition: "bottom", diff --git a/packages/shared/widget-plugin-grid/src/components/Pagination.tsx b/packages/shared/widget-plugin-grid/src/components/Pagination.tsx index afb4a43b1f..5f0a6e2596 100644 --- a/packages/shared/widget-plugin-grid/src/components/Pagination.tsx +++ b/packages/shared/widget-plugin-grid/src/components/Pagination.tsx @@ -9,6 +9,8 @@ export interface PaginationProps { numberOfItems?: number; page: number; pageSize: number; + isInfiniteLoad: boolean; + paginationType: "buttons" | "virtualScrolling" | "loadMore"; previousPage: () => void; setPaginationIndex?: Dispatch>; showPagingButtons?: "always" | "auto"; @@ -25,8 +27,12 @@ export function Pagination(props: PaginationProps): ReactElement | null { props.numberOfItems !== undefined ? Math.ceil(props.numberOfItems / props.pageSize) : undefined; const lastPage = numberOfPages !== undefined ? numberOfPages - 1 : 0; const hasLastPage = numberOfPages !== undefined; - const initialItem = props.numberOfItems === 0 ? 0 : props.page * props.pageSize + 1; - const lastItem = getLastItem(props.canNextPage, props.numberOfItems, props.page, props.pageSize); + const initialItem = props.numberOfItems === 0 ? 0 : props.isInfiniteLoad ? 1 : props.page * props.pageSize + 1; + const lastItem = props.isInfiniteLoad + ? props.page * props.pageSize > (props.numberOfItems ?? 0) + ? props.numberOfItems ?? 0 + : props.page * props.pageSize + : getLastItem(props.canNextPage, props.numberOfItems ?? 0, props.page, props.pageSize); const setPageIndex = (page: number): void => { if (props.setPaginationIndex) { @@ -46,9 +52,9 @@ export function Pagination(props: PaginationProps): ReactElement | null {