如何添加图标以响应 ag-grid 行？答案

【问题标题】：How can I add icon to react ag-grid rows?如何添加图标以响应 ag-grid 行？
【发布时间】：2021-11-25 00:06:29
【问题描述】：

我使用 react ag-grid 库并尝试了 cellRenderer 功能，但它不起作用。

columnDefinationWaterUsage: [
                { headerName: "", cellRenderer: countCellIndex, width: 45, minWidth: 40, editable: false, },
                { headerName: "Yıl", field: "Year", width: 50, minWidth: 50, maxWidth: 100, suppressSizeToFit: false, sortable: true },
                { headerName: "Dönem", field: "TermSequence", width: 75, minWidth: 50, maxWidth: 100, suppressSizeToFit: false },
                { headerName: "İlk Endeks", field: "FirstIndex", width: 90, minWidth: 50, maxWidth: 150, suppressSizeToFit: false },
                { headerName: "Son Endeks", field: "LastIndex", width: 95, minWidth: 50, maxWidth: 150, suppressSizeToFit: false },
                { headerName: "Tüketim", field: "UsageAmount", width: 75, minWidth: 50, maxWidth: 100, suppressSizeToFit: false },
                { headerName: "Tutar", field: "TotalAmount", width: 60, minWidth: 50, maxWidth: 100, suppressSizeToFit: false },
                { headerName: "Son Ödeme Tarihi", cellRenderer: (data) => { return ChangeDateFormatRowdata(data.data.LastPaymentDate) }, width: 135, minWidth: 50, maxWidth: 200, suppressSizeToFit: false },
                { headerName: "Okuma Tarihi", cellRenderer: (data) => { return ChangeDateFormatRowdata(data.data.ProcessDate) }, width: 110, minWidth: 50, maxWidth: 200, suppressSizeToFit: false },
                { headerName: "Tahakkuk", cellRenderer: actionCellRenderer, width: 85, minWidth: 50, maxWidth: 200, suppressSizeToFit: false },
                { headerName: "Tahsilat", cellRenderer: actionCellRenderer, width: 85, minWidth: 50, maxWidth: 200, suppressSizeToFit: false },
            ]

我的功能是；

function actionCellRenderer(params) {
    return '<span><i class="bi-react-icons"><BiCoinStack/></i></span>'       
  }

如何在 ag 网格行中添加图标？

【问题讨论】：

标签： javascript reactjs icons ag-grid

【解决方案1】：

您应该创建一个普通的反应组件，而不是使用模板字符串。可以看到自定义渲染器here的props结构。

function IconComponent(props) {
  return <YourIcon />
}

然后在AgGridReact注册：

<AgGridReact
  frameworkComponents={{
    iconComponent: IconComponent
  }}

最后，告诉您的专栏使用您的自定义图标渲染器：

const columnDefs: ColDef[] = [
  {
    headerName: "Country",
    field: "country",
    width: 120,
    cellRenderer: "iconComponent"
  }
  ...
]

现场演示

参考

https://www.ag-grid.com/react-data-grid/component-cell-renderer/#simple-cell-renderer-example

【讨论】：