title: How to apply ngx-perfect scrollbar to ag-grid
body: <p>I have been going round in circles trying to apply <a href="https://www.npmjs.com/package/ngx-perfect-scrollbar" rel="nofollow noreferrer">ngx-perfect-scrollbar</a> to <a href="https://www.ag-grid.com/best-angular-2-data-grid/#gsc.tab=0" rel="nofollow noreferrer">ag-grid</a>. I can get both working separately, but I want to completely replace the default scrollbar on my datatable with perfect-scrollbar.</p>
  
  <p>I have set up my module as per <a href="https://www.npmjs.com/package/ngx-perfect-scrollbar" rel="nofollow noreferrer">their instructions</a>:</p>
  
  <pre><code>import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
  import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
  
  const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
    suppressScrollX: true
  };
  
  @NgModule({
    declarations: [
  
    ],
    imports: [
      PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
    ]
  })
  </code></pre>
  
  <p>and in my template:</p>
  
  <pre><code>&lt;perfect-scrollbar class="psc"&gt;
      &lt;ag-grid-angular #agGrid style="width:100%;height:100%" class="ag-dark"
                       [gridOptions]="gridOptions"
                       [rowData]="rowData"&gt;
      &lt;/ag-grid-angular&gt;
  &lt;/perfect-scrollbar&gt;
  </code></pre>
  
  <p>This simply results in the outer element appearing with the new custom scrollbar, containing the datagrid with the standard toolbar. I need to apply both directives to the same element I guess, but I'm lost as to how to do this.</p>
  
  <p>I was also trying <a href="https://github.com/ceolter/ag-grid/issues/958#issuecomment-253330483" rel="nofollow noreferrer">this approach</a>, using the standard (non-angular) perfect-scrollbar package, and trying to bind it to the correct <code>.ag-body-viewport</code> element when the component is loaded:</p>
  
  <pre><code>import perfectScrollbar from 'perfectScrollbar';
  
  this.viewport = this.$element.find('.ag-body-viewport')[0];
  perfectScrollbar.initialize(this.viewport);
  </code></pre>
  
  <p>but I can't get it to work either; I just get the "no default export" error...</p>
  
  <p>Any pointers appreciated. Thanks</p>