Ag-Grid component with input support

[Max_Witteman]

I was able to get delete and add buttons for each row within a table by inserting two columns each with their own rendered button and click on cell action. This functionality allows users to add or delete rows within the current table.

Implementing this consists of following three steps for the add button:

1. create add row string

    string_to_add_row = "\n\n function(e) { \n \
    let api = e.api; \n \
    let rowIndex = e.rowIndex + 1; \n \
    api.applyTransaction({addIndex: rowIndex, add: [{}]}); \n \
        }; \n \n"

2. create a string to render the button and put inside JsCode function:

cell_button_add = JsCode('''
    class BtnAddCellRenderer {
        init(params) {
            this.params = params;
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = `
             <span>
                <style>
                .btn_add {
                  background-color: limegreen;
                  border: none;
                  color: white;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  font-size: 10px;
                  font-weight: bold;
                  height: 2.5em;
                  width: 8em;
                  cursor: pointer;
                }

                .btn_add :hover {
                  background-color: #05d588;
                }
                </style>
                <button id='click-button' 
                    class="btn_add" 
                    >&CirclePlus; Add</button>
             </span>
          `;
        }

        getGui() {
            return this.eGui;
        }

    };
    ''')

3. now add column to GridOptionsBuilder object:

        gb.configure_column('', headerTooltip='Click on Button to add new row', editable=False, filter=False,
                            onCellClicked=JsCode(string_to_add_row), cellRenderer=cell_button_add,
                            autoHeight=True, wrapText=True, lockPosition='left')

In case you would like to get the delete button you have to do following steps:

1. create delete row string

    string_to_delete = "\n\n function(e) { \n \
    let api = e.api; \n \
    let sel = api.getSelectedRows(); \n \
    api.applyTransaction({remove: sel}); \n \

2. create a string to render the button and put inside JsCode function

cell_button_delete = JsCode('''
    class BtnCellRenderer {
        init(params) {
            console.log(params.api.getSelectedRows());
            this.params = params;
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = `
             <span>
                <style>
                .btn {
                  background-color: #F94721;
                  border: none;
                  color: white;
                  font-size: 10px;
                  font-weight: bold;
                  height: 2.5em;
                  width: 8em;
                  cursor: pointer;
                }

                .btn:hover {
                  background-color: #FB6747;
                }
                </style>
                <button id='click-button'
                    class="btn"
                    >&#128465; Delete</button>
             </span>
          `;
        }

        getGui() {
            return this.eGui;
        }

    };
    ''')

3. Now add column to GridOptionsBuilder object

gb.configure_column('Delete', headerTooltip='Click on Button to remove row',
                                    editable=False, filter=False, onCellClicked=JsCode(string_to_delete),
                                    cellRenderer=cell_button_delete,
                                    autoHeight=True, suppressMovable='true')

If anyone is interesting I could also share some additional features we implemented with these buttons:

• Instead of adding an empty row it is possible to define default values for the columns.

• When clicking on delete a pop-up will appear asking for a confirmation from the user before deleting the row.