title: How to add pagination and footer template in ngx-datatable?
body: <p>I have the Following html code,</p>
  <pre><code>&lt;ngx-datatable
    class=&quot;material&quot;
    [rows]=&quot;rows&quot;
    [columns]=&quot;[{name:'Name'},{name:'Age'},{name:'Company'}]&quot;
    [columnMode]=&quot;'force'&quot;
    [headerHeight]=&quot;50&quot;
    [footerHeight]=&quot;50&quot;
    [rowHeight]=&quot;'auto'&quot;
    [externalPaging]=&quot;true&quot;
    [count]=&quot;page.totalElements&quot;
    [offset]=&quot;page.pageNumber&quot;
    [limit]=&quot;page.size&quot;
    (page)='getValue($event)'
    [selected]=&quot;selected&quot;
    [selectionType]=&quot;'checkbox'&quot;
    (activate)=&quot;onActivate($event)&quot;
    (select)='onSelect($event)' &gt;
    &lt;ngx-datatable-column
      [width]=&quot;30&quot;
      [sortable]=&quot;false&quot;
      [canAutoResize]=&quot;false&quot;
      [draggable]=&quot;false&quot;
      [resizeable]=&quot;false&quot;
      [headerCheckboxable]=&quot;true&quot;
      [checkboxable]=&quot;true&quot;&gt;
    &lt;/ngx-datatable-column&gt;
      &lt;ngx-datatable-column name=&quot;Name&quot;&gt;
        &lt;ng-template let-row=&quot;row&quot; let-value=&quot;value&quot; ngx-datatable-cell-template&gt;
         {{value}}  &lt;i [innerHTML]=&quot;row['age']&quot;&gt;&lt;/i&gt; years old
        &lt;/ng-template&gt;
      &lt;/ngx-datatable-column&gt;
      &lt;ngx-datatable-column name=&quot;Age&quot;&gt;
          &lt;ng-template let-column=&quot;column&quot; ngx-datatable-header-template&gt;
              Combined Properties
            &lt;/ng-template&gt;
  
          &lt;ng-template let-row=&quot;row&quot; let-value=&quot;value&quot; ngx-datatable-cell-template&gt;
              &lt;div style=&quot;border:solid 1px #ddd;margin:5px;padding:3px&quot;&gt;
                  &lt;div style=&quot;background:#999;height:10px&quot; [style.width]=&quot;value + '%'&quot;&gt;&lt;/div&gt;
                  {{row['name']}}, passed their life of {{value}}%
                &lt;/div&gt;
          &lt;/ng-template&gt;
      &lt;/ngx-datatable-column&gt;
      &lt;ngx-datatable-column name=&quot;Company&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;
      &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;
              Rows: {{rowCount}} |
              Size: {{pageSize}} |
              Current: {{curPage}} |
              Offset: {{offset}}  |
              Selected: {{selectedCount}}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
      &lt;/ngx-datatable-footer&gt;
  &lt;/ngx-datatable&gt;
  </code></pre>
  <p>that has the following result,
  Server Pagination without Paged
  <img src="https://i.stack.imgur.com/XnMpb.png" alt="" /></p>
  <p>If i remove the <code>&lt;ngx-datatable-footer&gt; ... &lt;/ngx-datatable-footer&gt;</code> in the above mentioned code i got the below result,</p>
  <p>Server Pagination with Paged
  <img src="https://i.stack.imgur.com/fvGyd.png" alt="" />
  I want to have the both Pagination and Footer Template in my Table.</p>
  <p><strong>What else is wrong my code?</strong></p>