Ag-Grid技术咨询：如何为单元格右键菜单添加筛选功能

• 原生表格组件一般默认不支持右键单元格直接唤起“Filter by”选项，但可以通过自定义上下文菜单的方式实现该需求。
• 核心实现步骤如下：
  1. 监听表格单元格的右键点击事件，阻止系统默认上下文菜单弹出
  2. 手动创建包含“Filter by”选项的自定义菜单DOM结构
  3. 为“Filter by”选项绑定过滤逻辑：获取当前单元格的值，对表格数据进行筛选展示
  4. 在右键点击位置定位显示自定义菜单，并设置点击页面其他区域时自动关闭菜单

以下是基于普通HTML表格的基础实现示例：

// 监听所有表格单元格的右键事件
document.querySelectorAll('table td').forEach(cell => {
  cell.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    // 移除页面上已存在的自定义菜单
    const oldMenu = document.getElementById('custom-table-menu');
    if (oldMenu) oldMenu.remove();
    
    // 创建自定义菜单容器
    const menu = document.createElement('div');
    menu.id = 'custom-table-menu';
    menu.style.cssText = `
      position: absolute;
      left: ${e.pageX}px;
      top: ${e.pageY}px;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 4px;
      min-width: 150px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    `;
    
    // 创建Filter by选项
    const filterItem = document.createElement('div');
    filterItem.textContent = `Filter by: ${cell.textContent.trim()}`;
    filterItem.style.cssText = `
      padding: 8px 12px;
      cursor: pointer;
    `;
    filterItem.addEventListener('mouseenter', () => filterItem.style.background = '#f5f5f5');
    filterItem.addEventListener('mouseleave', () => filterItem.style.background = '#fff');
    
    // 绑定过滤逻辑
    filterItem.addEventListener('click', () => {
      const targetValue = cell.textContent.trim();
      // 遍历表格行，隐藏不包含目标值的行
      document.querySelectorAll('table tr').forEach(row => {
        row.style.display = row.textContent.includes(targetValue) ? '' : 'none';
      });
      menu.remove();
    });
    
    menu.appendChild(filterItem);
    document.body.appendChild(menu);
    
    // 点击页面其他区域关闭菜单
    document.addEventListener('click', () => menu.remove(), { once: true });
  });
});

注意：如果使用的是UI框架自带的表格组件（如Element UI Table、Ant Design Table等），需替换为对应组件的事件监听API和数据筛选方法，实现逻辑会更贴合组件特性。

内容的提问来源于stack exchange，提问作者Peter