How to Show a Grid for a SharePoint List Using Fluent UI Only

In this article, we will create a grid using Fluent UI’s DetailsList component to display data from a SharePoint list. Although we will not use PnPjs in this example, you’ll still be able to visualize how Fluent UI works to render tabular data in a SharePoint Framework (SPFx) web part. The data fetching mechanism will rely on SharePoint’s REST API directly.

1. Introduction to Fluent UI

Fluent UI, developed by Microsoft, is a robust and customizable framework used to build user interfaces for Office 365, SharePoint, and other applications. Its DetailsList component offers a grid-like interface to display rows of data, making it ideal for rendering SharePoint list content.

The key goal here is to use Fluent UI in an SPFx web part to fetch and display SharePoint list items in a grid.

2. Prerequisites

Before we begin, ensure you have the following:

• SharePoint Online or SharePoint 2019
• Node.js installed
• SharePoint Framework (SPFx) setup

3. Setting Up the SPFx Web Part

First, create a new SharePoint Framework project using the Yeoman generator:

yo @microsoft/sharepoint

Make sure to choose React as the framework during the setup.

Once the project is generated, install Fluent UI:

npm install @fluentui/react

4. Fetching SharePoint List Data using REST API

Instead of using PnPjs, we’ll use SharePoint’s native REST API to retrieve the list items. In SPFx, this can be done using the @microsoft/sp-http library, which allows us to make HTTP requests to SharePoint.

Add the following code to your React component:

import * as React from 'react';
import { spHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { DetailsList, IColumn } from '@fluentui/react';

interface IListItem {
  Title: string;
  Id: number;
  Created: string;
}

const SharePointGrid: React.FC<{ context: any }> = ({ context }) => {
  const [items, setItems] = React.useState<IListItem[]>([]);

  // Define the columns for your grid
  const columns: IColumn[] = [
    { key: 'column1', name: 'ID', fieldName: 'Id', minWidth: 50, maxWidth: 100, isResizable: true },
    { key: 'column2', name: 'Title', fieldName: 'Title', minWidth: 100, maxWidth: 200, isResizable: true },
    { key: 'column3', name: 'Created Date', fieldName: 'Created', minWidth: 100, maxWidth: 200, isResizable: true },
  ];

  // Fetch SharePoint list items
  React.useEffect(() => {
    const fetchItems = async () => {
      const listUrl = `${context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('MyList')/items`;
      const response: SPHttpClientResponse = await context.spHttpClient.get(listUrl, spHttpClient.configurations.v1);
      const data = await response.json();
      setItems(data.value);
    };

    fetchItems();
  }, [context]);

  return (
    <DetailsList
      items={items} // Your data goes here
      columns={columns} // Your column structure
      setKey="set"
      layoutMode={DetailsListLayoutMode.justified} // Determines the layout style
      selectionPreservedOnEmptyClick={true} // Preserve selection
      onItemInvoked={item => alert(`Item invoked: ${item.Title}`)} // Action when a row is clicked
    />
  );
};

export default SharePointGrid;

5. Key Concepts

1. SPHttpClient:

• This is the SharePoint Framework’s built-in HTTP client to make REST API calls to SharePoint.
• In the example, we are making a GET request to the /_api/web/lists/getbytitle('MyList')/items endpoint to retrieve items from the list named “MyList.”

1. Columns:

• The IColumn[] defines the grid’s structure. Each column is linked to a property of the SharePoint list item (e.g., Title, Id, Created).

1. DetailsList Component:

• This Fluent UI component renders the grid. It takes the items array and columns definition and creates a table.

1. REST API Call:

• The useEffect hook triggers the REST API call to fetch the SharePoint list data when the component mounts.

6. Deploying the Web Part

Once your React component is set up, you can build, bundle, and deploy your SPFx web part.

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, and add the web part to your SharePoint site. You’ll see the data from your SharePoint list displayed in a grid, powered entirely by Fluent UI.

7. Advanced Enhancements

Here are a few additional features you might want to implement:

• Sorting: Implement sorting by column headers.
• Pagination: Handle large lists by adding pagination.
• Filtering: Allow users to search or filter the data.

8. Conclusion

Using Fluent UI’s DetailsList component makes it easy to display data from a SharePoint list in a responsive grid. With native support for REST API calls via SPHttpClient in SPFx, you can quickly fetch and display SharePoint data without needing additional libraries like PnPjs. Fluent UI is highly customizable, making it a great tool for building modern web parts for SharePoint.

9. Summary of Commands

Here’s a quick summary of the most important commands used: