@action
  setupContextMenu() {
    let menu = this.resizableColumns
      .getColumnVisibility()
      .reduce((arr, { id, name, visible }) => {
        let check = `${CHECK_HTML}`;
        if (!visible) {
          check = `<span style='opacity:0'>${check}</span>`;
        }
        name = `${check} ${name}`;
        arr.push({
          name,
          title: name,
          // eslint-disable-next-line ember/no-runloop
          fn: bind(this, this.toggleColumnVisibility, id),
        });
        return arr;
      }, []);

    this.showBasicContext = (e) => {
      basicContext.show(menu, e);
    };

    const listHeader = this.el.querySelector('.list-header');
    if (listHeader) {
      listHeader.addEventListener('contextmenu', this.showBasicContext);
    }
  }
Setup the context menu which allows the user
to toggle the visibility of each column.

The context menu opened by right clicking on the table's
header.

@method setupContextMenu