Open rowContextMenu with Button click on Tabulator Table

Question

Open rowContextMenu with Button click on Tabulator Table

37 Views Asked by Anian Sollinger At 15 March 2024 at 13:54

I want to have a button at the end of my Table where i can Click and open the rowContextMenu below the Button.

But i also want it to pop up when I rightclick anywhere on the row.

I already tried a few things

var menuButtonFormatter = (cell: any) => {
var menuBtn = document.createElement('button');
          menuBtn.type = 'button';
          menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>';
          menuBtn.classList.add('menu-button');
          menuBtn.addEventListener('click', (event) => {
            event.stopImmediatePropagation();
            const myEvent: any = new Event('row-contextmenu');
            myEvent.pageX = event.pageX;
            myEvent.pageY = event.pageY;
            cell.getRow().getElement().dispatchEvent(myEvent);
          });

buttonHolder.appendChild(menuBtn);
          return buttonHolder;

        }

This is the Button

And my Column looks like this:

{
        title: this.$t('actions'),
        field: 'actions',
        // formatterParams: poParams,
        formatter:menuButtonFormatter,
        headerSort: false,
        width: 110,
        frozen: true,
}

I tried many different Things but nothing would work.

I also tried const myEvent: any = new Event('contextmenu'); as the button Event but it also did nothing. Also nothing showed up in the Console

Original Q&A

There are 1 best solutions below

**Timur** · Answer 1 · 2024-03-15T19:09:29.983000

You can try using the MouseEvent event instead. Here is an example:

const tableData = [
  { id: 1, fullName: 'Oli Bob', age: '12', color: 'red' },
  { id: 2, fullName: 'Mary May', age: '1', color: 'blue' },
  { id: 3, fullName: 'Christine Lobowski', age: '42', color: 'green' },
  { id: 4, fullName: 'John Smith', age: '30', color: 'red' },
  { id: 5, fullName: 'Tim Burton', age: '51', color: 'blue' }
]

var menuButtonFormatter = (cell, formatterParams, onRendered) => {
  const menuBtn = document.createElement('button')
  menuBtn.type = 'button'
  menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>'
  menuBtn.classList.add('menu-button')
  menuBtn.addEventListener('click', (event) => {
    const myEvent = new MouseEvent('contextmenu', {
      bubbles: true,
      clientX: event.pageX,
      clientY: event.pageY
    })

    cell.getRow().getElement().dispatchEvent(myEvent)
  })

  onRendered(() => {
    cell.getElement().appendChild(menuBtn)
  })
}

const table = new Tabulator('#table', {
  data: tableData,
  layout: 'fitDataFill',
  rowContextMenu: [
    {
      label: 'Delete Row',
      action: (e, row) => {
        row.delete()
      }
    }
  ],
  columns: [
    { title: 'Name', field: 'fullName' },
    { title: 'Age', field: 'age' },
    { title: 'Color', field: 'color' },
    {
      title: 'Button',
      field: 'actions',
      formatter: menuButtonFormatter,
      headerSort: false,
      width: 110,
      frozen: true
    }
  ]
})

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
  <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div id="table"></div>
</body>

</html>

Open rowContextMenu with Button click on Tabulator Table

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in TYPESCRIPT

Related Questions in TABULATOR

Trending Questions

Popular # Hahtags

Popular Questions