Estoy buscando agregar botones de pie de página a mi AG Grid y quiero que estén relacionados con las filas de la cuadrícula, es decir, quiero que estén habilitados o deshabilitados en función de ciertos datos específicos de la fila.
No estoy seguro de si eso requeriría una implementación personalizada O si hay algún soporte listo para usar dentro de Ag-grid.
TEMA
class CustomPinnedRowRenderer { init(params) { this.eGui = document.createElement('div'); this.eGui.innerHTML = `<button id='editBtn'>Edit<button> <button id='deleteBtn' disabled>Delete<button>`; } After executing the line this.eGui.innerHTML, I somehow get an unnecessary/extra button element, NOT sure why...so the actual innerHTML rendered after I inspect is as below; <button id="editBtn">Edit</button><button> </button><button id="deleteBtn" disabled="">Delete</button><button></button>Hay algunas maneras de lograr esto:
La clave aquí es la siguiente:
<AgGridReact // ... onRowSelected={(params) => { params.api.redrawRows({ rowNodes: [params.api.getPinnedBottomRow(0)], }); }} isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'} fullWidthCellRenderer={CustomPinnedRowRenderer} pinnedBottomRowData={[{}]} ></AgGridReact>onRowSelected , de modo que se pueda volver a calcular la lógica para deshabilitar el botón. const CustomPinnedRowRenderer = memo((props) => { const selectedNodes = props.api.getSelectedNodes(); const isFirstRowSelected = selectedNodes.filter((node) => node.rowIndex === 0).length > 0; return ( <button disabled={isFirstRowSelected}> enabled only if first row is selected </button> ); });Vea esto implementado en el siguiente Plunkr