Tablesorter with unknown # of columns

I am working with tablesorter and am building a header with the following code:

 table.push(['<div class="first"></div>', '<div class="model">Model</div>', 
             '<div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div>',
            '<div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div>', 
            '<div class="fifth" style="width: ' + ColumnWidth[5] + 'px;">' + ColumnNo[5] + ColumnUnit[5] + '</div>',
            '<div class="sixth" style="width: ' + ColumnWidth[6] + 'px;">' + ColumnNo[6] + ColumnUnit[6] + '</div>', 
            '<div class="seventh" style="width: ' + ColumnWidth[7] + 'px;">' + ColumnNo[7] + ColumnUnit[7] + '</div>',
            '<div class="eighth" style="width: ' + ColumnWidth[8] + 'px;">' + ColumnNo[8] + ColumnUnit[8] + '</div>', 
            '<div class="ninth" style="width: ' + ColumnWidth[9] + 'px;">' + ColumnNo[9] + ColumnUnit[9] + '</div>',
            '<div class="tenth" style="width: ' + ColumnWidth[10] + 'px;">' + ColumnNo[10] + ColumnUnit[10] + '</div>', 
            '<div class="eleventh" style="width: ' + ColumnWidth[11] + 'px;">' + ColumnNo[11] + ColumnUnit[11] + '</div>',
            '<div class="twelfth" style="width: ' + ColumnWidth[12] + 'px;">' + ColumnNo[12] + ColumnUnit[12] + '</div>', 
            '<div class="thirteenth" style="width: ' + ColumnWidth[13] + 'px;">' + ColumnNo[13] + ColumnUnit[13] + '</div>',
            '<div class="fourteenth "style="width: ' + ColumnWidth[14] + 'px;">' + ColumnNo[14] + ColumnUnit[14] + '</div>', 
            '<div class="fifteenth" style="width: ' + ColumnWidth[15] + 'px;">' + ColumnNo[15] + ColumnUnit[15] + '</div>',
            '<div class="sixteenth" style="width: ' + ColumnWidth[16] + 'px;">' + ColumnNo[16] + ColumnUnit[16] + '</div>', 
            '<div class="seventeenth" style="width: ' + ColumnWidth[17] + 'px;">' + ColumnNo[17] + ColumnUnit[17] + '</div>']);

This works like a charm, however, I have no way of knowing how many columns will be needed ahead of time, so I need to build the array 'table' dynamically.

Here is what I have come up with for that:

var tableHeaderVar = [];

tableHeaderVar.push(['<div class="first"></div>']);
tableHeaderVar.push(['<div class="model">Model</div>']);

if (ColumnWidth[3] != 0) {
   tableHeaderVar.push(['<div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div>']);
           };

if (ColumnWidth[4] != 0) {
   tableHeaderVar.push(['<div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div>']);
           };
.
.
.
table.push([tableHeaderVar]);

Basically, this checks the set width, which will be 0 if no column is selected. Then, checks the widths for each column to decide whether the column gets included in the array. This code will build the header vertically down the left side of the table, rather than across the top. I captured the output for both methods and used Beyond Compare to compare them. They are compared as "Binary Same", which should mean they are absolutely identical.

First I tried using individual table.push statements, but the results were about the same. I thought maybe the header (and table data) needed to be pushed as a group, so I decided to use one array variable (tableHeaderVar) to build the HTML and then push it all to table at once. Unfortunately, something seems to be not quite right with my method.

Would anyone happen to know something that might work?

Edit There appears to be no resulting HTML for the datatable in either the working (static # of columns) or non-working (# of columns set on the fly) versions. Here is the HTML placeholder for the table (it is identical in both):

<div id="data-grid" class="datagrid">
<div id="testtable"></div>
</div>

As you can see, it's empty. Here is my tablesorter declaration:

$('#testtable').tablesorter({
  theme: 'default',
  widthFixed: false,
  widgets: ['stickyHeaders'],
  widgetOptions: {
  build_source: table,
    build_headers: {
    rows: 1,
    classes: [],
    text: []
    },
    build_footers: {
      rows: 0
    }
  }
});

Solution

I believe I have found the answer. The main issue was that when using the tablesorter build table widget, passing an array (in this case used to add the required columns one at a time) into another array (used as the datasource for the build table widget) simply won't work correctly. After comparing the results of the two arrays, I didn't find any differences, but there was something there that was throwing it off. Also, the datasource array cannot be built one value at a time. At least, I didn't have any luck with that.

Here is what I had to do:

var tableHeaderVar = [];

tableHeaderVar.push(['<th><div class="first"></div></th>']);
tableHeaderVar.push(['<th><div class="model">Model</div></th>']);

if (ColumnNo[3] != null) {
  tableHeaderVar.push(['<th><div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div></th>']);
};

if (ColumnNo[4] != null) {
  tableHeaderVar.push(['<th><div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div></th>']);
};
.
.
.
table = '<thead>' + tableHeaderVar + '</thead>';

So, as you can see, I built an array dynamically to include each column that was needed using the <th> tag. Then, after all the columns were selected, I passed that array into a string variable and enclosed it with the thead tag.

I did something very similar with the table body, except used the <td> tag. As I looped through each datarow, I enclosed each with the <tr> tag. These tags didn't appear to be needed when using an array as the datasource, but when using a string value, they were crucial.