SharePoint document library view using Fabric React component in SPFx web part

This article explains how to use the Office UI Fabric React DetailsList component to display a SharePoint document library inside an SPFx web part.
The DetailsList control provides a flexible and efficient way to visualize tabular data from SharePoint, complete with sorting, selection, and contextual features.

⚙️ Create a new SPFx web part project

Run the following command to create a new SPFx web part project:

yo @microsoft/sharepoint

When prompted:

• Solution Name: FabricDetailsList
• Target Environment: SharePoint Online only (latest)
• Component Type: Web Part
• Framework: React

📂 Important files

In the new SPFx web part solution, multiple files are generated by default. For this example, we only need to modify the following three files:

1. src/webparts/fabricDetailsList/FabricDetailsListWebPart.ts
2. src/webparts/fabricDetailsList/components/IFabricDetailsListProps.ts
3. src/webparts/fabricDetailsList/components/FabricDetailsList.tsx

🧩 Web part file — FabricDetailsListWebPart.ts

In this file, we create the web part definition and render the React element. We also pass the SharePoint context as a prop so that the component can retrieve list data.

export default class FabricDetailsListWebPart extends BaseClientSideWebPart<IFabricDetailsListWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IFabricDetailsListProps> = React.createElement(
      FabricDetailsList,
      {
        context: this.context
      }
    );

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

🧾 Property file — IFabricDetailsListProps.ts

This interface defines the properties and context passed to the React component.

export interface IFabricDetailsListProps {
  context: any;
}

💻 Component file — FabricDetailsList.tsx

This is the main file where the DetailsList component is configured and SharePoint data is retrieved.

We use PnPjs or SPHttpClient to get the document library data and assign it to the DetailsList for rendering.

import * as React from 'react';
import { DetailsList, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import { sp } from "@pnp/sp/presets/all";
import { IFabricDetailsListProps } from './IFabricDetailsListProps';

export default class FabricDetailsList extends React.Component<IFabricDetailsListProps, any> {

  constructor(props: IFabricDetailsListProps) {
    super(props);
    sp.setup({
      spfxContext: this.props.context
    });

    this.state = {
      items: []
    };
  }

  public async componentDidMount(): Promise<void> {
    const items: any[] = await sp.web.lists.getByTitle("Documents").items.select("Title","Modified","Editor/Title").expand("Editor").get();
    this.setState({ items });
  }

  public render(): React.ReactElement<IFabricDetailsListProps> {
    const columns: IColumn[] = [
      { key: 'name', name: 'Name', fieldName: 'Title', minWidth: 200, maxWidth: 300, isResizable: true },
      { key: 'modified', name: 'Date Modified', fieldName: 'Modified', minWidth: 150 },
      { key: 'author', name: 'Modified By', fieldName: 'Editor.Title', minWidth: 150 }
    ];

    return (
      <DetailsList
        items={this.state.items}
        columns={columns}
        selectionMode={SelectionMode.none}
        setKey="set"
      />
    );
  }
}

🚀 Deploy and test

Once your web part is ready, build and deploy it:

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

Upload the .sppkg package to your App Catalog, and add the web part to any modern SharePoint page.
You’ll see your document library data beautifully displayed using the Fabric DetailsList control.

🔗 GitHub Source

You can download the complete project source from the following GitHub link:
👉 SharePoint document library view using Fabric React component in SPFx web part