Using Fluent UI DetailsList in SharePoint Framework (SPFx)

The Fluent UI DetailsList control is a powerful component to display large sets of data in a tabular format in your SPFx web parts. It allows you to render items in a customizable, interactive list with column sorting, row selection, and data grouping.

Steps to Integrate DetailsList in SPFx

1. Install Fluent UI: Make sure Fluent UI is installed in your SPFx project.

   npm install @fluentui/react

2. Create Your Web Part: Use the Yeoman generator for SPFx to scaffold a web part.
3. Import DetailsList: In your React component file (e.g., MyDetailsListComponent.tsx), import the DetailsList component and necessary types:

   import { DetailsList, IColumn } from '@fluentui/react';

4. Define Your Columns: Define columns to display specific fields from your data:

   const columns: IColumn[] = [
     { key: 'column1', name: 'Title', fieldName: 'Title', minWidth: 100, maxWidth: 200 },
     { key: 'column2', name: 'Description', fieldName: 'Description', minWidth: 100, maxWidth: 300 }
   ];

5. Bind Data: Use SharePoint’s PnPjs or REST API to fetch list data, and bind it to the DetailsList:

   const items = [
     { key: '1', Title: 'Item 1', Description: 'Description of Item 1' },
     { key: '2', Title: 'Item 2', Description: 'Description of Item 2' }
   ];

6. Render the DetailsList: Use the DetailsList component to render your data inside your render method:

   <DetailsList
     items={items}
     columns={columns}
     selectionMode={0} // none, single, or multiple selection
   />

Example Code

import * as React from 'react';
import { DetailsList, IColumn } from '@fluentui/react';

const columns: IColumn[] = [
  { key: 'column1', name: 'Title', fieldName: 'Title', minWidth: 100, maxWidth: 200 },
  { key: 'column2', name: 'Description', fieldName: 'Description', minWidth: 100, maxWidth: 300 }
];

const items = [
  { key: '1', Title: 'Item 1', Description: 'Description of Item 1' },
  { key: '2', Title: 'Item 2', Description: 'Description of Item 2' }
];

export default class MyDetailsListComponent extends React.Component {
  public render(): React.ReactElement {
    return (
      <div>
        <DetailsList
          items={items}
          columns={columns}
          selectionMode={0} // none, single, or multiple selection
        />
      </div>
    );
  }
}

Advantages of Using DetailsList

• Sorting & Filtering: The columns can be made interactive to support sorting and filtering.
• Data Visualization: Displays SharePoint list data in an organized, easy-to-navigate format.
• Customizability: You can customize the look, feel, and functionality of the list to match the requirements of your SharePoint site.

Conclusion

Integrating Fluent UI’s DetailsList into your SPFx projects enhances the user experience by providing a dynamic way to display data. It is especially useful for rendering SharePoint list items, offering features like sorting and grouping to help users manage large datasets.

For further reading, check out the official Fluent UI DetailsList documentation.