How to display SharePoint list items in a table using SPFX

In this SPFx tutorial, we will discuss how to show SharePoint list items in a table using SPFx (SharePoint Framework).

Display SharePoint list items in SPFX

First, we will create the SPFx client-side web part.

Step 1: Open Node.js command prompt and create a new project as same as the below screenshot.

Step 2: Here I have created a Web part called GetListItemFromSharePointList and I used No JavaScript as a framework.

So after the execution of the above command, our new web part got created successfully in the solution folder.

Now you type code . in the command prompt to open this project in Visual Studio code.

Now you can see the below screenshot where the new web part has been created successfully and the solution looks like below.

Step 3: Next I have created a List in SharePoint as same as the below screenshot.

Step 4: Next Open GetListItemFromSharePointListWebPart.ts and replace the below code.

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './GetListItemFromSharePointListWebPart.module.scss';
import * as strings from 'GetListItemFromSharePointListWebPartStrings';
import {
  SPHttpClient,
  SPHttpClientResponse   
} from '@microsoft/sp-http';
import {
  Environment,
  EnvironmentType
} from '@microsoft/sp-core-library';

export interface IGetListItemFromSharePointListWebPartProps {
  description: string;
}
export interface ISPLists 
{
  value: ISPList[];
}
export interface ISPList 
{
  Title: string;
  Column_x002d_1: string;
  Column_x002d_2 :string;
  column_x002d_3: string;
  column_x002d_4 :string;
  column_x002d_5: string;
  Date :string;
}
export default class GetListItemFromSharePointListWebPart extends BaseClientSideWebPart <IGetListItemFromSharePointListWebPartProps> {

  private _getListData(): Promise<ISPLists>
  {
   return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('ViewListInSharePoint')/Items",SPHttpClient.configurations.v1)
       .then((response: SPHttpClientResponse) => 
       {
       return response.json();
       });
   }
   private _renderListAsync(): void
   {
    if (Environment.type == EnvironmentType.SharePoint || 
             Environment.type == EnvironmentType.ClassicSharePoint) {
     this._getListData()
       .then((response) => {
         this._renderList(response.value);
       });
}
 }
 private _renderList(items: ISPList[]): void 
 {
  let html: string = '<table border=2 width=100% style="font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;">';

  html += '<b><th style="background-color: #af534c;" >Title</th> <th style="background-color: #af534c;">Column-1 </th><th style="background-color: #af534c;">Column-2 </th><th style="background-color: #af534c;">Column-3 </th><th style="background-color: #af534c;">Column-4 </th><th style="background-color: #af534c;">Column-5 </th><th style="background-color: #af534c;">Date</th></b>';

  items.forEach((item: ISPList) => {
    html += `
    <tr>             
        <td>${item.Title}</td>
        <td>${item.Column_x002d_1}</td>
        <td>${item.Column_x002d_2}</td>
        <td>${item.column_x002d_3}</td>
        <td>${item.column_x002d_4}</td> 
        <td>${item.column_x002d_5}</td>
        <td>${item.Date}</td>
        </tr>
        `;
  });

  html += '</table>';
  const listContainer: Element = this.domElement.querySelector('#BindspListItems');
  listContainer.innerHTML = html;
}

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.getListItemFromSharePointList }">
    <div class="${ styles.container }">
      <div class="${ styles.row }">
        <div class="${ styles.column }">
          <span class="${ styles.title }">Get Data from SharePoint List Using SPFX </span>
          </div>
          <br/>
          <br/>
          <br/>
          <div id="BindspListItems" />
          </div>
          </div>
          </div>`;
          this._renderListAsync();
  }

  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
              })
            ]
          }
        ]
      }
    ]
  };
}
}

Step 5: In the above code, there is a section where I declare all columns name as below screenshot. In My list, I have used the below 7 columns to show my items in an HTML table.

Step 6: In this section, I called to list using the REST API. You have to give your list name in this URL.

You can also add more filter over here like order by, like, or select.

Step 7: In this section, I have created a Table header plus bind the columns with td in the table and finally bind with DIV id which will render the data.

Step 8: In this section, I added a Div and show my HTML contents over here.

Step 9: Next go to your command prompt and execute this code using below command.

• gulp clean
• gulp build
• gulp serve
• gulp bundle –ship
• gulp package-solution -ship

So you can run the above command as per the order. So once you click on gulp serve, it will open a new page where you have to add your newly added web part.

After adding the new SPFx web part, page will look empty. The result will come after added this web part to your SharePoint Online site.

Step 10: Next what we will do, prepare a package, and upload the package in our SharePoint App Catalog site. So we have to prepare the package using the above command which is in step-8. After creating the package, we have to upload in App catalog site which is the same as the below screenshot.

Step 11: After adding your Web part to the page, the output will look like the below screenshot.

In this tutorial, we learned how to display SharePoint list items in a table using the SPFx client-side web part.

If you are new to SPFX, you can check out the below tutorials:

• How to set up development environment for SharePoint framework
• How to get user details using Microsoft Graph API in SPFx
• How to Send Email with Attachments using Graph API in SPFx (React JS)
• SPFx Application Customizer Example – An Analog Clock with React
• How to use bootstrap in SPFx webpart
• Error TS2307 Cannot find module @pnp/sp/presets/all in SPFx
• How to use office UI fabric react groupedlist in SPFx web part