0
557
Views¿Cómo puedo agregar un ícono para reaccionar a las filas de la cuadrícula agrícola?
Uso la biblioteca reaccionar ag-grid y probé la función cellRenderer pero no funciona.
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 }, ]mi función es;
function actionCellRenderer(params) { return '<span><i class="bi-react-icons"><BiCoinStack/></i></span>' }¿Cómo puedo agregar íconos en las filas de la cuadrícula agrícola?
·
Juan Pablo Isaza
1 answers
Answer question0
Debe crear un componente de reacción normal en lugar de usar una cadena de plantilla. Puede ver la estructura de accesorios del renderizador personalizado aquí .
function IconComponent(props) { return <YourIcon /> } Entonces regístrese en AgGridReact :
<AgGridReact frameworkComponents={{ iconComponent: IconComponent }}Finalmente, dígale a su columna que use su renderizador de ícono personalizado:
const columnDefs: ColDef[] = [ { headerName: "Country", field: "country", width: 120, cellRenderer: "iconComponent" } ... ]Demo en vivo
Referencia
·
Juan Pablo Isaza
Report
Answer question