Display SharePoint List Items in a SPFX Web Part [Tabular Format]

Recently, I developed a SharePoint Framework web part to display items from a SharePoint Online list. As a developer, you should know how to do this.

In this tutorial, I will explain how to retrieve SharePoint list items in an SPFx web part using SPHttpClient and PnPJS in both React and No-Frame work web parts. Then I will show how to display those list items in an HTML table in the SPFx web part.

Retrieve SharePoint List Items in SPFx Webpart Using SPHttpClient

In the example below, you can see I have a SharePoint list named ‘ITServiceTicket’ with some data. Now we will try to get all the list items inside the SPFx web part.

Follow the steps below to create an SPFX web part to display list items.

Create SPFx Solution

1. Open the command prompt. Create a directory for the SPFx solution and navigate to it.

md GetSPListItems 
cd GetSPListItems  

2. Run Yeoman SharePoint Generator to create the solution.

yo @microsoft/sharepoint

Yeoman generator will present you with a wizard that asks questions about the solution to be created.

• What is your solution name?: Hit Enter to have a default name (GetSPListItems in this case) or type in any other name for your solution.
• Which type of client-side component to create? Select option – WebPart.
• What is your Web part name?: Hit enter to select the default name or type in any other name. Type name – getSPListItems
• Which template would you like to use?: Select any JavaScript framework to develop the component. Available choices are No Framework, React, and Minimal. Select option – No Framework

3. In the command prompt, type the below command to open the solution in VS Code editor-> ” code .“

4. Go to the “GetSPListItems.ts” file and copy and paste the code below.

import { Version } from '@microsoft/sp-core-library';
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import styles from './GetListItemsWebPart.module.scss';
import * as strings from 'GetListItemsWebPartStrings';
import {SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';
export interface IGetListItemsWebPartProps {
  description: string;
}

export default class GetListItemsWebPart extends BaseClientSideWebPart<IGetListItemsWebPartProps> {

  //private _isDarkTheme: boolean = false;
  //private _environmentMessage: string = '';

  public render(): void {
    this.domElement.innerHTML = `
    <section class="${styles.getListItems}">
      <div>
    <h2>SharePoint List Items</h2>
    <p>Below is the list of IT Service Tickets retrieved from the SharePoint list.</p>
    <div id="spListContainer">Loading data...</div>
    </div>
    </section>`;
     this._getListData()
    .then((response) => {
      this._renderList(response.value);
    })
    .catch((error) => {
      const container: Element | null = this.domElement.querySelector('#spListContainer');
      if (container) {
        container.innerHTML = `<p class="errorMessage">Error: ${error.message}</p>`;
      }
    });
  }
  private _getListData(): Promise<any> {
  const ListUrl = this.context.pageContext.web.absoluteUrl +`/_api/web/lists/getByTitle('ITServiceTicket')/items`;
  return this.context.spHttpClient.get(ListUrl,SPHttpClient.configurations.v1).then((response: SPHttpClientResponse)=>{
    if(!response.ok){
      throw new Error(`Error fetching list data: ${response.statusText}`);
    }
    return response.json();
  });
}
private _renderList(items: any[]): void {
  let html: string = `
    <div class="${styles.tableWrapper}">
      <table class="${styles.itTicketsTable}">
        <thead>
          <tr>
            <th>Title</th>
            <th>Email</th>
            <th>Department</th>
            <th>Computer ID</th>
            <th>Upload File</th>
            <th>Description</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
  `;

  items.forEach(item => {
    html += `
      <tr>
        <td>${item.Title ?? ''}</td>
        <td>${item.Email ?? ''}</td>
        <td>${item.Department ?? ''}</td>
        <td>${item.ComputerID ?? ''}</td>
        <td>${item.WantToUploadAnyFile ? "Yes" : "No"}</td>
        <td>${item.DescribeTheProblem ?? ''}</td>
        <td>${item.Status ?? ''}</td>
      </tr>
    `;
  });

  html += `
        </tbody>
      </table>
    </div>
  `;

  const listContainer: Element | null = this.domElement.querySelector('#spListContainer');
  if (listContainer) {
    listContainer.innerHTML = html;
  }
}

  protected onInit(): Promise<void> {
    return Promise.resolve();
  }
  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

In the above code:

• I have used the SPHttpClient class to perform REST API calls against SharePoint.
• _getListData(): This method is used to get the data from the SharePoint list. To change the list name to yours, provide your list name within the getByTitle().

const ListUrl = this.context.pageContext.web.absoluteUrl +`/_api/web/lists/getByTitle('ITServiceTicket')/items`;

• _renderList(): This method creates an HTML table with headers and rows populated with data from the SharePoint list.
  To update the headers with your column names and fetch data from the fields, update the method below.

private _renderList(items: any[]): void {
  let html: string = `
    <div class="${styles.tableWrapper}">
      <table class="${styles.itTicketsTable}">
        <thead>
          <tr>
            <th>Title</th>
            <th>Email</th>
            <th>Department</th>
            <th>Computer ID</th>
            <th>Upload File</th>
            <th>Description</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
  `;

  items.forEach(item => {
    html += `
      <tr>
        <td>${item.Title ?? ''}</td>
        <td>${item.Email ?? ''}</td>
        <td>${item.Department ?? ''}</td>
        <td>${item.ComputerID ?? ''}</td>
        <td>${item.WantToUploadAnyFile ? "Yes" : "No"}</td>
        <td>${item.DescribeTheProblem ?? ''}</td>
        <td>${item.Status ?? ''}</td>
      </tr>
    `;
  });

  html += `
        </tbody>
      </table>
    </div>
  `;

  const listContainer: Element | null = this.domElement.querySelector('#spListContainer');
  if (listContainer) {
    listContainer.innerHTML = html;
  }
}

• render(): This method calls the above two methods, so whenever we add the webpart, it will fetch the list details and display them in this web part.

5. Then, update your .scss file with the following styles:

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.getListItems {
  padding: 10px;

  h2 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
  }

  p {
    margin-bottom: 12px;
    font-size: 14px;
    color: #333;
  }

  .itTicketsTable {
    width: 100%;
    border-collapse: collapse;
     margin: 0;
    font-size: 14px;
    text-align: left;

    thead {
      background-color: #0078d4; 
      color: white;
      position: sticky;
      top: 0; 
      z-index: 1;
    }

    th,
    td {
      border: 1px solid #ddd;
      padding: 8px 12px;
      word-break: break-word;
      max-width: 250px; /* control long text */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tr:hover {
      background-color: #f1f7ff;
    }
  }

  /* Wrap table in a scrollable container */
  #spListContainer {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
}
.tableWrapper {
  max-width: 100%;
  overflow-x: auto;   
  overflow-y: auto;   
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

6. In the command prompt, run “gulp serve” to test this webpart locally. Once the local workbench page opens, add the web part. SharePoint list items will be displayed in the web part as shown below.

This way, we can easily retrieve SharePoint list items into the SPFx webpart with no framework.

Let us check another example of how to display list items in an SPFx React web part.

Get sharePoint List Items in SPFx React Webpart Using PnPJs

In this section, we are creating an SPFx web part using the React framework and interacting with SharePoint list items via PnPJs.

For this example, I took another SharePoint list named ‘CourseEvaluationDetails.’

So this list contains the following fields:

Follow the above steps to create a client-side web part using SPFx, and ensure that you choose the React framework.

Once you have created the SPFx solution, the project structure looks like this:

Now, to retrieve the SharePoint list details, follow the steps below!

1. Run the following command in the TERMINAL pane. This installs the PnP library in your SPFx webpart.

npm install @pnp/sp --save

2. Once it is installed, open the src/webparts/getListItemsReact/GetListItemsReactWebpart.ts file and write the import statements.

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

3. Create a private variable within the export default class.

 private _sp: SPFI;

4. Add the sp: this._sp within the render() function.

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

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

5. Also, update the OnInit () method with the code below.

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

6. Open IGetListItemsReactProps.ts file and update the props with the below code.

import { SPFI } from "@pnp/sp";
export interface IGetListItemsReactProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  sp: SPFI;
}

7. Open the src/webparts/getListItemsReact/components/GetListItemsReact.tsx file and update the existing code with the code below.

import * as React from 'react';
import styles from './GetSpListItemsReact.module.scss';
import type { IGetSpListItemsReactProps } from './IGetSpListItemsReactProps';
interface IGetSpListItemsReactState {
  items: any[];
}
export default class GetSpListItemsReact extends React.Component<IGetSpListItemsReactProps,IGetSpListItemsReactState> {
  constructor(props: IGetSpListItemsReactProps) {
    super(props);
    this.state = {
      items: [],
    };
  }
  public async componentDidMount(): Promise<void> {
  try {
    const items = await this.props.sp.web.lists
      .getByTitle("CourseEvaluationDetails")
      .items
      .select(
        "Id",
        "Title",
        "CourseDescription",
        "CourseFee",
        "SingleInstructor/Title",
        "MultiInstructors/Title"
      )
      .expand("SingleInstructor", "MultiInstructors")();

    this.setState({ items });
  } catch (error) {
    console.error("Error fetching list items:", error);
  }
}
  public render(): React.ReactElement<IGetSpListItemsReactProps> {
  return (
    <section className={styles.getSpListItemsReact}>
      {/* Heading stays outside */}
      <h3>Course Evaluation List Details</h3>

      {/* Scrollable container only for the table */}
      <div className={styles.tableWrapper}>
        <table className={styles.table}>
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>CourseDescription</th>
              <th>SingleInstructor</th>
              <th>CourseFee</th>
              <th>MultiInstructors</th>
            </tr>
          </thead>
          <tbody>
            {this.state.items.map((item) => (
              <tr key={item.Id}>
                <td>{item.Id}</td>
                <td>{item.Title}</td>
                <td>{item.CourseDescription}</td>
                <td>{item.SingleInstructor?.Title}</td>
                <td>{item.CourseFee}</td>
                <td>
                  {(item.MultiInstructors || []).map((instr: any, index: number) => (
                    <div key={index}>{instr.Title}</div>
                  ))}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}
}

In the above code:

• interface IGetListItemsReactState{..} = Here, we created an interface where we are defining the items: any[] array.
• constructor(props: IGetListItemsReactProps) {..} = To initialise the state, we are using this constructor.
• componentDidMount() = This method runs once when the component is added to the page. Here, we fetch the data and update the component.
• render() = This method contains the HTML table that stores SharePoint list details.

8. Also, please add the below styles in the .scss file:

@import '~@fluentui/react/dist/sass/References.scss';

.getSpListItemsReact {
  padding: 12px;

  h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
  }
}

.tableWrapper {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  margin: 0;

  thead {
    background-color: #0078d4;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 250px;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  tr:hover {
    background-color: #f1f7ff;
  }
}

9. Once the code is ready, run the following command to open the local workbench.

gulp serve

Provide the SharePoint site URL to the “initialPage” parameter in the serve.json file, so that the local workbench opens with that site.

10. After adding the web part, you will see the output image as shown below.

This is how to retrieve sharepoint list items using SPFX React.

I hope you found this article helpful! In this article, I have explained two different ways [With No framework, React] to retrieve SharePoint list details into the SPFx webpart. Additionally, I explained how to utilise SPHTTP classes and the PNPJS library to interact with SharePoint lists.

You may also like the following SPFx tutorials:

• Bind Dropdown from SharePoint List in SPFx (SPHttpClient, PnPJS, Graph)
• SPFx Accordion Webpart Example
• Bind SharePoint List Items to SPFx fluent ui react dropdown example
• How to use office UI fabric react groupedlist in SPFx web part
• SharePoint online spfx script editor web part

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.