React中Ag-Grid如何检测单元格值并自动新增缺失值行？

核心实现步骤 #

1. 基础依赖与初始化：安装Ag-Grid相关依赖，初始化表格基础数据和列配置
2. 动态下拉选项：Column-B的下拉选项自动取自所有Column-A的去重值
3. 值变更监听：当Column-B输入/选择的值不在Column-A中时，自动新增行

完整代码实现 #

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { useState, useMemo } from 'react';

function DynamicTable() {
  // 初始化表格数据，对应示例中的初始状态
  const [rowData, setRowData] = useState([
    { columnA: 10, columnB: 10 },
    { columnA: 20, columnB: 10 },
    { columnA: 30, columnB: 20 },
    { columnA: 40, columnB: 70 },
  ]);

  // 动态生成列配置：Column-B的下拉选项随Column-A的值自动更新
  const columnDefs = useMemo(() => {
    // 提取Column-A的所有值并去重，作为下拉选项
    const columnAOptions = [...new Set(rowData.map(row => row.columnA))];
    return [
      {
        headerName: 'Column-A',
        field: 'columnA',
        editable: true,
        cellEditor: 'agTextCellEditor' // 输入框编辑器
      },
      {
        headerName: 'Column-B',
        field: 'columnB',
        editable: true,
        cellEditor: 'agSelectCellEditor', // 下拉选择编辑器
        cellEditorParams: {
          values: columnAOptions,
          allowTyping: true // 允许输入不在选项列表中的值
        }
      }
    ];
  }, [rowData]); // rowData变化时重新生成列配置，更新下拉选项

  // 监听单元格值变更，处理新增行逻辑
  const handleCellValueChange = (params) => {
    // 只处理Column-B的变更
    if (params.column.getColId() !== 'columnB') return;

    const inputValue = params.newValue;
    // 检查输入值是否已存在于Column-A中（统一转字符串避免类型差异）
    const valueExists = rowData.some(row => row.columnA.toString() === inputValue.toString());

    // 若输入值非空且不存在，则新增一行
    if (inputValue && !valueExists) {
      setRowData(prevData => [...prevData, { columnA: inputValue, columnB: '' }]);
    }
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        editable={true}
        onCellValueChanged={handleCellValueChange}
      />
    </div>
  );
}

export default DynamicTable;

关键细节说明 #

• 动态下拉更新：通过useMemo监听rowData变化，每次Column-A的值修改后，Column-B的下拉选项会自动同步更新
• 输入兼容性：开启allowTyping允许用户输入下拉列表外的值，同时通过类型转换（toString()）避免数字/字符串类型不匹配导致的判断错误
• 新增行逻辑：仅在Column-B输入非空且值不存在于Column-A时新增行，避免无效空行

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