Datatable scrollable - header alignment issue

Post Reply
sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

03 Jan 2017, 20:18

Hello,

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">&nbsp;&nbsp;
              {{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>

Image

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

03 Jan 2017, 20:29

Hi,

I will look into that and get back to you about it.

sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

03 Jan 2017, 20:43

System details:

PrimeNG 1.1.2
Ultima 1.1
Angular 2.4

sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

05 Jan 2017, 21:45

any updates on this issue? please let me know

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

06 Jan 2017, 08:48

Hi,

I tried the datatable with your settings but couldn't replicate the issue how can i replicate it you know any idea what cause this?

sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

06 Jan 2017, 23:27

did you add scrollable="true" to the datatable? do I need to add width to the columns if I add scrollable = true to datatable

sk77
Posts: 59
Joined: 18 Sep 2016, 18:30

06 Jan 2017, 23:46

upgraded to PrimeNG 1.1.4.. working now

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

07 Jan 2017, 15:21

Glad to hear that

andrea.b
Posts: 7
Joined: 23 Feb 2017, 14:18

17 Aug 2017, 17:27

I'm working with PrimeNg 4.1.2 and I have this issue with nearly all my tables.
First I thought, this is a problem with dynamic columns (the headers of this tables never fit), but unfortunately it occurs at tables with fix columns also.

Here the definition of my column:

Code: Select all

 <p-column *ngFor="let column of tableColumns"
                  field="{{column.field}}"
                  header="{{column.header}}"
                  sortable="true">
        </p-column>
You see: Nothing special with styles.

I thought, this was already fixed in an earlier version of PrimeNg?

Thx Andrea.

andrea.b
Posts: 7
Joined: 23 Feb 2017, 14:18

12 Oct 2017, 14:53

Meanwhile I'm working with the new PrimeNg version 4.2.1 but the header alignment problem still persists.
Are there any updates on this issue?

We really need a fast solution, because it looks confusing.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest