Horizontal Scroll Lost On Filtering to zero rows

[runawaycoin]

Tabulator Info Tabulator version 5.1.8

Working Example https://jsfiddle.net/b486utcL/

To Reproduce

1. load data where Horizontal Scroll is enabled
2. select a filter so no rows are shown (eg Enter in option4 column filter something like: "5" )
3. notice the Horizontal Scroll bar disappears and so does the column

Expected behavior Horizontal Scroll bar stays and focused column is shown

Note, if the table is loaded with no row data - Horizontal Scroll bar is correctly shown.

[olifolkerd]

Hey @runawaycoin

Thanks for the headsup, i have pushed a fix for this to the 5.3 branch that will be released in a couple of weeks.

Cheers

Oli :)

[kinto-alpine]

Hello.

I see that it still occurs in version 5.3.2👀 https://jsfiddle.net/udohjm4s/2/

Once the filter is set, it works fine.

        table.setFilter('', '=', '');
        setTimeout(()=>{
            table.clearFilter();
        });

[rigogsilva]

Having similar issue in 5.4.0. When header filtering have 0 rows, the scroll bar gets stuck all the way on the first column. So, you can really clear your filter since you are not able to scroll back to the column you were at.

Table configuration:

new Tabulator("#statusTable", {
    persistence: {
      sort: true, //persist column sorting
      filter: true, //persist filter sorting
      group: true, //persist row grouping
      page: false, //persist page
      columns: true, //persist columns
    },
    movableRows: true,
    movableColumns: true,
    clipboard: true,
    pagination: "local",
    paginationSize: 100,
    paginationSizeSelector: [100, 300, 600, 1000],
    paginationCounter: "rows",
    data: data,
    columns: columnDefinitions,
  });

An option could be to set the columns as scrollable as well since there is no data available.

[RJR-Robert-Kewei-Zhang]

Hi @olifolkerd ,

Is the issue mentioned by @runawaycoin fixed in 5.3? I am using 5.3 and upgraded to 5.4, but I still have the same issue.

Thanks, Robert

[kinto-alpine]

Hi It seems to be fixed in Ver. 5.4.4. https://jsfiddle.net/hswe2pdx/

Thanks. And thanks again!

[runawaycoin]

Thanks @kinto-alpine

indeed it seems fixed in v5.4.4

I added this (350px is my sidebar width) to the container and worked very well.

style="max-width: calc(100vw - 350px)"