combining with #1032; updated docs

Author: AJIXuMuK

docs/documentation/docs/controls/ListView.md

@@ -37,7 +37,9 @@ import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp
   groupByFields={groupByFields}
   dragDropFiles={true}
   onDrop={this._getDropFiles}
-  stickyHeader={true} />
+  stickyHeader={true}
+  className={styles.listWrapper}
+  listClassName={styles.list} />
 ```
 - The control provides full text filtering through all the columns. If you want to execute filtering on the specified columns, you can use syntax : `<ColumndName>`:`<FilterValue>`. Use `':'` as a separator between column name and value. Control support both `'fieldName'` and `'name'` properties of IColumn interface.
 
@@ -98,6 +100,8 @@ The ListView control can be configured with the following properties:
 | onDrop | file | no | Event handler returns files from drag and drop. |
 | stickyHeader | boolean | no | Specifies if the header of the `ListView`, including search box, is sticky |
 | sortItems | (items: any[], columnName: string, descending: boolean) =&gt; any[] | no | Custom sorting function to handle sorting by column |
+| className | string | no | Class name to apply additional styles on list view wrapper |
+| listClassName | string | no | Class name to apply additional styles on list view |
 
 The `IViewField` has the following implementation:
 

src/controls/listView/IListView.ts

@@ -72,6 +72,10 @@ export interface IListViewProps {
    * Class name to apply additional styles on list view wrapper
    */
   className?: string;
+  /**
+   * Class name to apply additional styles on list view
+   */
+  listClassName?: string;
   /**
    * Custom sorting function.
    * @returns sorted collection of items

src/controls/listView/ListView.tsx

@@ -580,7 +580,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   public render(): React.ReactElement<IListViewProps> {
     let groupProps: IGroupRenderProps = {};
 
-    let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact } = this.props;
+    let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact, className, listClassName } = this.props;
     let { filterValue, items, columns, groups } = this.state;
 
     // Check if selection mode is single selection,
@@ -595,7 +595,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     }
 
     return (
-      <ListViewWrapper stickyHeader={!!this.props.stickyHeader} className={this.props.className}>
+      <ListViewWrapper stickyHeader={!!stickyHeader} className={className}>
         <DragDropFiles enable={dragDropFiles}
           iconName="BulkUpload"
           labelMessage={strings.UploadFileHeader}
@@ -607,7 +607,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
           } >
           {
             showFilter &&
-            <SearchBoxWrapper stickyHeader={!!this.props.stickyHeader}>
+            <SearchBoxWrapper stickyHeader={!!stickyHeader}>
               <SearchBox placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onSearch={this._updateFilterValue} onChange={(e, value) => this._updateFilterValue(value)} value={filterValue} />
             </SearchBoxWrapper>
           }
@@ -623,6 +623,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
             compact={compact}
             setKey='ListViewControl'
             groupProps={groupProps}
+            className={listClassName}
             onRenderDetailsHeader={this._onRenderDetailsHeader}
             componentRef={ref => {
               if (ref) {