Primeng: Data-table scroll disappears when filtering in a field shown by width scroll

[celopezh]

[x ] bug report => When filtering a field in the last columns in a data-table that has width scroll, the data table hide the shown column and I am not able to return to the column to filter again.

Current behavior

1. I added 10 columns in a data table, not all of them are shown in the html view and the others are visible only when I scroll right the data table.
2. All columns has a filter activated, and when I filter in with column number 8, and it doesn't match with any of the records, the following error appears:
   ERROR: the scroll disappear and show only the columns that were visible initially ( without scrolling ), and does not permit to see the field I filtered with and clear the content to show my records again.

Expected behavior
To be able to scroll, see and write again in the field after filter in it, when I get a non record results

• Angular version: 2.1.2

• PrimeNG version: 1.1.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[myclau]

same situation.
if the scrollbar can appear when there are no record would be better, and problem solve.

[EddLeGuerrier]

same situation with [email protected] stable

[vermashailesh]

Hi does anyone got the solution for this.

[goldbergyoni]

Same bug here

[vermashailesh]

Got the solution...just fix the width of datatable .

[goldbergyoni]

@vermashailesh can you kindly elaborate/exemplify? you mean set a CSS style-width attribute over the p-datattable?

[goldbergyoni]

This patch fixed that for me:
.ui-datatable-scrollable-view
{
overflow:scroll !important
}

.ui-datatable-scrollable-body
{
overflow:visible !important
}

[umdstu]

@cagataycivici Can you elaborate on how your patch fixes this? The above fix from i0natan doesn't work. Setting .ui-table-scrollable-header to overflow:auto instead of overflow:hidden allows you scroll the header when there are no rows, but as soon as you add a row, you now have two horizontal scroll-bars.

[sonalnaik]

I resolved this using some javascript code.
If user filters and no data found in that case, we can use following code snippet.

var element = document.querySelectorAll('.ui-table-unfrozen-view')
//ui-table-unfrozen-view is dynamically generated class for table body
if(data == false){ //no data present
element[0].classList.add('overFlowClass')
}else{
element[0].classList.remove('overFlowClass')
//its necessary to remove class if data is there, otherwise two scrolls will appear
}

//In css file
.overFlowClass {
overflow: auto !important;
height: 450px;
}

Hope this helps..

[himenp]

This might fix your issue.

.ui-table-scrollable-wrapper {
overflow: auto !important;
}

.ui-table-scrollable-header, .ui-table-scrollable-body, .ui-table-scrollable-footer {
overflow: visible !important;
}