We have used Tabulator for a few years and it is a great product! We have now moved over to using Angular v13 and made the move to the new Tabulator 5.x
Previously in the Table Column Definition we have created a custom ContextMenu using the following:
contextMenu: this.TableRowClicked.bind(this),
With the function definition looking like this:
public TableRowClicked(data: any, e: Event): void {
Please note that we only used the Tabulator contextMenu to trigger the creation of our own Context Menu system, looking, for example, like this:
With the new Tabulator 5.x this seems to have changed? It seems like we must return an array of menu items now? I may have misunderstood but it seems like there is not possible any longer to just use this as a trigger to call the creation of you own Context Menu? Or am I misunderstanding the input and return types of the new context Menu function? I saw a note about returning an empty array ([]) if you do not want to create custom returned menu items, however the error pasted below still remains. I have the function defined as this now for Tabulator 5, which requires me to return an array:
public TableRowClicked(cell: Tabulator.MenuObject<Tabulator.CellComponent>, e: UIEvent): (Tabulator.MenuSeparator | Tabulator.MenuObject<Tabulator.CellComponent>)[] {
The contextMenu in the Tabulator Column Definition gives the following error:
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`
Can someone please shed some light on the new way of doing this in Tabulator 5 or what I am missing and doing wrong?
Any help would be much appreciated as this currently prevents the move over to Tabulator 5 from Tabulator 4.9.3.
Thanks,
Michael
Looking at the error it looks like the TypeScript Typings you are using may be out of date and not expecting the function there.
The Typings are not part of the Tabulator library, the library itself is working as expected.
What i would say is that if you are launching your own context menu then there is no need to use the built in contextMenu option, that is intended for launch of the built in system only.
I would recommend you use the cellContext event to look for a right click on the cell, then trigger your custom menu.
This can either be done per column in the column definition:
{title:"Name", field:"name", cellContext:function(e, cell){
//e - the click event object
//cell - cell component
},
}
or by subscribing to the event on the whole table:
table.on("cellContext", function(e, cell){
//e - the click event object
//cell - cell component
});