DetailsList with resizable columns

gistfile1.txt

/**
 * @Copyright (c) Microsoft Corporation.  All rights reserved.
 *
 * @file TraceDisplay.tsx
 */

import * as React from 'react';

import {
  DetailsList,
  Selection,
  MarqueeSelection,
  DetailsListLayoutMode,
  IColumn,
  ConstrainMode,
  SelectionMode,
  ColumnActionsMode,
  Link,
  TextField
} from '../../../DeveloperToolsFabric';

// import LogEvent from '@ms/sp-telemetry/lib/Api/LogEvent';
import styles from './TraceDisplay.module.scss';
// import TraceDisplayStore, { ITraceFilter } from './../../../Stores/TraceDisplayStore';
// import TraceList from './TraceList/TraceList';

const columns: IColumn[] = [
  {
    key: 'score',
    name: 'Score',
    fieldName: 'score',
    minWidth: 10,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'team',
    name: 'Team',
    fieldName: 'team',
    minWidth: 10,
    maxWidth: 200,
    isResizable: true
  }
];

export interface item {
  id: number;
  score: number;
  team: string;
}

export default class TraceDisplay extends React.Component<any, any> {
  private _selection: Selection;
  private _items: item[];

  constructor() {
    super();
    
    this._items = [{'id': 0, 'score': 1, 'team': 'Bears'}];

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

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

  }

  public render(): React.ReactElement<{}> {
    let { items, selectionDetails } = this.state;

    return (
       <div>
        <div>{ selectionDetails }</div>
        <TextField
          label='Filter by team:'
          onChanged={ text => this.setState({ items: text ? this._items.filter(i => i.team.toLowerCase().indexOf(text.toLowerCase()) > -1) : this._items }) }
        />
        <MarqueeSelection selection={ this._selection }>
          <DetailsList
            // layoutMode={DetailsListLayoutMode.justified}
            items={ items }
            setKey='set'
            // columns={ columns }
            selection={ this._selection }
            selectionPreservedOnEmptyClick={ true }
            onItemInvoked={ (item) => alert(`Item invoked: ${item.name}`) }
            onRenderItemColumn={ this._onRenderItemColumn }
          />
        </MarqueeSelection>
      </div>
    );
  }

  private _onRenderItemColumn(item, index, column) {
    if (column.key === 'score') {
      return <Link data-selection-invoke={ true }>{ item[column.key] }</Link>;
    }

    return item[column.key];
  }

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

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

}