0
558
VistasHow can I add icon to react ag-grid rows?
I use react ag-grid library and I tried cellRenderer function but it doesn't work.
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 },
]
my function is;
function actionCellRenderer(params) {
return '<span><i class="bi-react-icons"><BiCoinStack/></i></span>'
}
how can I add icons in ag grid rows ?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You should create a normal react component instead of using template string. You can see the props structure of the custom renderer here.
function IconComponent(props) {
return <YourIcon />
}
Then register in AgGridReact:
<AgGridReact
frameworkComponents={{
iconComponent: IconComponent
}}
Finally, tell your column to use your custom icon renderer:
const columnDefs: ColDef[] = [
{
headerName: "Country",
field: "country",
width: 120,
cellRenderer: "iconComponent"
}
...
]
Live Demo
Reference
·
Juan Pablo Isaza
Denunciar
Responde la pregunta