SharePoint Framework (SPFx) Fluent UI Basic List Example

In this article, we will learn how to use the Fluent UI basic list control in the SPFx webpart. Using this control, we can display up to 5,000 SharePoint list items with the selection feature, apply filters, and display data in various layouts, including a grid and the default layout.

Download Complete SPFx Solution

Table of Contents:

Fluent UI React Basic List Control In SPFx Webpart

Before we start with an example of using the Fluent UI List control in SPFx webpart, we first look at the required imports and the basic syntax of the List component. We’ll also understand what each property does.

import { List } from '@fluentui/react/lib/List';

<List
  className={classNames.listGridExample}
  items={items}
  getItemCountForPage={getItemCountForPage}
  getPageHeight={getPageHeight}
  renderedWindowsAhead={4}
  onRenderCell={onRenderCell}
/>

Here, we are importing List control from the @fluentui/react/lib/List library.
className = It applies custom styling to the List using a SCSS class.
items = The data source for the List, an array of objects that you want to display.
getItemCountForPage = It defines how many items should be rendered per page, used for performance.
getPageHeight = It specifies the height of each page, so the List can calculate scrolling behavior.
renderedWindowsAhead = It determines how many additional “windows” pages should be pre-rendered for smoother scrolling.
onRenderCell – A callback function that defines how each individual item should appear in the List.

Now, let’s see how to use this control to display SharePoint list items dynamically. In the example below, you can see that I have retrieved 5,000 items from my SharePoint list and displayed them in the Fluent UI basic list control.

Additionally, I have added a text input control at the top of that to filter the items based on order ID or Customer Name. At the bottom, you can see the count of items present in the list control. This basic list control won’t contain columns by default, so I added the column names before the item.

We can get up to 5000 SharePoint list items per query using PnPJS in the SPFx webpart. If you want to retrieve items beyond that, you need to use pagination.

Below is the SharePoint list named “MonthlyOrders” containing the items more than 5k.

fluent ui react basic list control in SPFx

This SharePoint list contains the following fields:

Column Name	Data Type
Order ID	Single line of text
Customer Name	Single line of text
Order Date	Date and Time
Order Amount	Currency

Follow the steps below to achieve this!

Open Node.js command prompt in administrator mode. You can also use the Windows Command Prompt or PowerShell Command Prompt. Run the below command:

md FluentUIBasicList

cd FluentUIBasicList

Then, in the same directory, run the following command.

yo @microsoft/sharepoint

Now, it will ask you a few details, like below:

What is your solution name? fluent-ui-basic-list
Which type of client-side component to create? WebPart
Add new Web part to solution fluent-ui-basic-list.
What is your Web part name? FluentUIBasicListDemo
Which template would you like to use? React

It will then take some time to create the solution. Once it is created, follow the steps below to install and set up the PnP JS and the Fluent UI React controls.

npm install @pnp/sp --save

Also, run the below command to install Fluent UI into the solution.

npm install @fluentui/react

To import the PnP JS library into the solution, add the following statements in the “FluentUiBasicListDemo.ts” file.

import { spfi, SPFx } from "@pnp/sp";
import { SPFI } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/fields";

PnP needs to be initialized with the SharePoint context to connect properly to the SharePoint site. So, update your onInit() as below.

protected onInit(): Promise<void> {
    return this._getEnvironmentMessage().then(message => {
      this._environmentMessage = message;
      this._sp = spfi().using(SPFx(this.context));
    });
  }

To hold the instance of the SPFI, create a private variable within the export default class in the “FluentUiBasicListDemo.ts” file.

  private _sp: SPFI

Also, update the render() function within the “FluentUiBasicListDemo.ts” file, which will take this._sp as a prop.

 public render(): void {
    const element: React.ReactElement<IFluentUiBasicListDemoProps> = React.createElement(
      FluentUiBasicListDemo,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        sp:this._sp,
        context:this.context,
      }
    );

    ReactDom.render(element, this.domElement);
  }

We also need to include the sp as a prop in the Props.ts file.

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { SPFI } from "@pnp/sp";
export interface IFluentUiBasicListDemoProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  sp:SPFI;
  context: WebPartContext
}

Now, open the “FluentUiBasicListDemo.tsx” and update its code with the one below.

import * as React from 'react';
import styles from './FluentUiBasicListDemo.module.scss';
import type { IFluentUiBasicListDemoProps } from './IFluentUiBasicListDemoProps';
import { Spinner } from '@fluentui/react/lib/Spinner';
import { List } from '@fluentui/react/lib/List';
import { TextField } from '@fluentui/react/lib/TextField';

interface IListItem {
  OrderID: string;
  CustomerName: string;
  OrderDate: string;
  OrderAmount: number;
}

interface IFluentUiBasicListDemoState {
  items: IListItem[];
  filteredItems: IListItem[];
  loading: boolean;
  filterText: string;
}

export default class FluentUiBasicListDemo extends React.Component<IFluentUiBasicListDemoProps, IFluentUiBasicListDemoState> {

  constructor(props: IFluentUiBasicListDemoProps) {
    super(props);
    this.state = {
      items: [],
      filteredItems: [],
      loading: true,
      filterText: ''
    };
  }

  public async componentDidMount(): Promise<void> {
    await this._loadItems();
  }

  private async _loadItems(): Promise<void> {
  try {
    const items: IListItem[] = await this.props.sp.web.lists
      .getByTitle("MonthlyOrders")