Setting up Tabulator columnCellContextMenu

Anvil Q&A
1

Hi All,

I’m trying to set up a Tabulator table with a cell context menu as described in the Tabulator docs:

//define row context menu
var cellContextMenu = [
{
    label:"Reset Value",
    action:function(e, cell){
        cell.setValue("");
    }
},
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
columns:[
    {title:"Name", field:"name", width:200, contextMenu:cellContextMenu}, //add a context menu to the cells in this column
]
});

I build an array of row items and am trying to add “contextMenu:cellContextMenu” into the column definition but can’t figure out how to add the reference to cellContextMenu object defined in the table object. Python wants it to be a defined var but it needs to be the object reference and not a string value.

This is probably a very simple bit to solve but I’m short on experience.

Any suggestions?

Thanks in advance!

2

Are you using the anvil tabulator component or tabulator out the box and building your own custom component?

If it’s the former happy to add the functionality. If it’s the latter a clone link for this would be helpful to play around with.

3

Thanks for the reply.

What I am using is from an older Anvil example I cloned not your more recent component, which is fantastic BTW. I just have not figured it out quite yet and would have quite a bit to re-implement to use it–still on my list since it looks much more complete.

Ultimately, I need a global cell context menu like that which is available for the row context menu, but Tabulator doesn’t provide that at the same level–it must be included in the column definition. I need to build my tables dynamically so have to do it at the time I generate the array of dicts in my server module but can’t figure out how to include that javascript code instead of the dict key value.

I’ll work on creating a scaled back clone link.

Otherwise, how would you do it in your Tabulator component example if you were to include “contextMenu” in your definition of self.tabulator.columns in Form1? Or would you use a different approach?

Thanks.

4

just had a quick play and I couldn’t even get the basic ContextMenu to be displayed either the cell or the rowContextMenu!

Even just copying and pasting tabulator’s example source code into a custom html component :man_shrugging:

Do you have a working example of a basic context menu in anvil with tabulator? I just couldn’t figure it out

I could access the context callback function… but with the context menu it was always just the default browser menu…

5

Yes, I was able to get the row context menu to work with the example code, however it only worked when I upgraded to the latest Tabulator 4.6.3. I see your component is still on 4.5.3–if you upgrade I expect it will work.

1 Like
6

Will try that next week. What action(s) were you hoping for in the context menu?

If you have a clone link to your current version I can send you some code/pseudo code.

7

I got derailed by other things in last few days and don’t have a clone version ready.

I’m really looking to get a row/column index for any cell based on certain keys/values of the column and row definitions and then call an anvil method in the component to handle the rest of the operation.

I have it working with the row context menu in the table definition:

this.rowMenu = [
      {
          label:"Pin Variable: ",
          action:function(e, row){
            anvil.call(self.el, "row_clicked",row['_row']['data']['variable_name']);
        	}
      },

Then in the anvil component…

  def row_clicked(self, row_var_name):
    alert('row clicked: ' + row_var_name)

From there it will get saved to DB as part of a configuration selection.

Thanks!

1 Like
8

nice - you can also use row.getData() and just pass that back to anvil which will be a dictionary of the row that was clicked.

this works with cell aswell

cell.getData()
cell.getField()

might be a nice combination

If you’ve converted these from an anvil table to a list of dicts. If you use the anvil row id as the index for each row that can be a nice way to update the database.

this.cellMenu = [
      {
          label:"Pin Variable: ",
          action:function(e, cell){
            anvil.call(self.el, "cell_context", cell.getField(), cell.getData());
        	}
      },

  def cell_context(self, field, row):
    anvil.server.call('update_table', field, row)

@anvil.server.callable
def update_table(field, row_data):
  table_row = app_tables.my_table.get_by_id(row_data['id'])
  ...
9

Thanks for the tip. And I still want to get that cellContextMenu working :smile:

1 Like