javascript - 如何添加图标来 react ag-grid 行？

Question

我使用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 网格行中添加图标？

Answer 1

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

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