Tabulator paging issue when updating content

Panel
1

With Tabulator using pagination and frozen_rows.
When updating the data, the page snaps back to page 1 regardless of where the paging was whenever the update comes. Removing the frozen row, it behaves as expected.

import panel as pn
import numpy as np
import pandas as pd

pn.extension('tabulator')

def create_random_dataframe(n_rows):
    """Create a DataFrame with n_rows and 5 columns, where the first column is a constant 1 to n_rows and the rest are filled with random numbers."""
    # Define the column names
    columns = ['A', 'B', 'C', 'D', 'E']
    # Generate a DataFrame with the first column being 1 to n_rows and the rest random
    df = pd.DataFrame(np.random.rand(n_rows, 4), columns=columns[1:])
    df.insert(0, 'A', range(1, n_rows + 1))  # Insert the constant column at position 0 with values 1 to n_rows
    return df

df_data = create_random_dataframe(50)

# with frozen_rows 0, Tabulator will snap back to page 1 at every update
df_tab = pn.widgets.Tabulator(df_data,hidden_columns=['index'], layout='fit_data_fill', frozen_rows=[0], sortable=False, disabled=True, pagination='local', page_size=10)

# without frozen_rows set to 0 Tabulator will remain in whatever page it was after an update
# df_tab = pn.widgets.Tabulator(df_data,hidden_columns=['index'], layout='fit_data_fill', sortable=False, disabled=True, pagination='local', page_size=10)

def update_data():
    df_data = create_random_dataframe(50)
    df_tab.value = df_data

pn.state.add_periodic_callback(update_data, period=2000, start=True)

layout = pn.template.FastListTemplate(
    site="my site",
    title="Tabulator",
    accent_base_color='#d78929',
    header_background='#d78929',
    main=[pn.Column(df_tab)],
)
layout.servable()

2

Same behavior without paging with scrollbar within Tabulator or inside a floatpanel with a scroll bar.
So with a full size Tabulator within a float panel with scrolling, every time the Tabulator data is updated, the float panel scroll snaps back to top.

Here is the scrolling snapping back with the tabulator within a scrolling floatpanel:

I am looking for a way to display Tabulator data exceeding my window capacity and to be able to update that data at regular interval. About 2 seconds in my case. Is there any other way to update the Tabulator data other than “tabulator.value = new_df” that would not trigger that snap back behavior ?

3

Tried using patch instead of updating all data , same result.

4

Hi @sylvaint, could you check on Github if this is a known Tabulator bug? If so, please chime in in this issue to state the problem is still not resolved. If there’s no existing issue, please open a new one :slight_smile:

5

Thanks @maximlt, the remaining issue seems to be with frozen_rows. This has not been reported yet. The scrolling/paging jumping to top on update used to be a problem in all cases, now it remains an issue when using frozen_rows.

I created an issue on Github:

1 Like
6

Here is a workaround not using frozen_rows that will allow data update without paging issues. The idea is to use another tabulator to simulate the frozen row. This other single row tabulator has the configuration option header_visible set to False. Set the column widths do the same fixed values for both the single row summary tabulator and the main data tabulator and it looks like one table. The one row tabulator can be put on top or at the bottom of the main tabulator.

 # create one row, no header tabulator
 df_total_tab = pn.widgets.Tabulator(df_total, configuration={'headerVisible': False}, **tab_args_total)

Screenshot 2024-05-18 at 12.06.21 PM
Screenshot 2024-05-18 at 12.06.21 PM1974×1766 486 KB

7

Hi @sylvaint . How did you combine the 1 row tabulator and the full tabulator in main?

Did you do it as below?

main=[pn.Column(df_total_tab, df_tab)]
)
8

@coderambling In this case I am using a FloatPanel, so just passing a list of objects:

# compute df_total_tab
float_elements = [df_total_tab]

# compute df_tab
float_elements.append(df_tab)

# create new float panel
floatpanel = pn.layout.FloatPanel(*float_elements, name=f'Data for {symbol}', contained=False, position="left-top", margin=20, theme='dark', height=window_height, offsetx=25, offsety=25, stylesheets=[style_floating])
1 Like
9

Thanks! So you are not using .servable to serve the app to the web with FastListTemplate in this case, but deploying the app in a Notebook context?

Is that because of code / layout issues? Because your initial code example uses .servable .

10

No, using .servable and FastListTemplate not Notebook context. And no layout issues.
The code is just simplified code samples for this thread.

1 Like