Primeng: Percentage scrollheight on datatable

[jksuf]

Hello all,

I have a question about a commit I can't understand (I am referencing this commit: https://github.com/primefaces/primeng/commit/77a6ec6f95b34c58ecc7b42176dfea94fc88ee77). As you can see, a part of datatable.ts code has been removed:

But it seems this is the part of the code that handle datatable configurations like this one :
<p-dataTable scrollable="true" scrollHeight="100%" scrollWidth="100%"[value]="rows" [rows]="200" [paginator]="true" >

I can't find the code that was removed in the lsat commit on master branch, and I can't make my datatable works with this configuration (but if i use the old version i can make it work). Do you have any idea about this problem ?

Thank you a lot for your great work,

So.

[ghost]

Hi, same problem.
Last version (RC-1) not working with % values on width and height scroll.
_Despite on documentation where they say that we can use px or % value on scrollHeight and scrollWidth._

Great Job about PrimeNG team ! Bye :+1:

[NNemec]

Setting scrollHeight to a percentage is definitely broken, but thinking about it, I am not even sure how it should behave:
Specifying an absolute scrollHeight defines the size of the scrollable area and then adds some more non-scrollable content to it. Doing the same with a relative scrollHeight does not make much sense.
Instead, what you typcially want to do is to specify the total size of the table (via style=height:) and then define the number of frozen rows at the top. For that, introducing a new attribute like frozenRows would be more appropriate than attempting to fix the behavior of scrollHeight. This attribute should then, of course, activate vertical scrolling without a specified scrollHeight, simply honoring the style-height attribute of the whole table.

[NNemec]

After more tweaking, I found a workaround that offers exactly what I need. Adding only the scrollable="true" attribute (no scrollHeight) and then the following styles to the surrounding component:

styles: [`
  * >>> .ui-datatable-scrollable-wrapper {
    height:100%
  }

  * >>> .ui-datatable-scrollable-view {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  * >>> .ui-datatable-scrollable-body {
    flex: 1 1 0;
  }
`]

I am not sure whether flexbox is mature enough to be used in primeng when integrating a solution into datatable. I am only targeting Chrome (via electron), so browser compatibility is not an issue for me...

[jksuf]

Thanks a lot for your fix, I'm targeting chrome for now also, so browser compatibility is not an issue for me to. The solution I had until now was to use previous commits where the bug was not introduced. Concerning you first post, I agree that there should only be a scrollable true/false property (the height will only be supported by the height property and can get px or % values).

[NNemec]

An even better workaround that also works correctly in the presence of p-header:

* >>> .ui-datatable-scrollable {
  display: flex;
  flex-direction: column;
}

* >>> .ui-datatable-scrollable-wrapper {
  flex: 1 1 0;
}

* >>> .ui-datatable-scrollable-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

* >>> .ui-datatable-scrollable-body {
  flex: 1 1 0;
}

[shalaby]

I have the same issue.

[cagataycivici]

Working on it for 4.2.2.

[Cito]

Also, it would be nice if the data table could be forced to a height that is a multiple of the row heights, so that the last row is fully visible and there is a proper bottom border. That looks so much better.