title: Common 'wrapper' component for ngx-datatable
body: <h3>Some introduction:</h3>
  <p>We are currently developing an application based on Angular2 that is quite data-heavy. In order to show this data, we decided to give <a href="https://github.com/swimlane/ngx-datatable" rel="noreferrer">ngx-datatables</a> a try.
  Plenty of components will be needed showing data in grids. We added a customized footer template as well as a kind of customized header showing a page size selector using a <code>&lt;select&gt;</code> element.</p>
  <p>The number of markup lines grew quite a lot, therefore we would like to move the definition <code>&lt;ngx-datatable&gt;</code> with header and footer to a separate grid component. Now we would like to reuse that component by allowing the developer using the grid to simply define the columns in markup, to have full flexibility when it comes to the column content.</p>
  <p>The idea is to have a commonly used grid component that only asks for data as input and renders it. The typical functionality (server-side sorting and paging) in the grid should only exist once in the grid component.
  The component which uses the grid component should just provide the data which the grid components subscribes to, that's it.</p>
  <h3>What we have at the moment:</h3>
  <p><strong>Common grid component with selector 'grid' defined in .ts file</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;gridheader&quot;&gt;
      ... page size selector and other elements ...
  &lt;/div&gt;
  &lt;ngx-datatable
    class=&quot;material&quot;
    [columnMode]=&quot;'force'&quot;
    [rows]=&quot;data&quot;
    [headerHeight]=&quot;'auto'&quot;
    [footerHeight]=&quot;'auto'&quot;
    [rowHeight]=&quot;'auto'&quot;
    [externalPaging]=&quot;true&quot;
    [externalSorting]=&quot;true&quot;
    [count]=&quot;totalElements&quot;
    [offset]=&quot;currentPageNumber&quot;
    [limit]=&quot;pageSize&quot;
    [loadingIndicator]=&quot;isLoading&quot;
    (page)='loadPage($event)'
    (sort)=&quot;onSort($event)&quot;&gt;
  
    &lt;ng-content&gt;
    &lt;/ng-content&gt;
  
    &lt;ngx-datatable-footer&gt;
      &lt;ng-template 
        ngx-datatable-footer-template 
        let-rowCount=&quot;rowCount&quot;
        let-pageSize=&quot;pageSize&quot;
        let-selectedCount=&quot;selectedCount&quot;
        let-curPage=&quot;curPage&quot;
        let-offset=&quot;offset&quot;&gt;
        &lt;div style=&quot;padding: 5px 10px&quot;&gt;
          &lt;div&gt;
            &lt;strong&gt;Summary&lt;/strong&gt;: Gender: Female
          &lt;/div&gt;
          &lt;hr style=&quot;width:100%&quot; /&gt;
          &lt;div&gt;
            Rows: {{rowCount}} |
            Size: {{pageSize}} |
            Current: {{curPage}} |
            Offset: {{offset}}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/ngx-datatable-footer&gt;
  
  &lt;/ngx-datatable&gt;
  </code></pre>
  <p><strong>Specific grid</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;grid (onFetchDataRequired)=&quot;fetchDataRequired($event)&quot;&gt;
  
    &lt;ngx-datatable-column prop=&quot;Id&quot; name=&quot; &quot;&gt;
      &lt;ng-template let-value=&quot;value&quot; ngx-datatable-cell-template&gt;
        &lt;a [routerLink]=&quot;['edit', value]&quot; class=&quot;btn btn-sm btn-outline-primary&quot;&gt;
          &lt;i class=&quot;fa fa-pencil&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/ng-template&gt;
    &lt;/ngx-datatable-column&gt;
    &lt;ngx-datatable-column name=&quot;CreatedBy&quot; prop=&quot;CreatedBy&quot;&gt;
      &lt;ng-template let-value=&quot;value&quot; ngx-datatable-cell-template&gt;
        {{value}}
      &lt;/ng-template&gt;
    &lt;/ngx-datatable-column&gt;
  
    ... even more columns ...   
  
  &lt;/grid&gt;
  </code></pre>
  <p>We tried to use <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code> for the columns but no luck, the grid is just not rendered, I guess becauseno no columns are defined.</p>
  <p>Is there a way of not repeating the same code for the grid definition over and over again and to implement some kind of wrapper that takes care of the common markup?</p>
  <p>Grateful for any input.
  Thanks in advance!</p>
  <p><strong>Update</strong></p>
  <p>We managed to do it via the .ts file and a <code>ng-template</code> in the markup, but we would prefer to define columns only in the markup.
  Any idea anyone?</p>