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 new file mode 100644 index 00000000..e69de29b diff --git a/packages/react-mui-hooks/changes/Changed [useDataGrid] pagination enabled by default b/packages/react-mui-hooks/changes/Changed [useDataGrid] 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; };