Doesn't display anything

bonjourclaudio commented 5 years ago

I implemented the table as shown in the README but nothing gets displayed at all. No errors whatsoever...

<cdk-virtual-scroll-viewport
  class="demo-viewport demo-table-container"
  itemSize="48"
>
  <table mat-vs-table [dataSource]="dataSource" matSort>
    <ng-container
      *ngFor="let column of displayedColumns"
      [matColumnDef]="column"
    >
      <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
      <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</cdk-virtual-scroll-viewport>

Is this a known behaviour?

Thanks!

depeter commented 5 years ago

I had the same. My problem was that I didn't specify the height of the element by applying the css classes. I see you do have the css classes defined. Have you also copied the css file contents?

.demo-viewport {
    height: 800px;
}

The height of the viewport is the most important part.

liuy97 commented 5 years ago

I think that you have to define it on your own. Viewport height is very specific to each project. StackBlitz demo is helpful. But I can provide a predefined height if you need. This project is a workaround before angular material team releases an official vs table.

liuy97 / mat-vs-table

Doesn't display anything #3