Creating a Static DetailsList with Fluent UI

In this article, we’ll explore how to create a static DetailsList using Microsoft’s Fluent UI in a React application. This component allows you to present tabular data with powerful features like sorting, filtering, and selection.

Prerequisites

To follow along, make sure you have the following installed:

Node.js (preferably the latest LTS version)
npm (comes with Node.js)
A React application set up (you can use Create React App for simplicity)

Setting Up Fluent UI

First, install the Fluent UI library in your React project:

npm install @fluentui/react

The Code

Now, let’s dive into the implementation. Below is the code to create a DetailsList with 30 static items.

import * as React from 'react';
import { TextField } from '@fluentui/react/lib/TextField';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { Announced } from '@fluentui/react/lib/Announced';
import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IColumn } from '@fluentui/react/lib/DetailsList';
import { MarqueeSelection } from '@fluentui/react/lib/MarqueeSelection';
import { mergeStyleSets } from '@fluentui/react/lib/Styling';
import { TooltipHost } from '@fluentui/react';
import { Text } from '@fluentui/react/lib/Text';
import { Link } from '@fluentui/react/lib/Link';

const classNames = mergeStyleSets({
  fileIconCell: {
    textAlign: 'center',
  },
  fileIconImg: {
    verticalAlign: 'middle',
    maxHeight: '16px',
    maxWidth: '16px',
  },
  controlWrapper: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  selectionDetails: {
    marginBottom: '20px',
  },
});

export interface IDocument {
  key: string;
  name: string;
  modifiedBy: string;
  dateModified: string;
  fileSize: string;
}

export class DetailsListExample extends React.Component<{}, { items: IDocument[]; selectionDetails: string }> {
  private _selection: Selection;

  constructor(props: {}) {
    super(props);

    const items: IDocument[] = this._generateDocuments();

    this._selection = new Selection({
      onSelectionChanged: () => {
        this.setState({
          selectionDetails: this._getSelectionDetails(),
        });
      },
    });

    this.state = {
      items,
      selectionDetails: this._getSelectionDetails(),
    };
  }

  public render() {
    const { items, selectionDetails } = this.state;

    const columns: IColumn[] = [
      {
        key: 'column1',
        name: 'File Name',
        fieldName: 'name',
        minWidth: 100,
        maxWidth: 200,
        isRowHeader: true,
        isResizable: true,
        onRender: (item: IDocument) => (
          <Link onClick={() => this._onItemInvoked(item)}>{item.name}</Link>
        ),
      },
      {
        key: 'column2',
        name: 'Modified By',
        fieldName: 'modifiedBy',
        minWidth: 100,
        maxWidth: 200,
        isResizable: true,
      },
      {
        key: 'column3',
        name: 'Date Modified',
        fieldName: 'dateModified',
        minWidth: 100,
        maxWidth: 200,
        isResizable: true,
      },
      {
        key: 'column4',
        name: 'File Size',
        fieldName: 'fileSize',
        minWidth: 100,
        maxWidth: 200,
        isResizable: true,
      },
    ];

    return (
      <div>
        <Text>Selected Items: {selectionDetails}</Text>
        <MarqueeSelection selection={this._selection}>
          <DetailsList
            items={items}
            columns={columns}
            selectionMode={SelectionMode.single}
            setKey="set"
            layoutMode={DetailsListLayoutMode.fixedColumns}
            isHeaderVisible={true}
            selection={this._selection}
            onItemInvoked={this._onItemInvoked}
          />
        </MarqueeSelection>
      </div>
    );
  }

  private _generateDocuments(): IDocument[] {
    return Array.from({ length: 30 }, (_, index) => ({
      key: index.toString(),
      name: `Document ${index + 1}`,
      modifiedBy: `User ${index % 5 + 1}`,
      dateModified: new Date().toLocaleDateString(),
      fileSize: `${Math.floor(Math.random() * 100) + 1} KB`,
    }));
  }

  private _getSelectionDetails(): string {
    const selectionCount = this._selection.getSelectedCount();
    return selectionCount === 0
      ? 'No items selected'
      : `${selectionCount} item${selectionCount > 1 ? 's' : ''} selected`;
  }

  private _onItemInvoked(item: IDocument): void {
    alert(`Item invoked: ${item.name}`);
  }
}

Explanation

Imports: We import necessary components from Fluent UI.
Styles: We define some basic styles using mergeStyleSets.
State and Selection: We create a selection object to manage selected items and initialize the state with generated documents.
Columns: The columns array defines the columns of the DetailsList, including the rendering logic for each cell.
Generate Documents: The _generateDocuments function creates 30 static document items with mock data.
Selection Details: The selection details are updated whenever the selection changes.
Render Method: The render method displays the DetailsList wrapped in a MarqueeSelection for multiple item selection.

Running the Example

To run this example:

Create a new React component file, for example, DetailsListExample.tsx.
Copy the code above into that file.
Import and render <DetailsListExample /> in your main application component.

Conclusion

In this article, we successfully created a static DetailsList using Fluent UI in a React application. This powerful component enables developers to create interactive and visually appealing data tables with minimal effort.

Feel free to customize the styles and functionalities further based on your application’s needs!

This example showcases how to implement a DetailsList with static data, providing an interactive experience while adhering to Fluent UI’s design principles.