Enhancement for #119

Author: estruyf

CHANGELOG.JSON

@@ -7,7 +7,8 @@
         "enhancements": [
           "`PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)",
           "`WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)",
-          "`WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)"
+          "`WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)",
+          "`ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)"
         ],
         "fixes": []
       },

CHANGELOG.md

@@ -7,6 +7,7 @@
 - `PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)
 - `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)
 - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
+- `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)
 
 ## 1.7.0
 

docs/documentation/docs/about/release-notes.md

@@ -7,6 +7,7 @@
 - `PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)
 - `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)
 - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
+- `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)
 
 ## 1.7.0
 

docs/documentation/docs/controls/ListView.md

@@ -82,6 +82,7 @@ The `IViewField` has the following implementation:
 | sorting | boolean | no | Specify if you want to enable sorting for the current field. |
 | maxWidth | number | no | Specify the minimum width of the column. |
 | maxWidth | number | no | Specify the maximum width of the column. |
+| isResizable | boolean | no | Determines if the column can be resized. |
 | render | function | no | Override how the field has to get rendered. |
 
 The `IGrouping` has the following implementation:

src/controls/listView/IListView.ts

@@ -1,6 +1,5 @@
 import { Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
 import { IColumn, IGroup } from 'office-ui-fabric-react/lib/components/DetailsList';
-import { IDetailsListProps } from "office-ui-fabric-react/lib/DetailsList";
 
 export { SelectionMode };
 
@@ -45,10 +44,6 @@ export interface IListViewProps {
    * The index of the items to be select by default
    */
   defaultSelection?: number[];
-  /**
-   * Specify direct properties for the DetailsList component
-   */
-  detailsListProps?: IDetailsListProps;
 }
 
 export interface IListViewState {
@@ -102,6 +97,10 @@ export interface IViewField {
    * Specify the maximum width of the column
    */
   maxWidth?: number;
+  /**
+   * Determines if the column can be resized.
+   */
+  isResizable?: boolean;
   /**
    * Override the render method of the field
    */

src/controls/listView/ListView.tsx

@@ -277,6 +277,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
         fieldName: field.name,
         minWidth: field.minWidth || 50,
         maxWidth: field.maxWidth,
+        isResizable: field.isResizable,
         onRender: this._fieldRender(field),
         onColumnClick: this._columnClick
       });
@@ -399,8 +400,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
           layoutMode={DetailsListLayoutMode.justified}
           compact={this.props.compact}
           setKey="ListViewControl"
-          groupProps={groupProps}
-          {...this.props.detailsListProps} />
+          groupProps={groupProps} />
       </div>
     );
   }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -143,27 +143,32 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         name: 'ListItemAllFields.Id',
         displayName: 'ID',
         maxWidth: 40,
-        sorting: true
+        sorting: true,
+        isResizable: true
       },
       {
         name: 'ListItemAllFields.Underscore_Field',
         displayName: "Underscore_Field",
-        sorting: true
+        sorting: true,
+        isResizable: true
       },
       {
         name: 'Name',
         linkPropertyName: 'ServerRelativeUrl',
-        sorting: true
+        sorting: true,
+        isResizable: true
       },
       {
         name: 'ServerRelativeUrl',
         displayName: 'Path',
         render: (item: any) => {
           return <a href={item['ServerRelativeUrl']}>Link</a>;
-        }
+        },
+        isResizable: true
       },
       {
-        name: 'Title'
+        name: 'Title',
+        isResizable: true
       }
     ];