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.

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

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

display SharePoint list items in a table using SPFx

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.

Display SharePoint list items in SPFX

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

How to display SharePoint list items in a table using SPFX

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.

get sharepoint list data in spfx

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.

get list data spfx

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 .

get list data using spfx

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

display sharepoint list data in html table using SPFx

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.

Get sharepoint list data using spfx
Get sharepoint list data using spfx

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

Get sharepoint list data using spfx

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

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

  • Iain says:

    Thankyou for the tutorial, I find them very helpful for starting to learn SPFx.

    I have followed this guide up to step 10, uploaded to app catalog but can not find the app when I try to add it to a page.

    Thanks

    Iain

    • Rajkiran Swain says:

      After uploaded inside App catalog , go to Site contents-> Add an apps -> Scroll down -> Check your uploaded app should be show in the page -> Click on it -> Deploy

      Next go to page -> Edit page -> Add Webpart -> It will show ..

  • >