Блог

Я использую библиотеку 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 ?

Вы должны создать обычный компонент react вместо использования строки шаблона. Вы можете увидеть структуру реквизитов пользовательского средства визуализации здесь.

 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