Primeng делает прокручиваемую высоту с возможностью прокрутки

PrimeNG DataTable предоставляет свойство [scrollable] для определения вертикальной и / или горизонтальной прокрутки. Это должно использоваться с комбинацией набора scrollHeight и / или scrollWidth.

Как я могу получить таблицу, которая будет подстраиваться под любую высоту / ширину окна вместе с возможностью прокрутки?

Вот код, который я пробовал:

<div class="ui-g-12">

    <p-dataTable class="ui-g-12" [value]="rows"    [hidden]="this.apiService.spinnerIsVisible"
    [style]="{ height: 'fit-content', 'margin-top': '10px' }"
    [resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
    [responsive]="false"
    [globalFilter]="tableSearch"
    [editable]="true"
    [scrollable]="true" scrollHeight="100%" scrollWidth="100%">

      <p-header>
        <button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
        <label for="tableSearch">Global search: </label>
        <input id="tableSearch" #tableSearch type="text" placeholder="type here">
      </p-header>

      <p-column
        *ngFor="let col of cols" [header]="col" [field]="col"
        [style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}"
        [sortable]="true"
        [filter]="true" filterPlaceholder="" filterMatchMode="contains"
        [editable]="true">
      </p-column>

    </p-dataTable>
</div>

Но это решает только проблему отзывчивой ширины. На скриншоте вы видите таблицу с возможностью горизонтальной прокрутки: вот скриншот

Поскольку атрибут height в p-dataTable относится к родительскому элементу в случае процентного значения, я попытался заставить родительский div соответствовать содержимому, добавив style="height: 100%" к родительскому div. Вот обновленный код:

<div class="ui-g-12" style="height: 100%">

    <p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible"
    [style]="{ height: 'fit-content', 'margin-top': '10px' }"
    [resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
    [responsive]="false"
    [globalFilter]="tableSearch"
    [editable]="true"
    [scrollable]="true" scrollHeight="100%" scrollWidth="100%">

      <p-header>
        <button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
        <label for="tableSearch">Global search: </label>
        <input id="tableSearch" #tableSearch type="text" placeholder="type here">
      </p-header>

      <p-column
        *ngFor="let col of cols" [header]="col" [field]="col"
        [style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}"
        [sortable]="true"
        [filter]="true" filterPlaceholder="" filterMatchMode="contains"
        [editable]="true">
      </p-column>

    </p-dataTable>
</div>

Я также внес следующие изменения в свой styles.scss файл, чтобы он заработал (нашел это в другом вопросе по stackoverflow):

html, body {
  height: 100%;
}

Но и у меня это не сработало: введите описание изображения здесь На скриншоте высота кажется правильной, но это не так. Когда я прокручиваю вниз, сначала все идет как надо, но затем, когда я приближаюсь к концу таблицы, полоса прокрутки выходит из поля зрения, поэтому я не вижу ее, пока все еще могу прокручивать. Похоже, что datatable немного выше, чем должен быть.

Итак, как мне решить эту проблему? Любая помощь будет оценена по достоинству!


angular css primeng primeng-datatable
person Nikita Marinosyan    schedule 22.11.2017    source источник
comment
Чувак, ты решил эту проблему? Пробуем то же самое здесь.   -  person fabioresner    schedule 01.03.2018

Ответы (5)


arrow_upward
11
arrow_downward

Я не знаю, подходит ли это именно вашему случаю, но я решил свою проблему, установив для свойства scrollHeight datatable значение:

scrollHeight="50vh"

vh относится к:

vh Относительно 1% высоты области просмотра

Область просмотра = размер окна браузера. Если ширина окна просмотра 50 см, 1vw = 0,5 см.

Вы можете протестировать различные значения vh и посмотреть, что подходит лучше.

подробнее: https://www.w3schools.com/cssref/css_units.asp

person fabioresner    schedule 01.03.2018

arrow_upward
14
arrow_downward

Я использую это на p-table (не уверен, будет ли работать на p-datatable).

[scrollHeight]="'calc(100vh - 204px)'"

person jvitor83    schedule 29.08.2018
comment
не могли бы вы объяснить, почему вы вычли значение vh на 204 пикселя? - person coder; 09.04.2019

arrow_upward
1
arrow_downward

Вы можете получить внутреннюю высоту и внутреннюю ширину в файле ts, например

setInnerWidthHeightParameters()
  {
    this.innerWidth = window.innerWidth;
    this.innerHeight = window.innerHeight * 0.70;
  }

и использовать его как

[scrollHeight]="innerHeight +'px'"

чтобы установить его динамически, у меня это сработало.

person Arthur Cam    schedule 19.08.2019

arrow_upward
1
arrow_downward

для тех, кто ищет похожие проблемы, я решаю их следующим образом:

  1. отметьте PARENT div в шаблоне с помощью (например) #leftSidebar

  2. в компоненте использовать вид дочернего элемента:

    @ViewChild ('leftSidebar', {static: true}) leftSidebar: ElementRef;

  3. вы можете получить к нему доступ и получить положение и размер следующим образом:

    let rect: any = this.leftSidebar.nativeElement.getBoundingClientRect (); пусть x: number = rect.x; пусть y: number = rect.y; let width: number = rect.width; пусть высота: число = прямоугольник. высота;

  4. вы можете сделать как Артур, описанный выше, и установить:

    [scrollHeight] = высота + 'px'

person Ivica Buljević    schedule 08.10.2020

arrow_upward
0
arrow_downward

ScrollHeight должен быть 100%.

person Tejashree    schedule 10.12.2018