DetailsList now resets columns correctly when they change based on new items passed in

.pullapprove.yml

@@ -11,5 +11,7 @@ reviewers:
   - mikewheaton
   - dzearing
   - cliffkoh
+  - aditima
+  - yiminwu
   name: pullapprove
   required: 1

.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+node_js:
+- '4.2'
+before_script:
+- npm install -g gulp
+script: gulp
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: kLwlKSvDBoGsYP0p+64JnW5kmSpZfSmt2YxKKwWFcThlsiftbZtUILWFVpPd7A5yymsYuOONZTXppaW00OWaH1Bqs6yVHOn3kVQzE7VK/FtVwGZnqFfF0ea0pYYfto3OIFnyZ86vZ0M8u2A+3FGqjGYT1y3RDbG5GqhURBNd+KBhHrMS+pSaGDgEjskslLeQ+QtQ1/t17j0ZQZeYpxl+qFKislR1djeF0pkOjaoJ8wAUB77E0RhVyKP4cOyvtiF9E8nmnaurNYuabZqFMzOg0PgzMhh6xWv10aGF7jNzgojzCix/grCJR1gdfaE6epPGkrufK1nFjCVb60Z+jHZmuhXrW80Qa9AsMbNkXLlm9g6OLm63Ub2xqNQ5338NteGygWj8FRYe7ZngQ/vAY7SK44oA6+QRJAcpV6ieUFeIN8oEoZ42TJjUuKa6xaRVxuRQs2yobB3GzE4QioWLtqlDo+jbkzc0uFUpQHfErH5pHa7+qHDawiY9sO41lKvds6KfD3PXqHJxdokQh5nRB28k0eN+rFiSyvimDmerqBeG0U2oVJuYGVwGZSMKkOXGoZjZaCOFkPaZcS+HQZ+iDYpqEoB1jF1iYgkknZQLDlprWywjXEy/u2C2Bkd1K31aFCwYxrxkgGquii1ugUFVrjCpNLbeeoKALx5JapDfyAUVF+U=
+  on:
+    tags: true
+    repo: OfficeDev/office-ui-fabric-react

src/components/DetailsList/DetailsList.tsx

@@ -391,7 +391,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
 
   /** Returns adjusted columns, given the viewport size and layout mode. */
   private _getAdjustedColumns(newProps: IDetailsListProps, forceUpdate?: boolean, layoutMode?: DetailsListLayoutMode): IColumn[] {
-    let { columns: newColumns, viewport: { width: viewportWidth }, selectionMode } = newProps;
+    let { columns: newColumns, items: newItems, viewport: { width: viewportWidth }, selectionMode } = newProps;
 
     if (layoutMode === undefined) {
       layoutMode = newProps.layoutMode;
@@ -412,7 +412,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       viewportWidth = this.props.viewport.width;
     }
 
-    newColumns = newColumns || buildColumns(this.props.items);
+    newColumns = newColumns || buildColumns(newItems);
 
     let adjustedColumns: IColumn[];
 

src/demo/pages/DetailsListPage/examples/DetailsList.Basic.Example.tsx

@@ -2,16 +2,35 @@
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import {
-  DetailsList
+  DetailsList,
+  TextField
 } from '../../../../index';
 import { createListItems } from '../../../utilities/data';
 
 let _items: any[];
 
-export const DetailsListBasicExample = () => {
- _items = _items || createListItems(500);
+export class DetailsListBasicExample extends React.Component<any, any> {
+  constructor() {
+    super();
+
+    _items = _items || createListItems(500);
+    this.state = { filterText: '' };
+  }
+
+  public render() {
+    let { filterText } = this.state;
+    let items = this.state.filterText ? _items.filter(i => i.name.toLowerCase().indexOf(filterText) > -1) : _items;
+
+    return (
+      <div>
+        <TextField
+          label='Filter by name:'
+          onChanged={ text => this.setState({ filterText: text }) }
+        />
+        <DetailsList items={ items } shouldApplyApplicationRole= { true } setKey='set' />
+      </div>
+    );
+  }
+
+}
 
-  return (
-    <DetailsList items={ _items }  shouldApplyApplicationRole= { true }/>
-  );
-};