Is it no longer possible to create custom linked Context Menus in Tabulator 5?

Question

Is it no longer possible to create custom linked Context Menus in Tabulator 5?

After using Tabulator for a few years, we have decided to switch over to Angular v13 and upgrade to the new Tabulator 5.x. In our previous implementation, we had set up a custom ContextMenu in the Table Column Definition like this:

contextMenu: this.TableRowClicked.bind(this),

The function definition for TableRowClicked was as follows:

public TableRowClicked(data: any, e: Event): void {

We used the Tabulator contextMenu solely as a trigger to create our own customized Context Menu system which looked something like this:

Custom Context Menu

However, with the new Tabulator 5.x, it appears that there have been changes regarding the contextMenu functionality. Now, it seems like we are required to return an array of menu items. I might be misunderstanding this, but it seems like we can no longer just use it as a trigger to call the creation of our own Context Menu. Can someone clarify if my understanding of the input and return types of the new context Menu function is correct?

In Tabulator 5, I have defined the function as:

public TableRowClicked(cell: Tabulator.MenuObject<Tabulator.CellComponent>, e: UIEvent): (Tabulator.MenuSeparator | Tabulator.MenuObject<Tabulator.CellComponent>)[] {

But now, when trying to define the contextMenu in the Tabulator Column Definition, I receive the following error message:

Type '(cell: MenuObject<CellComponent>, e: UIEvent) => (MenuObject<CellComponent> | MenuSeparator)[]' is missing the following properties from type '(MenuObject<CellComponent> | MenuSeparator)[]': pop, push, concat, join, and 27 more.ts(2740)
index.d.ts(1412, 9): The expected type comes from property `contextMenu` which is declared here on type `ColumnDefinition`

I would greatly appreciate any assistance in understanding the new approach in Tabulator 5 or identifying what I might be doing wrong. This issue is currently hindering our transition from Tabulator 4.9.3 to Tabulator 5.

Thank you,

Michael

javascript contextmenu tabulator

Answer 1

Answer №1

Upon reviewing the error message, it appears that the TypeScript Typings in use may be outdated and not recognizing the function being used.

It is important to note that the Typings are separate from the Tabulator library itself, which is functioning correctly.

In this case, if you are implementing your own context menu, it is recommended not to utilize the built-in contextMenu option meant for the default system menu.

Instead, I suggest utilizing the cellContext event to detect a right click on the cell and then trigger your custom menu accordingly.

This can be implemented either at the column level in the definition:

{title:"Name", field:"name", cellContext:function(e, cell){
    //e - the click event object
    //cell - cell component
    },
}

or by subscribing to the event for the entire table:

table.on("cellContext", function(e, cell){
        //e - the click event object
        //cell - cell component
});

Answer 2

Upon reviewing the error message, it appears that the TypeScript Typings in use may be outdated and not recognizing the function being used.

It is important to note that the Typings are separate from the Tabulator library itself, which is functioning correctly.

In this case, if you are implementing your own context menu, it is recommended not to utilize the built-in contextMenu option meant for the default system menu.

Instead, I suggest utilizing the cellContext event to detect a right click on the cell and then trigger your custom menu accordingly.

This can be implemented either at the column level in the definition:

{title:"Name", field:"name", cellContext:function(e, cell){
    //e - the click event object
    //cell - cell component
    },
}

or by subscribing to the event for the entire table:

table.on("cellContext", function(e, cell){
        //e - the click event object
        //cell - cell component
});

Is it no longer possible to create custom linked Context Menus in Tabulator 5?

Answer №1

Similar questions

Send binary information using Prototype Ajax request

Having trouble accessing `event.target.value` when selecting an item from the autocomplete feature in Material-UI with the

Obtain the HTML of a Vue component and transmit it using an ajax POST request

Error encountered when WebDriverIO attempted to connect to Appium due to a lack of compatible capabilities

The CSS class is specifically assigned to a single element

Place the bottom element of the top parent element in position

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

Hover over parts of an image to bring attention to them

Is it possible to execute a function when the AJAX request is successful and returns a status code of

Adding additional `select` dynamically causes the value to disappear from view

Simultaneously iterate through two recursive arrays (each containing another array) using JavaScript

The MomentJS difference calculation is incorporating an additional hour

What is the return value of the .pipe() method in gulp?

Attempting to understand how to retrieve specific items from my MongoDB Database that are associated with a particular user based on their ID

Experiencing challenges with showcasing numerical values in the grid cells

Ensure your HTML5 videos open in fullscreen mode automatically

Unexpected issue encountered when working with JSON in Node.js

Tips for passing an array to a different function using Jquery

The PHP table fails to show up on the screen

What is the best way to achieve the functionality of this ajax jquery using vanilla JavaScript?