SharePoint Framework need suggestions to implement paging and filteration

%3CLINGO-SUB%20id%3D%22lingo-sub-150636%22%20slang%3D%22en-US%22%3ESharePoint%20Framework%20need%20suggestions%20to%20implement%20paging%20and%20filteration%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-150636%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20working%20on%20SharePoint%20Server%202016%20and%20developing%20client%20side%20webparts%20using%20SharePoint%20Framework.%3C%2FP%3E%0A%3CP%3EI've%20a%20requirement%20to%20filter%20the%20data%20and%20adding%20the%20pagination%2C%20I've%20used%20the%20followings%20till%20now%3C%2FP%3E%0A%3CP%3E1)%20PnP%20Core%20JS%20(To%20Perform%20CRUD%20operations%20to%20SharePoint)%3C%2FP%3E%0A%3CP%3E2)%20VUE%20JS%20(To%20Render%20the%20data)%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EISSUES%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E1)%20I'm%20unable%20to%20filter%20the%20data%20as%20VUE%20JS%20computed%20properties%20are%20not%20working%20check%20that%20%3CA%20href%3D%22https%3A%2F%2Fforum.vuejs.org%2Ft%2Fvue-js-computed-properties-async%2F26213%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ethread%3C%2FA%3E%2C%20also%20i've%20installed%20the%20npm%20package%20for%20ASYNC%20plugin%20but%20no%20good%20luck%3C%2FP%3E%0A%3CP%3E2)%20For%20pagination%20check%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2FPnP-JS-Core%2Fissues%2F706%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehere%3C%2FA%3E%2C%20it%20would%20be%20same%20issue%20for%20updating%20the%20DOM%20using%20Vue%20js.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EPlease%20suggest%20me%20which%20framework%2Ftools%20should%20i%20use%20to%20get%20the%20data%20from%20SharePoint%20and%20then%20apply%20filter%20and%20pagination%20in%20SharePoint%20framework%20client%20side%20webparts%20for%20On%20Premises.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-162146%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Framework%20need%20suggestions%20to%20implement%20paging%20and%20filteration%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-162146%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Rahul%2C%20thanks%20for%20the%20reply%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EActually%20i%20need%20to%20load%20data%20on%20demand%20means%20when%20i%20click%20on%20next%20page%20then%20query%20should%20return%20the%20next%20page%20data.%20btw%20i'm%20able%20to%20done%20it%20using%20SharePoint%20search%20Rest%20API%20supported%20in%20PnP%20JS%20Core.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-161994%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Framework%20need%20suggestions%20to%20implement%20paging%20and%20filteration%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-161994%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Hamid%2C%3C%2FP%3E%0A%3CP%3ESharePoint%20Framework%20by%20design%20support%20Office%20UI%20Fabric%20React%20components.%20I%20have%20used%20Office%20UI%20Fabric%20-%3CA%20title%3D%22DetailList%22%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcomponents%2Fdetailslist%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EDetailList%3C%2FA%3Ecomponent%20for%20similar%20purpose%20by%20loading%20data%20with%20help%20of%20PnP%20JS%20Core%20library.%20With%20DetailList%2C%20you%20don't%20need%20to%20worry%20about%20paging%20as%20it%26nbsp%3Bonly%20renders%20selective%20data%20in%20HTML%20DOM%20and%20as%20user%20scrolls%20the%20page%2C%20it%20loads%20the%20data%20without%20blocking%20user.%20You%20can%20bind%20whole%20data%20set%20in%20one%20go%20with%20DetailList%20and%20it%20will%20take%20care%20of%20render%20part.%20It%20also%20support%20search%20feature%20which%20you%20can%20implement%20easily.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

I'm working on SharePoint Server 2016 and developing client side webparts using SharePoint Framework.

I've a requirement to filter the data and adding the pagination, I've used the followings till now

1) PnP Core JS (To Perform CRUD operations to SharePoint)

2) VUE JS (To Render the data)

 

ISSUES

1) I'm unable to filter the data as VUE JS computed properties are not working check that thread, also i've installed the npm package for ASYNC plugin but no good luck

2) For pagination check here, it would be same issue for updating the DOM using Vue js.

 

Please suggest me which framework/tools should i use to get the data from SharePoint and then apply filter and pagination in SharePoint framework client side webparts for On Premises.

 

Thanks

2 Replies
Highlighted

Hi Hamid,

SharePoint Framework by design support Office UI Fabric React components. I have used Office UI Fabric -DetailList component for similar purpose by loading data with help of PnP JS Core library. With DetailList, you don't need to worry about paging as it only renders selective data in HTML DOM and as user scrolls the page, it loads the data without blocking user. You can bind whole data set in one go with DetailList and it will take care of render part. It also support search feature which you can implement easily.

 

 

Highlighted

Hi Rahul, thanks for the reply

 

Actually i need to load data on demand means when i click on next page then query should return the next page data. btw i'm able to done it using SharePoint search Rest API supported in PnP JS Core.