Example table header, footer

<ngx-source-null></ngx-source-null> - display content when table value not set


Source not set (null/undefined/NaN)
 

  <!-- app.component.html -->
  <ngx-table-builder [source]="null">
    <ngx-source-null>
      <div class="no-data">Source not set (null/undefined/NaN)</div>
    </ngx-source-null>
  </ngx-table-builder>



  /* app.component.css */

  .no-data {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
  }

<ngx-empty></ngx-empty> - display content when empty table


No data
 

  <!-- app.component.html -->
  <ngx-table-builder [source]="[]">
    <ngx-empty>
      <div class="no-data">No data</div>
    </ngx-empty>
  </ngx-table-builder>



  /* app.component.css */

  .no-data {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
  {

<ngx-header></ngx-header> - display table header, <ngx-footer></ngx-footer> - display table footer


License list 

  <!-- app.component.html -->
  <ngx-table-builder [source]="data">
     <ngx-header content-cell align-center bold>License list</ngx-header>
  </ngx-table-builder>
Footer 

  <!-- app.component.html -->
  <ngx-table-builder [source]="data">
     <ngx-footer content-cell align-center bold>Footer</ngx-footer>
  </ngx-table-builder>

Header and footer are always sticky position


Header 1 Footer 1

Table with header can be expandable


  <!-- app.component.html -->

    <ngx-table-builder [source]="data" height="100%">
        <ngx-options is-draggable is-sortable></ngx-options>
        <ngx-header content-cell align-center bold expandable>Header 3</ngx-header>
    </ngx-table-builder>

Header 3