DetailsList

link - developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

canResizeColumns - false
checkboxVisibility = CheckboxVisibility.hidden
isHeaderVisible = false
isSortedDescending = true
layoutMode = LayoutMode.justified
selectionMode = SelectionMode.single
sortedColumnKey = 'column1'
isLazyLoaded = false

you cannot hard code the "items" - you must use a method_getItems() method

import * as React from 'react';  
import { TextField } from 'office-ui-fabric-react/lib/TextField';  
import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric-react/lib/DetailsList';  
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';  
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';  
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';  

const exampleChildClass = mergeStyles({ 
  display: 'block',  
  marginBottom: '10px'  
}); 

export interface IDetailsListBasicExampleItem { 
  key: number; 
  name: string; 
  value: number; 
} 

export interface IDetailsListBasicExampleState { 
  items: IDetailsListBasicExampleItem[]; 
  selectionDetails: {}; 
} 

export class DetailsListBET extends React.Component<{}, IDetailsListBasicExampleState> { 
  private _selection: Selection; 
  private _allItems: IDetailsListBasicExampleItem[]; 
  private _columns: IColumn[]; 

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

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

    // Populate with items for demos. 
    this._allItems = []; 
    for (let i = 0; i < 200; i++) { 
      this._allItems.push({ 
        key: i, 
        name: 'Item ' + i, 
        value: i 
      }); 
    } 

    this._columns = [ 
      { key: 'column1', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },  
      { key: 'column2', name: 'Value', fieldName: 'value', minWidth: 100, maxWidth: 200, isResizable: true }  
    ]; 

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

  public render(): JSX.Element { 

    return ( 
      <Fabric> 
        <div className={exampleChildClass}> {this.state.selectionDetails} </div> 
        <TextField 
          className={exampleChildClass} 
          label="Filter by name:" 
          onChange={this._onFilter} 
          styles={{ root: { maxWidth: '300px' } }}  
        /> 
        <MarqueeSelection selection={this._selection}> 
          <DetailsList 
            items={this.state.items} 
            columns={this._columns} 
            setKey="set" 
            layoutMode={DetailsListLayoutMode.fixedColumns} 
            selection={this._selection} 
            selectionPreservedOnEmptyClick={true} 
            ariaLabelForSelectionColumn="Toggle selection" 
            ariaLabelForSelectAllCheckbox="Toggle selection for all items" 
            onItemInvoked={this._onItemInvoked} 
          /> 
        </MarqueeSelection> 
      </Fabric> 
    ); 
  } 

  private _getSelectionDetails(): string { 
    const selectionCount = this._selection.getSelectedCount(); 

    switch (selectionCount) { 
      case 0: 
        return 'No items selected'; 
      case 1: 
        return '1 item selected: ' + (this._selection.getSelection()[0] as IDetailsListBasicExampleItem).name; 
      default: 
        return '${selectionCount} items selected'; 
    } 
  } 

  private _onFilter = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string): void => { 
    this.setState({ 
      items: text ? this._allItems.filter(i => i.name.toLowerCase().indexOf(text) > -1) : this._allItems 
    }); 
  }; 

  private _onItemInvoked = (item: IDetailsListBasicExampleItem): void => { 
    alert('Item invoked: ${item.name}'); 
  }; 
}