I need to fetch data from document library which resides in SharePoint online and display in spfx client web part with filtering, paging and sorting features.
Tools: ReactJs, TypeScript, Visual Studio code, gulp
Any demo samples or references would be great.
Thanks in advance.
You can use the get method to get the all the fields values from the Document library.
Code:
@autobind
private GetListItems(): void {
this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items?$select=fieldNames`,
SPHttpClient.configurations.v1,
{
headers: {
'Accept': 'application/json;odata=nometadata',
'odata-version': ''
}
})
.then((response: SPHttpClientResponse): Promise<{ value: IListItem[] }> => {
return response.json();
})
.then((response: { value: IListItem[] }): void => {
//Write your logic to form the json object from response
}, (error: any): void => {
this.setState({
status: 'Loading all items failed with error: ' + error,
});
});
}
Once you formed the json object, you can use the "material-ui-datatables" to achieve the sorting, filtering and paging functionality. You have to just pass the JSON object to this component.
Please find the reference below
pnp.sp.web.getFolderByServerRelativeUrl("/sites/dev/Shared Documents/test").getItem().then(item => {
console.log(item);
});
pnp.sp.web.getFolderByServerRelativeUrl("/sites/dev/Shared Documents/test").getItem("Title", "Modified").then(item => {
console.log(item);
});
pnp.sp.web.getFolderByServerRelativeUrl("/sites/dev/Shared Documents/test").getItem().then(item => {
// you can also chain directly off this item instance
item.getCurrentUserEffectivePermissions().then(perms => {
console.log(perms);
});
});
References:
Titleof a document isFileLeafReffield. To find if the document is Checked Out useCheckoutUserfield, that will tell you the user who checked out the document.