From 19915ffb43e624a00fa1c77234b71f44cce82a66 Mon Sep 17 00:00:00 2001 From: DorijanH Date: Wed, 20 Dec 2023 11:40:07 +0100 Subject: [PATCH 1/3] feat: Pagination enabled by default --- .../Changed Pagination enabled by default | 0 packages/react-mui-hooks/hooks/useDataGrid.tsx | 17 +++++++++++++++++ .../react-mui-hooks/temp/react-mui-hooks.api.md | 3 ++- 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 packages/react-mui-hooks/changes/Changed Pagination enabled by default diff --git a/packages/react-mui-hooks/changes/Changed Pagination enabled by default b/packages/react-mui-hooks/changes/Changed Pagination enabled by default new file mode 100644 index 00000000..e69de29b diff --git a/packages/react-mui-hooks/hooks/useDataGrid.tsx b/packages/react-mui-hooks/hooks/useDataGrid.tsx index c273a273..dceb2a5e 100644 --- a/packages/react-mui-hooks/hooks/useDataGrid.tsx +++ b/packages/react-mui-hooks/hooks/useDataGrid.tsx @@ -30,6 +30,7 @@ import { type GridValidRowModel, type DataGridPro, type GridSortItem, + type GridRowScrollEndParams, } from '@mui/x-data-grid-pro'; import { useResizeObserver } from '@enterwell/react-hooks'; import { format } from 'date-fns'; @@ -271,6 +272,7 @@ export type UseDataGridProps = { rowHeight?: number, selection?: boolean, checkboxSelection?: boolean, + enablePagination?: boolean, infiniteLoading?: boolean, keepNonExistentRowsSelected?: boolean }; @@ -306,6 +308,7 @@ export function useDataGrid({ rowHeight = 40, selection, checkboxSelection, + enablePagination = true, infiniteLoading, keepNonExistentRowsSelected = true }: UseDataGridProps): UseDataGridResponse { @@ -495,6 +498,16 @@ export function useDataGrid({ ...resolveCustomTypeOperators(c), })), [columns, headerRenderer, rowHeight]); + /** + * Handles rows scroll end action. + */ + const handleRowsScrollEnd = (params: GridRowScrollEndParams) => { + if (!infiniteLoading) return; + + console.debug('Infinite loading: loading next page', params); + handlePaginationModelChange({ page: pageIndex + 1, pageSize }); + }; + return { props: { ref: resizeRef, @@ -511,11 +524,13 @@ export function useDataGrid({ columns: columnsMemo, columnVisibilityModel: columnVisibility, onColumnVisibilityModelChange: handleColumnVisibilityChange, + pagination: !infiniteLoading && enablePagination, paginationMode: 'server', paginationModel: { page: Math.max(pageIndex, 0), pageSize, }, + hideFooterPagination: infiniteLoading, onPaginationModelChange: handlePaginationModelChange, sortingMode: 'server', sortModel, @@ -529,6 +544,8 @@ export function useDataGrid({ }, onRowClick, rowHeight, + scrollEndThreshold: rowHeight * Math.round(pageSize / 2), + onRowsScrollEnd: handleRowsScrollEnd, onCellKeyDown: handleCellKeyDown, columnHeaderHeight: rowHeight + 1, disableRowSelectionOnClick: !selection, diff --git a/packages/react-mui-hooks/temp/react-mui-hooks.api.md b/packages/react-mui-hooks/temp/react-mui-hooks.api.md index 628f6c79..9dbae057 100644 --- a/packages/react-mui-hooks/temp/react-mui-hooks.api.md +++ b/packages/react-mui-hooks/temp/react-mui-hooks.api.md @@ -39,7 +39,7 @@ export type TypedSortModel = (GridSortItem & { })[]; // @public -export function useDataGrid({ tableId, pageSize, columns, columnVisibilityModel, defaultSort, onPage, onRowClick, rowHeight, selection, checkboxSelection, infiniteLoading, keepNonExistentRowsSelected }: UseDataGridProps): UseDataGridResponse; +export function useDataGrid({ tableId, pageSize, columns, columnVisibilityModel, defaultSort, onPage, onRowClick, rowHeight, selection, checkboxSelection, enablePagination, infiniteLoading, keepNonExistentRowsSelected }: UseDataGridProps): UseDataGridResponse; // @public export type UseDataGridProps = { @@ -56,6 +56,7 @@ export type UseDataGridProps = { rowHeight?: number; selection?: boolean; checkboxSelection?: boolean; + enablePagination?: boolean; infiniteLoading?: boolean; keepNonExistentRowsSelected?: boolean; }; From 5ddb34479962a0be25bcb738447af1e4fe1dd219 Mon Sep 17 00:00:00 2001 From: DorijanH Date: Wed, 20 Dec 2023 11:42:52 +0100 Subject: [PATCH 2/3] chore(react-mui-hooks): Added change file --- .../changes/Added useDataGrid enablePagination optional prop | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 packages/react-mui-hooks/changes/Added useDataGrid enablePagination optional prop diff --git a/packages/react-mui-hooks/changes/Added useDataGrid enablePagination optional prop b/packages/react-mui-hooks/changes/Added useDataGrid enablePagination optional prop new file mode 100644 index 00000000..e69de29b From 0d939a8105eb6947aec16cebd063d42f9e071387 Mon Sep 17 00:00:00 2001 From: DorijanH Date: Wed, 20 Dec 2023 13:07:01 +0100 Subject: [PATCH 3/3] chore(react-mui-hooks): Added changelog config and renamed change files --- packages/react-mui-hooks/.changelog.json | 5 +++++ ...op => Added [useDataGrid] enablePagination optional prop} | 0 ...t => Changed [useDataGrid] pagination enabled by default} | 0 3 files changed, 5 insertions(+) create mode 100644 packages/react-mui-hooks/.changelog.json rename packages/react-mui-hooks/changes/{Added useDataGrid enablePagination optional prop => Added [useDataGrid] enablePagination optional prop} (100%) rename packages/react-mui-hooks/changes/{Changed Pagination enabled by default => Changed [useDataGrid] pagination enabled by default} (100%) diff --git a/packages/react-mui-hooks/.changelog.json b/packages/react-mui-hooks/.changelog.json new file mode 100644 index 00000000..87037fc2 --- /dev/null +++ b/packages/react-mui-hooks/.changelog.json @@ -0,0 +1,5 @@ +{ + "categories": [ + "useDataGrid" + ] +} \ No newline at end of file diff --git a/packages/react-mui-hooks/changes/Added useDataGrid enablePagination optional prop b/packages/react-mui-hooks/changes/Added [useDataGrid] enablePagination optional prop similarity index 100% rename from packages/react-mui-hooks/changes/Added useDataGrid enablePagination optional prop rename to packages/react-mui-hooks/changes/Added [useDataGrid] enablePagination optional prop diff --git a/packages/react-mui-hooks/changes/Changed Pagination enabled by default b/packages/react-mui-hooks/changes/Changed [useDataGrid] pagination enabled by default similarity index 100% rename from packages/react-mui-hooks/changes/Changed Pagination enabled by default rename to packages/react-mui-hooks/changes/Changed [useDataGrid] pagination enabled by default