Control Table - Voliware/Template GitHub Wiki

More Than a Table

Tables on their own can be useful, but they provide even more functionality as a ControlTable, which extends RenderTable. When you need to delete, edit, view or manipulate a table row in some way, ControlTable provides an excellent base to add buttons to the end of each row.

Example

This wiki does not allow buttons, so they are replaced with links

Player Goals Assists
Wayne Gretzky 894 1,963 View Update Delete
Brent Gretzky 1 3 View Update Delete

Delete Button

This button simply deletes the row from the table HTML. If it needs to do more for your application, such as actually delete a row in a database, you must extend ControlTable and override the _createDeleteButton method:

class PlayerStatsTable extends ControlTable {

    constructor(){
       super();
    }

    _createDeleteButton(data){
         // optionally maintain the original functionality
         var $btn = super._createDeleteButton(data);
         // add something to the click event
         $btn.click(function(){
             Server.deleteDatabaseRow(data);
         });
         return $btn;
    }
}

View Button

The view and update buttons unfortunately do nothing out-of-the-box, as ControlTable (nor its creator!) have any idea what your application should do when these buttons are clicked. Just like the delete button, it may be necessary to override these methods in your own ControlTable class.

_createViewButton(data){
     // at least the button is created 
     var $btn = super._createViewButton(data);
     $btn.click(function(){
         Server.getRowData(data)
             .done(function(serverData){
                  showViewModal(serverData);
             });
     });
}

Update Button

_createUpdateButton(data){
     // at least the button is created 
     var $btn = super._createUpdateButton(data);
     $btn.click(function(){
         Server.getRowData(data)
             .done(function(serverData){
                  showUpdateModal(serverData);
             });
     });
}

Please, Sir, May I Have Some More?

Your table may need more buttons to add more row-based functionality. When this is the case, extend ControlTable and add some options and methods. For example, to add a report button:

class ReportTable extends ControlTable {
     
    constructor(options){
         var defaults = {
             // can get rid of the delete button 
             deleteButton : false,
             reportButton : true
         }
         // check out the $Util wiki for this explination
         super($Util.opts(defaults, options));
     }
 
     // add the button to incoming data
     // as if it was part of the data
     _processRow(data){
        data = super._processRow(data);
        this._addReportButton(data);
        return data;
     }

    // this follows the same approach as the other buttons
    _addReportButton(data){
        data.reportButton = this._createReportButton(data);
        return this;
    }

    _createReportButton(data){
        return $('<button type="button">REPORT!</button>')
               .click(function(){
                    Server.report(data);
               });
    }
}

Use:

var reportTable = new ReportTable({
    template : $('#reportTableTemplate'),
    identifier : 'reportId'
})
.build(data);
Document Words Grade
Github Wiki 5,245 A++ View Update REPORT!
⚠️ **GitHub.com Fallback** ⚠️