Empty table row not being displayed

[st-clair-clarke]

Hi, I have a working table, and, I am trying to display and empty table row to show error messages.

   <ng-template mTemplate = "emptyTable">
                       <div class = 'error small'>Empty table Message</div>
                     </ng-template>

However, though I expect to see a row with the 'Empty table Message', I am not seeing any thing.

Is there something else I have to do?

Regards

[krishna-agarwal]

Hi @st-clair-clarke This should work, I created stackblitz example of it. You can see working example here.

Let me know if it is working for you.

Regards.

[st-clair-clarke]

Stiill does not display the message row! I am quite uncertain what is wrong because my code is similar to yours, Please see the code below:

import { Component, OnInit } from '@angular/core' import { MatDialog, MatDialogConfig } from '@angular/material' import { PimHabitDialogComponent } from '../../habit/habit-dialog.component'

@Component( { selector: 'pim-mom-tble', template: `

    <mat-card>
      <mat-card-header>
        <mat-error>Selected Rows: {{selectedRows}}</mat-error>
      </mat-card-header>
      <mat-card-content>

        <m-table
            [value] = countries
            sortField = "country"
            [sortOrder] = "1"
            (onFilter) = "onFilter($event)"
            (onSort) = "onSort($event)"
            (onRowSelect) = "onRowSelect($event)"
            (onRowUnselect) = "onRowUnselect($event)"
            (selectionChange) = "onRowSelectionChange($event)"
            [(selection)] = "selectedRows"
            (onRowExpand) = "onRowExpand($event)"
            (onRowCollapse) = "onRowCollapse($event)"
            expandable = "true"
            [expandMultiple] = "true"
            selectable = "true"
            (onEditInit) = "onEditInit($event)"
            (onEdit) = "onEdit($event)"
            (onEditCancel) = "onEditCancel($event)"
            (onEditComplete) = "onEditComplete($event)">

          <ng-template
              let-row
              let-index = "rowIndex"
              mTemplate = "expansion">
            {{index}} - {{row.country}}
            <br>
            <!--<img [src] = "row.flag"-->
            <!--width = "100px"-->
            <!--style = "padding: 20px 0px;">-->
          </ng-template>

          <m-header
              title = "Countries"
              [globalSearch] = "true"
              [colSetting] = "true"
              [reload] = "true"
              [export] = "true"></m-header>

          <m-column field = "country"
                    header = "Country"
                    footer = "Total Population"
                    sortable = "true"></m-column>
          <m-column field = "population"
                    header = "Population"
                    [footer] = "sum"
                    [editable] = 'true'
                    [editTrigger] = '"button"'></m-column>
          <m-column field = "capital"
                    header = "Capital"></m-column>
          <m-column field = "continent"
                    header = "Continent"></m-column>

          <m-footer
              (onPage) = "pageChange($event)"
              [paginator] = "true"
              [pageIndex] = "0"
              [pageSize] = "10"
              [pageSizeOptions] = '[10,20,50]'
          ></m-footer>

          <ng-template mTemplate = "emptyTable">
            <div class = 'error small'>Empty table Message</div>
          </ng-template>
        </m-table>

      </mat-card-content>

    </mat-card>

  `,
  styles: []
} )

export class MomTbleComponent implements OnInit { selectedRows

constructor( private _dlg: MatDialog ) {

}

countries = [ { 'country': 'Afghanistan', 'population': 35530081, 'capital': 'Kabul', 'continent': 'Asia' }, { 'country': 'India', 'population': 1339180127, 'capital': 'New Delhi', 'continent': 'Asia' }, { 'country': 'France', 'population': 64979548, 'capital': 'Paris', 'continent': 'Europe' }, { 'country': 'Germany', 'population': 82114224, 'capital': 'Berlin', 'continent': 'Europe' }, { 'country': 'Austria', 'population': 8735453, 'capital': 'Vienna', 'continent': 'Europe' } ]

sum = 0

ngOnInit() { }

openDialog() { const dlgCnfg = new MatDialogConfig() dlgCnfg.disableClose = true dlgCnfg.autoFocus = true dlgCnfg.closeOnNavigation = true //default this._dlg.open( PimHabitDialogComponent, dlgCnfg ) }

/*** edit selectionChange*****/ onEdit( e ) { console.log( 'onEdit', e ) }

onEditCancel( e ) { console.log( 'onEditCancel', e ) }

onEditComplete( e ) { console.log( 'onEditComplete', e ) }

onEditInit( e ) { this.openDialog() console.log( 'onEditInit', e ) }

// searching onFilter( e ) { console.log( 'onFilter/onSearch', e ) }

onSort( e ) { console.log( 'onSort', e ) }

/*** row select, unselect selectionChange*****/ onRowSelect( e ) { console.log( 'onRowSelect', e ) }

onRowUnselect( e ) { console.log( 'onRowUnselect', e ) }

onRowSelectionChange( e ) { console.log( 'onRowSelectionChange', e ) console.log( 'selected rows: ', this.selectedRows ) console.table( e ) }

/*** row expandunselect selectionChange*****/ onRowExpand( e ) { console.log( 'onRowExpand', e ) }

onRowCollapse( e ) { console.log( 'onRowCollapse', e ) }

pageChange( e ) { console.log( 'pageChange', e ) }

}

Thanks for helping.

Regars

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Virus-free. www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

On Wed, Jun 20, 2018 at 3:05 AM, krishna Agrawal [email protected] wrote:

Hi @st-clair-clarke https://github.com/st-clair-clarke This should work, I created stackblitz example of it. You can see working example here https://stackblitz.com/edit/momentum-table-empty-msg.

Let me know if it is working for you.

Regards.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/krishna-agarwal/momentum-table/issues/48#issuecomment-398661555, or mute the thread https://github.com/notifications/unsubscribe-auth/ADE_xo0CJpr7jaWOS4DAY62sskKUfbeiks5t-gJTgaJpZM4Uq_q5 .