#822: ListView: add isMultiline support to IViewField for multiline text columns

docs/documentation/docs/controls/ListView.md

@@ -198,6 +198,7 @@ The `IViewField` has the following implementation:
 | minWidth         | 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.                                                    |
+| isMultiline      | boolean  | no       | Determines if the column should be rendered as multiline. Has no effect when a custom `render` function is provided.    |
 | render           | function | no       | Override how the field has to get rendered.                                                 |
 
 The `IGrouping` has the following implementation:

src/controls/listView/IListView.ts

@@ -152,6 +152,10 @@ export interface IViewField {
    * Determines if the column can be resized.
    */
   isResizable?: boolean;
+  /**
+   * Determines if the column should be rendered as multiline.
+   */
+  isMultiline?: boolean;
   /**
    * Override the render method of the field
    */

src/controls/listView/ListView.tsx

@@ -24,6 +24,9 @@ const classNames = mergeStyleSets({
   wrapper: {
     height: '50vh',
     position: 'relative'
+  },
+  multilineCell: {
+    whiteSpace: 'break-spaces'
   }
 });
 
@@ -389,6 +392,12 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
         return <a href={item[field.linkPropertyName]}>{item[column.fieldName]}</a>;
       };
     }
+
+    if (field.isMultiline) {
+      return (item: any, index?: number, column?: IColumn) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+        return <span className={classNames.multilineCell}>{item[column.fieldName]}</span>;
+      };
+    }
   }
 
   /**