Upgrade Tabulator to 5.x #2898

philippjfr · 2021-11-09T10:59:48Z

Tabulator 5.0 is a major upgrade to the tabulator.js library which applied some major refactoring and improves performance. Since we are still very actively improving the Tabulator widget in Panel and don't want to invest in developing features on top of an old version and also want to leverage the latest in performance and features it is best to track tabulator.js as closely as possible.

Closes #2832

Fix pagination
Fix frozen rows

codecov · 2021-11-09T11:23:31Z

Codecov Report

Merging #2898 (fa3388a) into master (6e95dbb) will increase coverage by 0.02%.
The diff coverage is 100.00%.

❗ Current head fa3388a differs from pull request most recent head 14ffc6f. Consider uploading reports for the commit 14ffc6f to get more accurate results

@@            Coverage Diff             @@
##           master    #2898      +/-   ##
==========================================
+ Coverage   83.07%   83.09%   +0.02%     
==========================================
  Files         190      190              
  Lines       24601    24633      +32     
==========================================
+ Hits        20437    20469      +32     
  Misses       4164     4164

Impacted Files	Coverage Δ
panel/models/tabulator.py	`98.76% <100.00%> (ø)`
panel/tests/test_param.py	`99.88% <0.00%> (+<0.01%)`	⬆️
panel/pane/markup.py	`97.23% <0.00%> (+0.01%)`	⬆️
panel/tests/pane/test_markup.py	`99.39% <0.00%> (+0.05%)`	⬆️
panel/param.py	`87.73% <0.00%> (+0.06%)`	⬆️
panel/widgets/select.py	`93.93% <0.00%> (+0.11%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6e95dbb...14ffc6f. Read the comment docs.

panel/models/tabulator.py

maximlt · 2021-11-09T17:16:30Z

I get an error when I hit Enter on the example below:

maximlt · 2021-11-09T17:18:41Z

The cell content of every second date row is made invisible when I click on the cell in this example:

maximlt · 2021-11-09T17:28:39Z

Setting selectable to an integer (maximum number of rows selectable) with for instance pn.widgets.Tabulator(sel_df, selectable=4) raises the following error when a row is clicked (it can even be selected):

18:26:50.962 Uncaught TypeError: this.model.select_mode.startsWith is not a function
    rowSelectionChanged Tabulator.ipynb line 2 > injectedScript:1511
    init_callbacks Tabulator.ipynb line 2 > injectedScript:1511
    _dispatch ExternalEventBus.js:82
    _dispatch ExternalEventBus.js:81
    dispatchExternal CoreFeature.js:90
    _rowSelectionChanged SelectRow.js:402
    deselectRows SelectRow.js:310
    rowClicked Tabulator.ipynb line 2 > injectedScript:1511
    init_callbacks Tabulator.ipynb line 2 > injectedScript:1511
    _dispatch ExternalEventBus.js:82
    _dispatch ExternalEventBus.js:81
    dispatchExternal CoreFeature.js:90
    dispatchEvent Interaction.js:303
    handle Interaction.js:233
    _dispatch InternalEventBus.js:119
    _dispatch InternalEventBus.js:118
    dispatch CoreFeature.js:78
    triggerEvents InteractionMonitor.js:206
    track InteractionMonitor.js:112
    updateEventListeners InteractionMonitor.js:96
    subscriptionChanged InteractionMonitor.js:85
    _notifiySubscriptionChange InternalEventBus.js:108
    _notifiySubscriptionChange InternalEventBus.js:107
    subscribe InternalEventBus.js:36
    subscribe CoreFeature.js:62
    subscriptionChanged Interaction.js:159
    _notifiySubscriptionChange ExternalEventBus.js:70
    _notifiySubscriptionChange ExternalEventBus.js:69
    subscriptionChange ExternalEventBus.js:21
    subscriptionChangeExternal CoreFeature.js:98
    initializeExternalEvents Interaction.js:148
    initialize Interaction.js:117
    _initializeTable Tabulator.js:277
    _create Tabulator.js:139
    Tabulator Tabulator.js:57
    setTimeout handler*Tabulator Tabulator.js:56
    _createSuperInternal tabulator.js:116
    TabulatorFull tabulator.js:24950
    render Tabulator.ipynb line 2 > injectedScript:1511
    build Tabulator.ipynb line 2 > injectedScript:674
    renderTo Tabulator.ipynb line 2 > injectedScript:674
    f Tabulator.ipynb line 2 > injectedScript:762
    add_document_standalone Tabulator.ipynb line 2 > injectedScript:762
    embed_items_notebook Tabulator.ipynb line 2 > injectedScript:769
    embed_document Tabulator.ipynb line 2 > injectedScript:5
    <anonymous> Tabulator.ipynb line 2 > injectedScript:8
    <anonymous> Tabulator.ipynb line 2 > injectedScript:24
    attachWidget jlab_core.1ad82bcd8c48e07a8392.js:2
    insertWidget jlab_core.1ad82bcd8c48e07a8392.js:2
    _insertOutput jlab_core.1ad82bcd8c48e07a8392.js:2
    onModelChanged jlab_core.1ad82bcd8c48e07a8392.js:2
    m jlab_core.1ad82bcd8c48e07a8392.js:2
    l jlab_core.1ad82bcd8c48e07a8392.js:2
    emit jlab_core.1ad82bcd8c48e07a8392.js:2
    _onListChanged jlab_core.1ad82bcd8c48e07a8392.js:2
    m jlab_core.1ad82bcd8c48e07a8392.js:2
    l jlab_core.1ad82bcd8c48e07a8392.js:2
    emit jlab_core.1ad82bcd8c48e07a8392.js:2
    push jlab_core.1ad82bcd8c48e07a8392.js:2
    _add jlab_core.1ad82bcd8c48e07a8392.js:2
    add jlab_core.1ad82bcd8c48e07a8392.js:2
    _onIOPub jlab_core.1ad82bcd8c48e07a8392.js:2
    _handleIOPub jlab_core.1ad82bcd8c48e07a8392.js:2
Tabulator.ipynb line 2 > injectedScript:1511:13698

maximlt · 2021-11-09T17:31:19Z

When moving the horizontal scroller from left to right the frozen column moves a little:

maximlt · 2021-11-09T17:35:21Z

I get an error in the console when I click on a row (not the + but the row itself as if I was about to select it) on this example:

18:33:49.179 Uncaught Error: Selection(3241).indices given invalid value: [null]
    validate Tabulator.ipynb line 2 > injectedScript:361
    _update Tabulator.ipynb line 2 > injectedScript:361
    set_value Tabulator.ipynb line 2 > injectedScript:361
    _setv Tabulator.ipynb line 2 > injectedScript:357
    setv Tabulator.ipynb line 2 > injectedScript:357
    set Tabulator.ipynb line 2 > injectedScript:357
    rowClicked Tabulator.ipynb line 2 > injectedScript:1511
    init_callbacks Tabulator.ipynb line 2 > injectedScript:1511
    _dispatch ExternalEventBus.js:82
    _dispatch ExternalEventBus.js:81
    dispatchExternal CoreFeature.js:90
    dispatchEvent Interaction.js:303
    handle Interaction.js:233
    _dispatch InternalEventBus.js:119
    _dispatch InternalEventBus.js:118
    dispatch CoreFeature.js:78
    triggerEvents InteractionMonitor.js:206
    track InteractionMonitor.js:112
    updateEventListeners InteractionMonitor.js:96
    subscriptionChanged InteractionMonitor.js:85
    _notifiySubscriptionChange InternalEventBus.js:108
    _notifiySubscriptionChange InternalEventBus.js:107
    subscribe InternalEventBus.js:36
    subscribe CoreFeature.js:62
    subscriptionChanged Interaction.js:159
    _notifiySubscriptionChange ExternalEventBus.js:70
    _notifiySubscriptionChange ExternalEventBus.js:69
    subscriptionChange ExternalEventBus.js:21
    subscriptionChangeExternal CoreFeature.js:98
    initializeExternalEvents Interaction.js:148
    initialize Interaction.js:117
    _initializeTable Tabulator.js:277
    _create Tabulator.js:139
    Tabulator Tabulator.js:57
    setTimeout handler*Tabulator Tabulator.js:56
    _createSuperInternal tabulator.js:116
    TabulatorFull tabulator.js:24950
    render Tabulator.ipynb line 2 > injectedScript:1511
    build Tabulator.ipynb line 2 > injectedScript:674
    renderTo Tabulator.ipynb line 2 > injectedScript:674
    f Tabulator.ipynb line 2 > injectedScript:762
    add_document_standalone Tabulator.ipynb line 2 > injectedScript:762
    embed_items_notebook Tabulator.ipynb line 2 > injectedScript:769
    embed_document Tabulator.ipynb line 2 > injectedScript:5
    <anonymous> Tabulator.ipynb line 2 > injectedScript:8
    <anonymous> Tabulator.ipynb line 2 > injectedScript:24
    attachWidget jlab_core.1ad82bcd8c48e07a8392.js:2
    insertWidget jlab_core.1ad82bcd8c48e07a8392.js:2
    _insertOutput jlab_core.1ad82bcd8c48e07a8392.js:2
    onModelChanged jlab_core.1ad82bcd8c48e07a8392.js:2
    m jlab_core.1ad82bcd8c48e07a8392.js:2
    l jlab_core.1ad82bcd8c48e07a8392.js:2
    emit jlab_core.1ad82bcd8c48e07a8392.js:2
    _onListChanged jlab_core.1ad82bcd8c48e07a8392.js:2
    m jlab_core.1ad82bcd8c48e07a8392.js:2
    l jlab_core.1ad82bcd8c48e07a8392.js:2
    emit jlab_core.1ad82bcd8c48e07a8392.js:2
    push jlab_core.1ad82bcd8c48e07a8392.js:2
    _add jlab_core.1ad82bcd8c48e07a8392.js:2
    add jlab_core.1ad82bcd8c48e07a8392.js:2
    _onIOPub jlab_core.1ad82bcd8c48e07a8392.js:2
Tabulator.ipynb line 2 > injectedScript:361:2552

maximlt · 2021-11-09T17:41:38Z

When I select some rows on a page of a remote (no issue with local) paginated table and then go to another page I get an error in the console:

18:37:10.682 Uncaught (in promise) Scroll Error - No matching row found Tabulator.js:663:18

I cannot select rows that are on different pages (here I'm holding Ctrl when clicking on the rows of the 2nd page, to add more rows to the selection):

Also note that .selected_dataframe seems to be equal to the whole dataframe at the initialization.

maximlt · 2021-11-09T17:47:33Z

There are still issues with the client autocomplete filter. Here I cannot reset the table after deleting A:

philippjfr · 2021-11-09T17:55:17Z

Thanks, everything I'm not replying to below I'll look into and fix in this PR.

I get an error when I hit Enter on the example below:

Fixed in follow up PR for datetime editing.

The cell content of every second date row is made invisible when I click on the cell in this example:

Also addressed by the follow up PR, but this didn't work before in any case.

When moving the horizontal scroller from left to right the frozen column moves a little:

Not really our fault. Hopefully will get addressed in Tabulator.

There are still issues with the client autocomplete filter. Here I cannot reset the table after deleting A:

Unrelated to this upgrade, so ignoring this for now.

philippjfr · 2021-11-09T17:58:21Z

I get an error in the console when I click on a row (not the + but the row itself as if I was about to select it) on this example:

Perfectly okay saying that selections won't work on hierarchical tables but I'll add some validation for this.

philippjfr · 2021-11-09T18:19:27Z

Okay fixed three of the issues mentioned:

No more errors on scroll to row if selected rows aren't on current page
Selections disabled on hierarchical tables
No more errors when setting selectable to integer value

I don't think any of these were caused by this PR but good to have them fixed anyway. The datetime editor PR will address some of the other issues.

Upgrade Tabulator to 5.x

f544367

philippjfr added 3 commits November 9, 2021 13:26

Fix pagination

09a1783

Update docs

24c26cd

Various cleanup

fa3388a

philippjfr requested a review from maximlt November 9, 2021 13:05

philippjfr mentioned this pull request Nov 9, 2021

Implement DateEditor and DatetimeEditor for Tabulator #2899

Merged

maximlt reviewed Nov 9, 2021

View reviewed changes

panel/models/tabulator.py Show resolved Hide resolved

Addressed review comments

14ffc6f

philippjfr merged commit 002d3e1 into master Nov 9, 2021

philippjfr deleted the tabulator_upgrade branch November 9, 2021 18:21

philippjfr mentioned this pull request Nov 9, 2021

Tabulator very slow with large number of columns #2327

Closed

maximlt mentioned this pull request Jun 17, 2022

Upgrade the Tabulator widget to use Tabulator JS 5.x #3632

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade Tabulator to 5.x #2898

Upgrade Tabulator to 5.x #2898

philippjfr commented Nov 9, 2021 •

edited

Loading

codecov bot commented Nov 9, 2021 •

edited

Loading

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021 •

edited

Loading

maximlt commented Nov 9, 2021

philippjfr commented Nov 9, 2021

philippjfr commented Nov 9, 2021

philippjfr commented Nov 9, 2021

Upgrade Tabulator to 5.x #2898

Upgrade Tabulator to 5.x #2898

Conversation

philippjfr commented Nov 9, 2021 • edited Loading

codecov bot commented Nov 9, 2021 • edited Loading

Codecov Report

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021

maximlt commented Nov 9, 2021 • edited Loading

maximlt commented Nov 9, 2021

philippjfr commented Nov 9, 2021

philippjfr commented Nov 9, 2021

philippjfr commented Nov 9, 2021

philippjfr commented Nov 9, 2021 •

edited

Loading

codecov bot commented Nov 9, 2021 •

edited

Loading

maximlt commented Nov 9, 2021 •

edited

Loading