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