I have added scrollable=true to datatable , having issue with header , it is not aligned with columns.. please see the screenshot below
Code: Select all
<p-dataTable
expandableRows="true"
#results [value]="filteredResults" [scrollable] = "true"
[rows]="10" [paginator]="true" [responsive] = "true" paginatorPosition = "top" [rowsPerPageOptions]="[10,20,50]" [pageLinks]="10"
sortMode="multiple" >
<header>
<div style="text-align:left">
<p-multiSelect [options]="columnOptions" defaultLabel="Select Columns" [style]="{'display':'table-caption','width':'150px'}" [(ngModel)]="cols"></p-multiSelect>
</div>
<div>
<button type="button" pButton icon="ui-icon-file-download"
iconPos="left"
label="CSV"
(click)='results.exportCSV()'
class="divExpCSV"></button>
<span class="spanResults">
{{filteredResults.length}} Result(s)</span>
</div>
</header>
<div class="Container">
<template let-resultItem pTemplate="rowexpansion">
<span><b>Description</b> : {{resultItem.description}}</span><br>
<div class="EmptyBox10"></div>
<span><b>Keywords</b> : {{resultItem.keyword}}</span>
</template>
</div>
<p-column styleClass="col-button " header="Action">
<template let-resultItem="rowData" pTemplate type="body">
<a href="#" (click)="encodeString('/#/search/',resultItem.resId)" target="_blank">
<button class="summaryPageBackground" type="button" pButton
icon="ui-icon-open-in-browser"
iconPos="left" title="Open Summary Page"
></button>
</a>
<a [(href)]="resultItem.landingPage" target="_blank">
<button type="button" pButton icon="ui-icon-open-in-new"
iconPos="left" class="landingPageBackground" title="Open Landing Page"></button>
</a>
</template>
</p-column>
<p-column field="title"
[sortable]="true" [filter]="true" header="Title" [style]="{'color':'#000000'}"
filterMatchMode="contains"></p-column>
<p-column field="contactPoint.fn"
[sortable]="true" [filter]="true" header="Contact" [style]="{'color':'#000000'}"
filterMatchMode="contains"></p-column>
<p-column field="description" [filter]="true" header="Description"
expander="true"
filterMatchMode="contains">
<template let-col let-resultItem="rowData" pTemplate type="body">
<span class="glimpse-content">{{resultItem[col.field]}}</span>
</template>
</p-column>
<p-column field="keyword" [filter]="true" header="Keywords" expander="true"
filterMatchMode="contains">
<template let-col let-resultItem="rowData" pTemplate type="body">
<span class="glimpse-content">{{resultItem[col.field]}}</span>
</template>
</p-column>
<p-column field="modified" filterMatchMode="contains"
[sortable]="true" [filter]="true" header="Date Modified"></p-column>
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>