PnP ListView in the SharePoint Framework (SPFx) web part

This article provides steps to implement the PnP ListView control in the SharePoint Framework (SPFx).
Generally, ListView control can be used to make fully custom list tiles for SharePoint Lists or Libraries.

⚙️ Create a new web part project

Run the following command to create a new web part using the Yeoman SharePoint Generator:

yo @microsoft/sharepoint

📦 Install the required dependencies

npm install @pnp/sp --save
npm install @pnp/spfx-controls-react --save
npm install moment --save

🧩 SpfxPnpListview.tsx

import * as React from 'react';
import { IViewField } from "@pnp/spfx-controls-react/lib/ListView";
import * as moment from 'moment';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import styles from './SpfxPnpListview.module.scss';

export interface ISpfxPnpListviewProps {
  description: string;
  context: any;
}

export interface ISpfxPnpListviewState {
  items: any[];
  viewFields: IViewField[];
}

export default class SpfxPnpListview extends React.Component<ISpfxPnpListviewProps, ISpfxPnpListviewState> {
 
  constructor(props: ISpfxPnpListviewProps, state: ISpfxPnpListviewState) {
    super(props);
    sp.setup({
      spfxContext: this.props.context
    });
    var _viewFields: IViewField[] = [
      {
        name: "Name",
        linkPropertyName: "ServerRelativeUrl",
        displayName: "Name",
        sorting: true,
        minWidth: 250,
      },
      {
        name: "Author.Title",
        displayName: "Author",
        sorting: false,
        minWidth: 200,
        render: (item: any) => {
          const authoremail = item['Author.UserPrincipalName'];
            return <a href={'mailto:'+authoremail}>{item['Author.Title']}</a>;
        }
      },
      {
        name: "TimeCreated",
        displayName: "Created",
        minWidth: 150,
        render: (item: any) => {
          const created = item["TimeCreated"];
          if (created) {
            const createdDate = moment(created);
            return <span>{createdDate.format('DD/MM/YYYY HH:mm:ss')}</span>;
          }
        }
      }
    ];
    this.state = { items: [], viewFields: _viewFields };
    this._getfiles();
  }

  public render(): React.ReactElement<ISpfxPnpListviewProps> {
    return (
      <div className={styles.spfxPnpListview}>
        <ListView
          items={this.state.items}
          viewFields={this.state.viewFields}
          iconFieldName="ServerRelativeUrl"
          compact={true}
          selectionMode={SelectionMode.multiple}
          selection={this._getSelection}
          showFilter={true}
          filterPlaceHolder="Search..." />
      </div>
    );
  }

  private async _getfiles() {
    const allItems: any[] = await sp.web.getFolderByServerRelativeUrl("/sites/TheLanding/Shared Documents").files();
    this.setState({ items: allItems });
  }
}

🚀 Deploy the solution

Run the gulp commands to build, bundle, and package the solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, deploy it, and add the PnP ListView web part to your SharePoint page.

📂 GitHub Source

View full SPFx project on GitHub:PnP ListView in the SharePoint Framework (SPFx) web part

GitHub

✅ Summary

This article demonstrated how to use the PnP ListView control to render SharePoint List or Library data efficiently in the SPFx web part.
It provides a clean, customizable interface for displaying items with sorting, filtering, and modern UI flexibility.