Custom Cell Renderers & Action Buttons in Joget Spreadsheet Elements

Custom Cell Renderers & Action Buttons in Joget Spreadsheet Elements The built-in Spreadsheet Element in Joget DX provides a spreadsheet-like interface for managing tabular records inside forms. However, standard spreadsheet columns only support basic text or dropdown inputs out of the box. If you want to add row-level action buttons (like a Delete Row button) or turn plain cell text into an interactive Modal Popup Link , you can supply custom Handsontable renderer functions directly inside your Spreadsheet column properties. In this guide, we'll look at two practical examples: adding a custom row-deletion button and rendering interactive drill-down links. Example 1: Adding a Custom Delete Row Button In your Joget Spreadsheet element, open column properties for an action column and configure the custom renderer function below: {{ renderer : function ( instance , td , row , col , prop , value , cellProperties ) { // Render custom HTML button inside the cell td . innerHTML = " <button type='button' class='btn-delete-row'>Delete</button> " ; td . style . textAlign = " center " ; // Attach click handler to remove the target row from the Handsontable instance const btn = td . querySelector ( " .btn-delete-row " ); btn . onclick = function ( e ) { e . preventDefault (); e . stopPropagation (); // Get underlying Handsontable instance from the form field const hotInstance = FormUtil . getField ( " your_spreadsheet_field_id " ). data ( " hot " ); if ( hotInstance ) { hotInstance . alter ( " remove_row " , row ); } }; } }} Key Highlights: instance.alter("remove_row", row) removes the target row directly from the underlying data model. e.stopPropagation() prevents Handsontable from entering cell-edit mode when the button is clicked. Example 2: Interactive Drill-Down Popup Links To display a clickable link in a grid cell that opens a detailed record inside a Joget modal dialog (popup iframe), use this cell renderer: {{ renderer : function ( instance , td , row , col , prop , va