How to use list's views in ListView control?

Iron Contributor

Hi everyone,


I have a SPFx web part that get items from a Sharepoint list and it render them inside a ListView control. I have small issues when showing date (2019-03-12T12:00:00Z instead of 2019-03-12) and the item's title is no longer a link, but I still looking at that. The real question is the following:

I added a Dropdown component to the web part that fetchs the list's views, my idea is use this dropdown component to update the List component with the corresponding view, similar to the behaviour that sharepoint has when showing a list and the user change the view. 

I have the data fom the list and I have the dropdown shoing the view's names, how can I connect this two components? 

This is how I am fetching the views and items in a file called dataprovider: 


public async getViews(): Promise<Views[]> {
let View: Views[] = [];
const views = await sp.web.lists.getById('823e0102-5928-4f8a-bcda-f1794bd9026b').views.get();
views.forEach(view => {
Title: view.Title
return new Promise<Views[]>(async(resolve) => {

public async getAgreements(): Promise<Agreement[]> {
let select = '*';
let Agreements: Agreement[] = [];
const items = await sp.web.lists.getById('823e0102-5928-4f8a-bcda-f1794bd9026b').items
items.forEach(item => {
Title: item.Title,
CustomerAgreementNr: item.CustomerAgreementNr,
return new Promise<Agreement[]>(async(resolve) => {


And here is how I render the list and the dropdown:


import * as React from 'react';
import styles from './AgreementContainer.module.scss';
import { IAgreementDataProvider } from "../interface/IAgreementDataProvider";
import Agreement from "./Agreement";
import Views from "./Views";
import { ListView, IViewField } from "@pnp/spfx-controls-react/lib/ListView";
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';

export interface IAgreementContainerProps {
provider: IAgreementDataProvider;

export interface IAgreementContainerState {
agreements: Agreement[];
views: Views[];

export default class AgreementContainer extends React.Component<IAgreementContainerProps, IAgreementContainerState> {
constructor(props: IAgreementContainerProps) {
this.state = {
agreements: [],
views: []

private viewFields: IViewField[] = [
name: "Title",
linkPropertyName: "Title.ServerRelativeUrl",
displayName: "Agreement Name",
maxWidth: 25,
minWidth: 25,
sorting: true,
isResizable: true

public componentDidMount(): void {
this.props.provider.getAgreements().then((agreements) => {
agreements: agreements
this.props.provider.getViews().then((views) => {
views: views

public render(): JSX.Element {
let viewArray = [];
{, index) =>
viewArray.push({key:view.Title, Title:view.Title})
return (
<div className={ styles.agreementDatabase }>
label="Filter label"
options={ => {return {key:view.ID, text:view.Title}})}
items = {this.state.agreements}


Any idea how to implement such view control?


Best regards


0 Replies