The p-dataView component in primeng 14.0.2 won't do a grid layout. I've taken this Example 2 as a minimal test. Here is the .html file:
<div class="card">
<p-dataView
#dv
[value]="productNames"
[paginator]="true"
[rows]="9"
filterBy="name"
layout="grid">
<ng-template pTemplate="header">
<div>
<span class="p-input-icon-left p-mb-2 p-mb-md-0">
<i class="pi pi-search"></i>
</span>
<p-dataViewLayoutOptions>
Options
</p-dataViewLayoutOptions>
</div>
</ng-template>
<ng-template let-product pTemplate="gridItem">
<div class="p-col-12 p-md-4">
<div class="product-grid-item card">
<div class="product-grid-item-top">
<h1>{{product}}</h1>
</div>
<div class="product-grid-item-content">
Text Here
</div>
</div>
</div>
</ng-template>
</p-dataView>
</div>
The output is a list rather than a grid:
This looks like a bug in primeng 14. Is there a way to be a grid layout with d-dataView in primeng 14?
Edit:
According to the stackblitz in the comment from cfprabhu this code is correct, but it doesn't render properly. The code in the stackblitz works, but only on the stackblitz web page. I downloaded it, did yarn install (npm install failed) and ng serve and got this error:
Your global Angular CLI version (14.2.2) is greater than your local version (11.0.7). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
An unhandled exception occurred: require() of ES Module /home/dean/src/angular/examples/primeng.demos/primeng-dataview-demo/node_modules/@angular/compiler/fesm2015/compiler.mjs not supported.
Instead change the require of /home/dean/src/angular/examples/primeng.demos/primeng-dataview-demo/node_modules/@angular/compiler/fesm2015/compiler.mjs to a dynamic import() which is available in all CommonJS modules.
See "/tmp/ng-1my2L4/angular-errors.log" for further details.
I don't think stackblitz is a reliable environment for testing code.
I'm running Ubuntu 18.04, and primeng DataView wants to render everything as a list.