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.

I was using rowClicked element of DashTabulator and below are my observation:

  1. Initially when no row was selected , rowClicked = None.

  2. When I select a row(say row1) by single click, the row gets highlighted and rowClicked = {'col1': 3, 'col2': 'row1', 'col3': '2022-01-15T01:20:36.586000'}

  3. When I double click on row, it removes the highlight but the row still remains selected as the value of rowClicked remains same. Ideally it should be None and row should get deselected, but this is not what is happening here.

  4. The value of rowClicked changes when I select a new row.

Row deselected: None
Row selected: {'col1': 3, 'col2': 'row1', 'col3': '2022-01-15T01:20:36.586000'}
Row selected: {'col1': 3, 'col2': 'row2', 'col3': '2022-01-15T01:10:02.889000'}
Row selected: {'col1': 3, 'col2': 'row8', 'col3': '2022-01-15T02:07:57.024000'}
Row selected: {'col1': 3, 'col2': 'row5', 'col3': '2022-01-11T21:35:39.287000'}

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]