diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md index c5f5dd2b5..68f12520c 100644 --- a/docs/documentation/docs/controls/ListView.md +++ b/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: diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts index bbdd2322f..596e26b67 100644 --- a/src/controls/listView/IListView.ts +++ b/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 */ diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 78a7b1ebc..78fa7233d 100644 --- a/src/controls/listView/ListView.tsx +++ b/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 { return {item[column.fieldName]}; }; } + + if (field.isMultiline) { + return (item: any, index?: number, column?: IColumn) => { // eslint-disable-line @typescript-eslint/no-explicit-any + return {item[column.fieldName]}; + }; + } } /**