The PnP SPFx ListView control provides a powerful and flexible way to render list data with filtering, selection, and icons — without building everything from scratch.
Building a Simple ListView in SPFx using PnP Controls
When developing SharePoint Framework (SPFx) solutions, displaying data in a clean and structured way is essential.
The PnP SPFx ListView control provides a powerful and flexible way to render list data with filtering, selection, and icons — without building everything from scratch.
In this article, you will learn how to:
- Create a simple ListView
- Configure columns and data
- Enable filtering and selection
- Add icons using Fluent UI
- Prepare your solution for future integration (ListPicker + real data)
Official documentation:
PNP ListView Control
Installing the Required Library
First, install the PnP controls package:
npm install @pnp/spfx-controls-react –save
Importing Dependencies
Here are the required imports:
import * as React from ‘react’;
import { IListViewWp1Props } from ‘./IListViewWp1Props’;
import { ListView, IViewField, SelectionMode } from “@pnp/spfx-controls-react/lib/ListView”;
import { initializeIcons } from ‘@fluentui/react/lib/Icons’;
Initialize Fluent UI icons:
initializeIcons();
This step is required to ensure icons render properly.
Creating Sample Data
The ListView expects a flat array of objects, similar to SharePoint list items.
const items: any[] = [
{
ID: 1,
Title: “John Doe”,
Description: “Developer”,
FileRef: “Contact”
},
{
ID: 2,
Title: “Jane Smith”,
Description: “Designer”,
FileRef: “Contact”
},
{
ID: 3,
Title: “Project Plan”,
Description: “Document example”,
FileRef: “Document”
}
];
Defining View Fields (Columns)
You must define how data is displayed:
const viewFields: IViewField[] = [
{
name: “Title”,
displayName: “Name”,
sorting: true
},
{
name: “Description”,
displayName: “Description”,
sorting: true
}
];
Each field maps directly to a property in your items.
Implementing the ListView Component
Here is the complete working component:
const ListviewWp1: React.FC<IListViewWp1Props> = (props) => {
const _getSelection = (selectedItems: any[]): void => {
console.log(“Selected items:”, selectedItems);
};
return (
<ListView
items={items}
viewFields={viewFields}
iconFieldName=”FileRef”
compact={true}
selectionMode={SelectionMode.multiple}
selection={_getSelection}
showFilter={true}
defaultFilter=”John”
filterPlaceHolder=”Search…”
stickyHeader={true}
/>
);
};
export default ListviewWp1;
Understanding Key Properties
items
Defines the data source displayed in the ListView.
viewFields
Controls which columns appear and how they behave.
selectionMode
SelectionMode.multiple
Allows selecting multiple rows.
selection
selection={_getSelection}
Callback triggered when selection changes.
Filtering
showFilter={true}
defaultFilter=”John”
filterPlaceHolder=”Search…”
- Enables search box
- Applies default filter
- Improves usability
Icons
iconFieldName=”FileRef”
The ListView will render icons based on this field.
Examples:
DocumentFolderContact
Common Mistakes to Avoid
1. Using hierarchical data
The ListView does NOT support:
children: []
This belongs to TreeView, not ListView.
2. Missing field mapping
If your item does not match viewFields, nothing will render correctly.
3. Forgetting to initialize icons
initializeIcons();
Without this, icons may not appear.
4. Undefined variables
Always ensure variables like:
itemsviewFields- callbacks
are properly defined.
What You Achieved
With this implementation, you now have:
- A functional ListView
- Column-based layout
- Multiple selection support
- Built-in filtering
- Fluent UI icons
Next Step (Recommended)
Now that your ListView is working, the next logical step is to make it dynamic.
Upcoming improvement:
- Add ListPicker
- Let the user select a SharePoint list
- Load data dynamically into ListView
Flow:
ListPicker → Selected List → Fetch data → ListView updates
This transforms your web part into a real-world, production-ready solution.
Conclusion
The PnP ListView control simplifies how you present data in SPFx.
With minimal code, you can build a clean, interactive UI that supports filtering, selection, and icons.
From here, you are ready to evolve into dynamic data scenarios and build more advanced SharePoint solutions.
edvaldo b. guimarães filho 