Hooks

usePager

usePager hook is used to paginate data using standard link mechanism. It provides pre encoded links for prev and next. Pages provides method to search as well as sort results.

Inputs

• path: string relative route path to get data from
• pageSize?: number number of rows to get
• items?: M[] initial set of items, results of useLoaderData call
• idField: string Field / Primary Key to uniquely identify item
• scope?: string used to provide uniqueness to search parameters
• filter?: string additional search criteria, normally used for cascade inputs to pipe result of one input and use that as basis for second input
• loadOnInit?: boolean should load data in initialization, normally you would pass data from server using useLoaderData, but if for some reason, you are not able to pass data from server, this will try to get data. Note: Will result in multiple calls in development mode as it uses useEffect hook to get data. This is OK as we just overwrite data.

Outputs

• canGetPrevious: If it is possible to get/navigate to previous page

• getPrevious: Method to Get Previous Page

• prevLink: to property that can be used in a Link to get previous page

• canGetNext: If it is possible to get/navigate to next page

• getNext: Method to Get Next Page

• nextLink: to property that cab be used in a Link to get Next page

• currentPage: Zero based index of current page.

• isLoading: always false (only here for compatibility with useFetchPager)

• noItems: Boolean to indicate if we have no data

• refresh: Method to refresh data, CAUTION: starts from first page, preservers search/sort.

• data: One page of data

• items: One page of data (same as data)

• itemList: One page of data (only here for compatibility with useFetchPager)

• search: current search string

• onSearch: Method to preform search, requires passing in search term.

• sort: current search string

• onSort:Method to preform Sort, requires passing in sort term.

• onSearchSort: handleSMethod to preform Search and/or Sort, passing in search and sort to perform.

• onUpdated: Method to update item in list, current item is found using idField, and replaced with passed in item.

• take: number of rows to get

• pageSize: number of rows to get

• selectedItem: currently selected item (utility method)

• onSelectItem: select an item (utility method)

useFetchPager

useFetchPager hook for fetcher based pagination to fetch data without affecting main navigation. It provides helper method to get next and previous set of data as well method to search and sort results. Internally keeps list of all fetched data and also supports infinite scroll functionality.

Inputs

• path: string relative route path to get data from
• pageSize?: number number of rows to get
• items?: M[] initial set of items, results of useLoaderData call
• idField: string Field / Primary Key to uniquely identify item
• scope?: string used to provide uniqueness to search parameters
• filter?: string additional search criteria, normally used for cascade inputs to pipe result of one input and use that as basis for second input
• loadOnInit?: boolean should load data in initialization, normally you would pass data from server using useLoaderData, but if for some reason, you are not able to pass data from server, this will try to get data. Note: Will result in multiple calls in development mode as it uses useEffect hook to get data. This is OK as we just overwrite data.

Outputs

• canGetPrevious: If it is possible to get/navigate to previous page

• getPrevious: Method to Get Previous Page

• prevLink: empty string

• canGetNext: If it is possible to get/navigate to next page

• getNext: Method to Get Next Page

• nextLink: empty string

• currentPage: Zero based index of current page.

• isLoading: based on fetcher state

• noItems: Boolean to indicate if we have no data

• refresh: Method to refresh data, CAUTION: starts from first page, preservers search/sort.

• data: accumulated data

• items: Current page of data

• itemList: accumulated data

• search: current search string

• onSearch: Method to preform search, requires passing in search term.

• sort: current search string

• onSort:Method to preform Sort, requires passing in sort term.

• onSearchSort: handleSMethod to preform Search and/or Sort, passing in search and sort to perform.

• onUpdated: Method to update item in list, current item is found using idField, and replaced with passed in item.

• take: number of rows to get

• pageSize: number of rows to get

• selectedItem: currently selected item (utility method)

• onSelectItem: select an item (utility method)

useInfinitePager

useInfinitePager hook is used to paginate data using Query string parameters similar to usePager, but is tuned for infinite scrolling. It provides getNext that you can call every time user scrolls to get next page of data. Pages provides method to search as well as sort results.

Inputs

• path: string relative route path to get data from
• pageSize?: number number of rows to get
• items?: M[] initial set of items, results of useLoaderData call
• idField: string Field / Primary Key to uniquely identify item
• scope?: string used to provide uniqueness to search parameters
• filter?: string additional search criteria, normally used for cascade inputs to pipe result of one input and use that as basis for second input
• autoReset?: boolean defaults to true and will reset pagination back to beginning when user performs a browser refresh. This is needed so that if user refreshes when they have scrolled to say page 10, we start from page 1 otherwise, we will only get page 10 and will be missing page 1 to 9!
• eagerLoading?: boolean default to true. With eagerLoading enabled, hook will earger load first three pages so that user will larger monitors do not see empty space and can scroll to load more data.

Outputs

• canGetNext: If it is possible to get/navigate to next page

• getNext: Method to Get Next Page

• nextLink: to property that cab be used in a Link to get Next page

• currentPage: Zero based index of current page.

• isLoading: true when getting data

• noItems: Boolean to indicate if we have no data

• refresh: Method to refresh data, CAUTION: starts from first page, preservers search/sort.

• data: accumulated data

• items: accumulated data (same as data)

• itemList: accumulated data (same as data)

• search: current search string

• onSearch: Method to preform search, requires passing in search term.

• sort: current search string

• onSort:Method to preform Sort, requires passing in sort term.

• onSearchSort: handleSMethod to preform Search and/or Sort, passing in search and sort to perform.

• onUpdated: Method to update item in list, current item is found using idField, and replaced with passed in item.

• take: number of rows to get

• pageSize: number of rows to get

• selectedItem: currently selected item (utility method)

• onSelectItem: select an item (utility method)

Scoped Search Parameters

Scoped Search Parameters ensures parameter uniqueness across scope. Without it, if you have two parameters with same name, they will overwrite each other, resulting in errors. With scoped search parameter, each parameter is auto scoped and won't overwrite other parameter with same name. This allows for simultaneous paging of multiple models. Think of it as namespace for URL parameters!