Tabulator Dash Component

Hi @ViniciusBrown

I’ve added an example in dash-tabulator-playground
Where I used row double click callback rowDblClick
(set it up as a tabulator option )

(js method to call)

double clicking will freeze and unfreeze a row.

I tried the dataLoaded method on tabulators examples but it looks like it’s promise based which complicates when the data is actually loaded and was giving me null references. Probably something I was doing wrong, but I was able to get the double click method to work.

Hope that helps

@dmitryDS do you have a quick example that you can share?
Are you looking to have a button in the table that refreshes it? or one outside of the table?
Sorry I’ve been busy recently and didn’t see this question

Hey @pjaol, thank you for getting back to me.

I can give you a basic example. I’ve added customizable row highlighting rules via ns(“Namespaces”). So the workflow looks like this:

  • tabulator gets populated ~100k rows;
  • js applies highlighting rules ( rules are empty initially);
  • user sets highlighting rules;
    … that’s where my plan slipped. I need to trigger table.redraw(), to have js apply rules, but don’t see a way to trigger is via callback;
    Workaround I’m using is to reload all rows again and re-populate table, very not optimal but works.

Hi @pjaol , I wanted to conditionally color cells in few columns based on the value and tried using the “html” formatter. While the intended cells do get colored, they all get colored in the same color (Screenshot below). Can you please let me know if I might be missing anything.

columns = [
            {"title": "Block", "field": "Block", "headerFilter": True, "hozAlign": "left", 'frozen':True},
            {"title": "Timestamp", "field": "Timestamp", "headerFilter": True, "hozAlign": "center"},
            {"title": "Stage", "field": "Stage", "headerFilter": True, "hozAlign": "center"},
            {"title": "Timing", "columns":[
                {"title": "WNS(Setup)", "field": "WNS(Setup)", "hozAlign": "center", "formatter": "html"},
                {"title": "TNS(Setup)", "field": "TNS(Setup)", "hozAlign": "center", "formatter": "html"},
                {"title": "NVP(Setup)", "field": "NVP(Setup)", "hozAlign": "center", "formatter": "html"},
                {"title": "WNS(Hold)", "field": "WNS(Hold)", "hozAlign": "center", "formatter": "html"},
                {"title": "TNS(Hold)", "field": "TNS(Hold)", "hozAlign": "center", "formatter": "html"},
                {"title": "NVP(Hold)", "field": "NVP(Hold)", "hozAlign": "center", "formatter": "html"}]
            {"title": "Design", "columns":[
                {"title": "Instance Count", "field": "Instance Count", "hozAlign": "center"},
                {"title": "Utilization", "field": "Utilization", "hozAlign": "center"},
                {"title": "Flop Count", "field": "Flop Count", "hozAlign": "center"},
                {"title": "MBFF Ratio", "field": "MBFF Ratio", "hozAlign": "center", "formatter": "html"},
                {"title": "DRC", "field": "DRC", "hozAlign": "center", "formatter": "html"},
                {"title": "MDC Error Count", "field": "MDC Error Count", "hozAlign": "center", "formatter": "html"}]

data = []

for _idx in sum_qor_df.index:
    curr_entry = {}
    curr_entry["id"] = _idx
    for curr_col in sum_qor_df.columns:
        if "NS" in curr_col:
            curr_value_str = sum_qor_df.loc[_idx, curr_col]
            curr_col_values = pd.to_numeric(sum_qor_df[curr_col], errors='coerce')
            curr_value = curr_col_values[_idx]
            if curr_value != np.nan:
                if curr_value < -0.050 and curr_value >= -0.100:
                    curr_entry[curr_col] = "<style>p{{background-color:{}; margin:0; border:0}}</style><p>{}</p>".format("rgba(255, 255, 102, 1.0)", curr_value_str)
                elif curr_value < -0.100:
                    curr_entry[curr_col] = "<style>p{{background-color:{}; margin:0; border:0}}</style><p>{}</p>".format("rgba(255, 178, 102, 1.0)", curr_value_str)
                    curr_entry[curr_col] = curr_value_str
                curr_entry[curr_col] = curr_value_str
            curr_entry[curr_col] = sum_qor_df.loc[_idx, curr_col]

@pjaol congrats on the component you’ve build up. I got in touch about it recently and am studying the possibilities. One question: is it possible to freeze a column and put a scroll bar to scroll the other columns? Thanks in advance.

Hi, I am new to dash and tabulator.
I have gone through your sample example.
I was looking for updating a particular cell and not the whole table.
While searching, I came across the below code from this site

table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}]);

Is it possible to achieve the same in python? if possible, please share the code example.

Thank You

I’m trying to use the ‘movableRowsConnectedTables’ built-in functionality as explained in the tabulator.js examples

It doesn’t seem to work as expected:

import dash
from dash import html
import dash_bootstrap_components as dbc
import dash_tabulator

columns = [
    { "title": "Name",
     "field": "name",}

options_from = {
    'movableRows' : True,
    'movableRowsReceiver': "add",
    'movableRowsSender': "delete",
    'placeholder':'No more Rows'
options_to = {
    'movableRows' : True,
    'placeholder':'Drag Here'

data = [
    {"id":1, "name":"a"},
    {"id":2, "name":"b"},
    {"id":3, "name":"c"},

layout = html.Div(
                    [   html.Header('DRAG FROM HERE'),
                        ], width = 6
                    [   html.Header('DROP HERE'),
                            data = []
                        ], width = 6

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(layout, fluid=True)

if __name__ == '__main__':

Is it also possible to get callbacks when elements were dropped?

It would be great to have this functionality inside dash!