Vanilla Context Menu

Live test

#	Make	Model	Year
1	Honda	Accord	2009
2	Toyota	Camry	2012
3	Hyundai	Elantra	2010

Run your Code

const basicTableBody = document.getElementById('basic_table_body');
const basicTableContext = new VanillaContext(basicTableBody, {
  autoClose: false,
  nodes: [{
    renderer: (params) => {
      const td = params.originEvent.target.closest('td');
      return '<b>' + td.textContent + '</b>';
    },
    disabled: true,
    style: {
      height: '60px'
    }
  }, {
    renderer: 'remove row',
    onClick: ({ api, originEvent }) => {
      const row = originEvent.target.closest('tr');
      if (row) {
        row.parentElement.removeChild(row);
      }
      api.close();
    },
  }, {
    renderer: '<bold>굵게</bold>',
    onClick: (e) => {
      console.log(e);
    },
    children: [{
      renderer: '할로',
      onClick: (e) => {
        console.log(e);
      }
    }, {
      renderer: '<bold>굵게</bold>',
      onClick: (e) => {
        console.log(e);
      },
      children: [{
        renderer: (e) => {
          const p = document.createElement('p');
          p.innerHTML = 'ㅋㅋㅋㅋ';
          return p;
        },
        onClick: (e) => {
          console.log(e);
        }
      }, {
        renderer: '<bold>굵게</bold>',
        onClick: (e) => {
          console.log(e);
        },
        children: [{
          renderer: '할로',
          onClick: (e) => {
            console.log(e);
          }
        }, {
          renderer: '<bold>굵게</bold>',
          onClick: (e) => {
            console.log(e);
          }
        }]
      }]
    }]
  }]
});