如何向 Ag Grid 中的列单元格添加“编辑”图标？

Question

我在我的项目中使用Ag Grid。两列由可编辑单元格组成。我想向这些单元格添加一个编辑图标以表明它们是可编辑的。我尝试使用

cellRenderer

在

columnDefs

，但它没有显示编辑图标，而是显示了 HTML 代码

<span><i class="fa fa-edit">0</i></span>

。我该如何解决它？

这是代码：

const [columnDefs] = useState([
{
      field: "title",
    },
{
      field: "result",
      editable: true,
      cellEditor: "agRichSelectCellEditor",
      cellEditorPopup: true,
      cellEditorParams: {
        values: ["Pass", "Fail", "Completed", "Not Checked"],
      },
      cellRenderer: function (params) {
        return '<span><i class="fa fa-edit">' + params.value + "</i></span>"
      },
    },
])

Answer 1

正如您所发现的，当您的单元格渲染器返回一个字符串时，该字符串将按字面意思渲染。

您可以做两件事。

第一个是使用组件来渲染单元格。

ag-grid 文档有一个 React 单元渲染组件的示例，位于 https://www.ag-grid.com/react-data-grid/component-cell-renderer/#complex-cell-renderer-example

另一种可能性是根本不使用单元格渲染器，而只需设置包含 CSS 的“cellStyle”来渲染图标。