Rows not appearing in ngrid table

cluskii commented 3 years ago

I've been trying to incorporate ngrid into my application, but I've encountered an issue where no rows seem to rendered. It's possible I've just missed something, but I can't work out what it might be, so it may be an issue. Would appreciate any help you can provide.

Thanks, Andrew

What is the expected behavior?

Rows should be rendered in the table.

What is the current behavior?

Header row is shown, but data rows are not rendered.

What are the steps to reproduce?

A minimal code for reproduction here:

module:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    PblNgridModule
  ]...
})
export class TableModule { }

component:

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.scss'],
  // changeDetection: ChangeDetectionStrategy.OnPush, (occurs with or without OnPush)
  encapsulation: ViewEncapsulation.None,
})
export class DataTableComponent {

  @ViewChild(PblNgridComponent, { static: true }) pblTable?: PblNgridComponent<any>;

  COLUMNS: PblNgridColumnSet = columnFactory()
    .default({ width: '100px' })
    .table(
      { prop: 'id' }
    ).build();

  tableData: PblDataSource<Transaction> =
    createDS<any>()
      .onTrigger(() => [{ id: '123' }])
      .create();

  constructor() {
  }

}

template:

<pbl-ngrid #pblTable persistState focusMode="row" [dataSource]="tableData" [columns]="COLUMNS">
</pbl-ngrid>

Result:

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Angular: 11.2.4
Angular cdk: 11.2.10
Agular cdk experimental: 11.2.10
Material: NA
NGrid: 3.1.4
OS: MacOs 10.13.6
Typescript: 4.1.3
Browser: Chrome, Firefox, Safari (although my only target is chrome)

Is there anything else we should know?

shlomiassaf commented 3 years ago

I can't see your template, and in general it's better if you provide a stackblitz / codesandbox, no reason to paste the code here... helping me help you :)

Anyway, I can only assume you're using virtual scroll without providing a height to the grid.

With virtual scroll the height must be set because the data row section is virtual, hence it takes the size it gets. (fixed, %...)
You can also set the minDataViewHeight, read here

Or, disable virtual scroll.

cluskii commented 3 years ago

The template is included (although quite short!). It was no After setting the [style.height], the rows became visible. Is virtual scroll enabled by default?

Thanks for your help though, much appreciated!

shlomiassaf / ngrid