Generates an HTML table from an arbitrary JavaScript object

jsTable.js

function render_jsTable(jsTable) {

  // build arbitrary HTML table from object

  var html = [];
  var table = $("<table>");
  var thead = $("<thead>").appendTo(table);
  var tbody = $("<tbody>").appendTo(table);
  if (jsTable.tableData.table) {
    $.each(jsTable.tableData.table, function (key, val) {
      switch (key) {
        case "tableID":
          table.attr("id", val);
        break;

        case "tableClass":
          table.addClass(val);
        break;

        case "tableStyle":
          table.attr("style",val);
        break;

        case "tableData":
          table.data(val);
        break;
      }
    });
  }
  
  var thead_row = $("<tr>").appendTo(thead);
  
  if (jsTable.tableData.headerKeys) {
    $.each(jsTable.tableData.headerKeys, function (i, headerKey) {
      
      var htext = jsTable.tableData.headerText[i] ? jsTable.tableData.headerText[i] : "";
      var th = $("<th>").attr("data-field", headerKey).text(htext).appendTo(thead_row);
      
      if(jsTable.tableData.colAtts){
        if(jsTable.tableData.colAtts[ headerKey ]){
          
          $.each(jsTable.tableData.colAtts[ headerKey ], function(attrKey, attrValue){
            switch (attrKey) {
              case "colClass":
                th.addClass(attrValue);
              break;

              case "colStyle":
                th.attr("style",attrValue);
              break;
            }
          });
          
        }
      }
      
    });
  }

  var tbody_row;
  if (jsTable.tableData.rows) {
    $.each(jsTable.tableData.rows, function (index, row) {
      
      tbody_row = $("<tr>").appendTo(tbody);
      
      $.each(row, function (key, val) {

        switch (key) {
          case "rowID":
            tbody_row.attr("id", val);
          break;

          case "rowClass":
            tbody_row.addClass(val);
          break;

          case "rowColumns":
            tbody_row.data(row.rowColumns); // store row dataset
            
            $.each(jsTable.tableData.headerKeys, function (i, headerKey) { // use headerKeys as sequencer - json objects have no inherrent order (via ajax responses)

              if (row.rowColumns[headerKey]) {
                var td = $("<td>").data({original:row.rowColumns[headerKey]}).html(row.rowColumns[headerKey]).appendTo(tbody_row);


                // add any additional attributes to the table data cell (class and style)
                if(jsTable.tableData.colAtts){
                  if(jsTable.tableData.colAtts[headerKey]){
                    $.each(jsTable.tableData.colAtts[headerKey], function(attrKey, attrValue){
                      switch (attrKey) {
                        case "colClass":
                          td.addClass(attrValue);
                        break;

                        case "colStyle":
                          td.attr("style",attrValue);
                        break;
                      }
                    });
                  }
                }
              }else{  // Add empty table data
                $("<td>").appendTo(tbody_row);
              }
            });
          break;
        }
      });
    });
  }

  // append or fill container
  if (jsTable.append) {
    // append
    $(jsTable.target).append(table);
  } else {
    // fell
    $(jsTable.target).html(table);
  }

  // trigger any functions after DOM is updated
  if (jsTable.funcs) {
    console.log("jsTable:jsTable.funcs", jsTable.funcs);
    $.each(jsTable.funcs, function (funcName, args) {
      if (typeof(window[funcName]) != "undefined") {
        window[funcName].apply(null, args);
      }
    });
  }
}


// basic example

var jsTable = {
  target: "body", // css selector where the table will appear
  append: false, // false=fill the target element, true=append at the end of any existing content
  funcs: [{ // not related to table dataset functions
      "some_function_name": ["arg1","arg2","etc"],
    },{
      "another_function_name": "arg",
    },
  ],
  tableData: {
    table: {
      tableID: "thisDatatabe",          //optional
      tableClass: "my-datatabe wide",   //optional
      tableStyle: "width:100%;",        //optional
      tableData: {  // table dataset - can store any object unlike data-* attributes    //optional
        yo: "mama",
        func: function(){
          alert( $("#thisDatatabe").data("yo") );  // e.g. $("#thisDatatabe").data("func")();
        },
        anotherFunction: function( message ){
          alert( message );  // e.g. $("#thisDatatabe").data("anotherFunction")( "some message" );
        },
      },
    },
    headerKeys: [// header and column data (order) // required
      "id",
      "name",
      "email",
      "phone",
      "actions"
    ],
    headerText: [// should match headerKeys // required for a header row
      "ID",
      "Name",
      "Email",
      "Phone",
      "Actions",
    ],
    colAtts: {   //optional
      id: {
        colClass: "",
        colStyle: "width:1%;",
      }
    },
    rows: [{   //optional but recommended
        rowID: "row1",   //optional
        rowClass: "my-datatabe wide",   //optional
        rowColumns: {   //the row data indexed by headerKeys - can appear in any sequence
          id: 1,
          name: "Bob",
          email: "b@b.com",
          phone: "987654",
          actions: '<button class="btn btn-sm btn-success"><i class="fa fa-user"></i></button>'
        }
      }, {
        rowID: "row2",
        rowClass: "my-datatabe wide",
        rowColumns: {
          id: 2,
          name: "Jane",
          email: "b@b.com",
          phone: "987654",
          actions: '<button class="btn btn-sm btn-success"><i class="fa fa-user"></i></button>'
        }
      }
    ],
  },
};

render_jsTable(jsTable);


// minimal options

var jsTable = {
  target: "body", // css selector where the table will appear
  append: false, // false=fill the target element, true=append at the end of any existing content
  tableData: {
    headerKeys: [// header and column data (order) // required
      "id",
      "name",
      "email",
      "phone",
      "actions"
    ],
    headerText: [// should match headerKeys // required
      "ID",
      "Name",
      "Email",
      "Phone",
      "Actions",
    ],
    rows: [{   //optional but recommended
        rowColumns: {   //the row data indexed by headerKeys - can appear in any sequence
          actions: '<button class="btn btn-sm btn-success"><i class="fa fa-user"></i></button>',
          name: "Bob",
          email: "b@b.com",
          id: 1,
          phone: "987654",
        }
      }, {
        rowColumns: {
          id: 2,
          name: "Jane",
          email: "b@b.com",
          phone: "987654",
          actions: '<button class="btn btn-sm btn-success"><i class="fa fa-user"></i></button>',
        }
      }
    ],
  },
};