14

I need to construct a html table from a one dimensional array which, for abstractions sake, has the following format:

{ value: "ABC", colspan: 1, rowspan: 2 }, // etc

There is also a property called width which will be dynamic and represent the number of columns.

The code below, I believe is close, and can handle "non-rowspan" data - but I am getting tripped up on how to account for cells spanning, without the table exceeding the column count.

I feel like I need a "stepper" which counts up and down everytime there is a rowspan, but I can't get the maths correct.

At the moment, any rowspan causes the next row to exit the right of the table.

Essentially I would like it to wrap and drop each one in the next available spot. In otherwords assmeble the table dynamically.

Round 1 - Not working

http://jsbin.com/zopoxaqato/edit?js,console,output

const input = [
  { value: "a1", colspan: 1, rowspan: 1 },
  { value: "a2", colspan: 1, rowspan: 1 },
  { value: "a3", colspan: 1, rowspan: 3 },

  { value: "b1", colspan: 1, rowspan: 1 },
  { value: "b2", colspan: 1, rowspan: 1 },

  { value: "c1", colspan: 1, rowspan: 1 },
  { value: "c2", colspan: 1, rowspan: 2 },

  { value: "d1", colspan: 1, rowspan: 1 },
  { value: "d3", colspan: 1, rowspan: 1 },

  { value: "e1", colspan: 1, rowspan: 1 },
  { value: "e2", colspan: 2, rowspan: 1 },
];
const width = 3;



const trs = [];
let tds = [];
let rowSpanOffset = 0;

// Loops over entries
input.forEach((cell, index) => {

  // Stock standard td
  tds.push(`<td colspan="${cell.colspan}" rowspan="${cell.rowspan}">${cell.value}</td>`);


  // New row time
  if(index % width === width - 1 || rowSpanOffset < 0) {
    trs.push("<tr>" + tds.join('') + "</tr>");
    // Reset for next row
    tds = [];    
  }

});


const leTable = "<table class='table'>"+trs.join('')+"</table>";


$("body").append(leTable);

Round 2 - Improved, but assumes input is valid

http://jsbin.com/solesiyuro/edit?js,output

const input = [
  { value: "a1", colspan: 1, rowspan: 1 }, // 1
  { value: "a2", colspan: 1, rowspan: 1 }, // 2
  { value: "a3", colspan: 1, rowspan: 3 }, // 3

  { value: "b1", colspan: 1, rowspan: 1 }, // 1
  { value: "b2", colspan: 1, rowspan: 1 }, // 1

  { value: "c1", colspan: 1, rowspan: 1 }, // 1
  { value: "c2", colspan: 1, rowspan: 2 }, // 2

  { value: "d1", colspan: 1, rowspan: 1 }, // 1
  { value: "d3", colspan: 1, rowspan: 1 }, // 1

  { value: "e1", colspan: 1, rowspan: 1 }, // 1
  { value: "e2", colspan: 1, rowspan: 1 }, // 2
];
const width = 3;

const totalCellCount = _.reduce(input, (sum, c) => sum + c.colspan * c.rowspan, 0);
const grid = _.chunk(_.fill(new Array(totalCellCount), -1), width);

_.each(input, cell => {
  let start = [-1, -1];

  outerLoop: 
  for(let y = 0; y < grid.length; y++) {
      for(let x = 0; x < width; x++) {
          if(grid[y][x] === -1) {
            start = [x, y];
            break outerLoop;
          }
      }    
  }

  for(let y = 0; y < cell.rowspan; y++) {
      for(let x = 0; x < cell.colspan; x++) {
         grid[start[1] + y][start[0] + x] = null;        
      }    
  }
  grid[start[1]][start[0]] = cell;        

});

let trs = [];
let tds = [];

for(let y = 0; y < grid.length; y++) {
  for(let x = 0; x < grid[y].length; x++) {
    const cell = grid[y][x];
    if(cell) {
      const value = cell.value;
      tds.push('<td colspan="'+cell.colspan+'" rowspan="'+cell.rowspan+'">'+cell.value+'</td>');
    }
  }    
  trs.push('<tr>'+tds.join('')+'</tr>');
  tds = [];
}


$(".table").append(trs.join(''));

Edit - Bad input

An example of bad input would be splitting cells:

const input = [
  { value: "a1", colspan: 1, rowspan: 1 },
  { value: "a2", colspan: 1, rowspan: 2 },
  { value: "a3", colspan: 1, rowspan: 1 },

  { value: "b1", colspan: 3, rowspan: 1 },

];
const width = 3;
Chris
  • 54,599
  • 30
  • 149
  • 186
  • I'm thinking of what should happen when the input is invalid and I can't think of something that would cover every possible case. The only thing I see is a message or something saying the input is invalid (and possibly a reason why/where)... Do you expect the invalid input to be "fixed"? If so, there are quite a few ways the input can be invalid, what should happen in each case? – Bikonja May 14 '16 at 23:02
  • Ideally "a graceful" catch of the error would be best - I am leaning towards setting all col/row spans to 1 in the case of failure so the table is still usable, and display an error along with it. – Chris May 14 '16 at 23:10
  • Since your data is ideal it is not very clear how you want to handle edge cases. I.e. if the rowspan in a were on a2 and a colspan of 2 was on b1, what are you trying to make happen? – lossleader May 14 '16 at 23:37
  • @Chris so basically your second solution would be acceptable if there was basically a `ValidateInput` function to check if the input is valid i.e. if someone were to add that function it would be the acceptable answer to your question? – Bikonja May 15 '16 at 00:06
  • Ah yes the provider input is ideal. I will add an example of bad input now – Chris May 15 '16 at 01:56
  • The tables in your examples are so haphazard as to suggest that they shouldn't be table cells at all but rather each cell would be better off as a `div` tag. Are you sure you aren't making this hard than it needs to be? Also take a look at masonry.js. I'd be interested to what you would expect the output of your example to look like. – OrderAndChaos May 15 '16 at 07:38
  • Yes I'm sure. It's an intentionally extreme example - but semantically the data represented will be tabular data. Secondly, I think divs (without an externa library like masonry) are just as tricky if not more so, to achieve vertical spans – Chris May 15 '16 at 08:06
  • http://stackoverflow.com/questions/36726898/creating-html-table-from-java-check-if-td-already-has-a-td-to-the-right-of-it check this question out – codefreaK May 21 '16 at 17:10
  • @hakre um, dude, there is literally a width variable below the array of data? – Chris May 21 '16 at 23:29

3 Answers3

6

I think you were on the right track with your alternative solution, the two corner cases that should be validated are

  • a cell might be rendered out of bounds e.g. when a cell's start position + its colspan is bigger than the width allowed (the blue cell is rendered out of bounds)

out of bounds

  • a cell might be rendered in a place already occupied (the blue cell tries to occupy a space taken by the red cell)

cell occupied

I came up with the following algorithm which is very similar to your second solution

  • Create a matrix of N rows and width columns, the value of N will be allocated whenever needed
  • For each cell in your input
    • Move from left to right starting from the first row of the matrix trying to find an empty space, note that this is where the allocation of new rows occur if there wasn't an empty space in the current row
    • Let i and j be the row and column of the first empty space in the matrix, then we need to occupy the following i + cell.rowspace times j + cell.colspace cells, In the implementation I use the index of cell
    • If by any means cell tries to occupy an out of bound cell throw an error
    • If by any means cell tries to occupy a cell in the matrix which already has some value saved throw an error

The implementation looks as follows

class Matrix {
  constructor(width) {
    this.width = width
    this.data = []
  }

  set(i, j, d) {
    if (j >= width) throw Error(`set was run out of bounds index (${i}, ${j})`)
    var value = this.get(i, j)
    if (value !== undefined) throw Error(`cell (${i}, ${j}) is occupied with ${value}`)
    this.data[i][j] = d
  }

  get(i, j) {
    this.data[i] = this.data[i] || Array(this.width)
    return this.data[i][j]
  }

  findNextEmpty(i, j) {
    while (true) {
      if (this.get(i, j) === undefined) {
        return [i, j]
      }
      j += 1
      if (j === this.width) {
        i += 1
        j = 0
      }
    }
  }

  fromData(data) {
    let i = 0
    let j = 0
    data.forEach((meta, metaIndex) => {
      [i, j] = this.findNextEmpty(i, j)
      for (var ci = i; ci < i + meta.rowspan; ci += 1) {
        for (var cj = j; cj < j + meta.colspan; cj += 1) {
          this.set(ci, cj, metaIndex)
        }
      }
    })
    return this.data
  }  
}

try {
  const table = new Matrix(width).fromData(input)
} catch (err) {
  // the input was invalid
}

Demo

Update: A user has posted a case in the comments which seemed not to render fine, the algorithm above works for this case, even the markup looks fine however it seems like a row in this table was rendered with a height equal to zero, I'm sure there are a lot of ways to fix this, I fixed it by setting a fixed height over the table tr elements

Demo fixing the problem where a <tr> was rendered with a height = 0

Mauricio Poppe
  • 4,817
  • 1
  • 22
  • 30
  • 1
    Interesting solution. However, it will skip rows that only contain cells with a rowspan larger than `1`. For example: http://jsbin.com/faqosenowu/edit?js,output where `a3`, `c2`, and `d1` are all supposed to have a height of 2 rows. – C14L May 15 '16 at 07:19
  • ty for the feedback @C14L, I didn't understand first what was the problem with the table since the markup was fine (I checked on http://www.tablesgenerator.com/html_tables and the markup output for your example was the same), however I noticed that one of the rows was rendered with no height, I added one "sentinel" cell as the first cell of each row to avoid this quirk http://jsbin.com/lulevoc/edit?css,js,console,output – Mauricio Poppe May 15 '16 at 14:19
  • Another simple way to solve this problem is by setting a fixed height over the `table tr` elements, jsbin link updated – Mauricio Poppe May 15 '16 at 15:31
  • Meanwhile, if you look at https://jsbin.com/qoxacu/edit?html,output you can notice that tr height isn't 0. It is about 1px (border width or so). The same is when you create such table structure manually. – Alex Kudryashev May 15 '16 at 18:27
3

This is straightforward solution of the question.

    function buildTbl() {
        var tbl = document.createElement('table');
        tbl.className = 'tbl';
        var cols = width, tr = null, td = null, i = 0, inp = null, rowspan = [];
        while (inp = input[i]) {
            if (cols >= width) {
                tr = tbl.insertRow(-1);
                cols = 0;
                for (var j = 0, n = rowspan.length; j < n; j++) {
                    if (rowspan[j] > 1) {
                        cols++;
                        rowspan[j]--;
                    }
                }
            }
            td = tr.insertCell(-1);
            td.innerHTML = inp.value;
            if (inp.colspan > 1)
                td.setAttribute('colspan', inp.colspan);
            if (inp.rowspan > 1) {
                td.setAttribute('rowspan', inp.rowspan);
                rowspan.push(inp.rowspan);
            }
            cols += inp.colspan;
            i++;
        }
        document.getElementById('content').appendChild(tbl);
    }

Update:

If I add css then the table is rendered as expected (desired).

    .tbl{border:solid 1px #ccc}
    .tbl tr{height:20px}
    .tbl td{border:solid 1px #fcc}

Generated HTML:

<table class="tbl">
    <tbody>
        <tr>
            <td>a1</td>
            <td>a2</td>
            <td rowspan="3">a3</td>
        </tr>
        <tr>
            <td rowspan="2">b1</td>
            <td>b2</td>
        </tr>
        <tr>
            <td rowspan="2">c2</td>
        </tr>
        <tr>
            <td>d1</td>
            <td>d3</td>
        </tr>
        <tr>
            <td>e1</td>
            <td colspan="2">e2</td>
        </tr>
    </tbody>
</table>

Update 2

If you have enough content then there is no need for fixed height of tr.

        const input = [
  { value: "a1 long content long content long content long content long content long content long content ", colspan: 1, rowspan: 1 },
  { value: "a2 long content long content long content long content long content long content", colspan: 1, rowspan: 1 },
  { value: "a3 long content long content long content long content long content long content", colspan: 1, rowspan: 3 },

  { value: "b1 long content long content long content long content long content long content long content long content long content long content", colspan: 1, rowspan: 2 },
  { value: "b2 long content long content long content long content long content long content", colspan: 1, rowspan: 1 },

 // { value: "c1", colspan: 1, rowspan: 1 },
  { value: "c2 long content long content long content long content long content long content long content", colspan: 1, rowspan: 2 },

  { value: "d1 long content long content long content long content long content long content", colspan: 1, rowspan: 1 },
  { value: "d3 long content long content long content long content long content long content", colspan: 1, rowspan: 1 },

  { value: "e1 long content long content long content long content long content", colspan: 1, rowspan: 1 },
  { value: "e2 long content long content long content long content long content long content", colspan: 2, rowspan: 1 },
              ];

Css:

    .tbl{border:solid 1px #ccc;width:300px}
    /*.tbl tr{height:20px}*/
    .tbl td{border:solid 1px #fcc}

Even more, .tbl tr{height:20px} has no effect.

Alex Kudryashev
  • 9,120
  • 3
  • 27
  • 36
  • Skips rows when all its cells have a rowspan larger than `1`. See cells `a3`, `b1`, `c2` here https://jsbin.com/qoxacu/edit?html,output – C14L May 15 '16 at 07:47
  • I updated the answer and then found that @Mauricio Poppe offered the same fix (`tr {height:20px}`) – Alex Kudryashev May 15 '16 at 17:07
1

Well this is the v0.0.1 which handles any input data and constructs the HTML text provided that, like in this case, a meaningful input data is supplied as in the vertical and horizontal spanned cells don't intersect or colspan won't pass beyond the limit set by the supplied width value. I also plan to develop a V0.0.2 at a later time which will be able to produce a valid table layout whatever random colspan and rowspan values exist. I think v0.0.1 is sufficient for your needs.

I first developed a tableMap which constructs the map of the table in a 2D array. Actually on the client side, now constructing the DOM table is fairly easy. The main cells are marked by an extra property called sp as 0 and the spanned ones have sp property as a non-zero value. So actually the DOM tree is readily available in this 2D array. Just a reverse iteration to pick the cells with sp == 0, is the only thing to be done to construct the DOM tree.

However since you ask for HTML table, for the server side i move one step further and convert the tableMap into HTML string.

Sorry for my unorthodox indenting style. I prefer using arrows, ternary and short circuits a lot, hence a wide layout is more easy for me to perceive the code.

The code for you to play with @ repl.it

var input = [
  { value: "a1", colspan: 1, rowspan: 1 },
  { value: "a2", colspan: 1, rowspan: 1 },
  { value: "a3", colspan: 1, rowspan: 3 },

  { value: "b1", colspan: 1, rowspan: 1 },
  { value: "b2", colspan: 1, rowspan: 1 },

  { value: "c1", colspan: 1, rowspan: 1 },
  { value: "c2", colspan: 1, rowspan: 2 },

  { value: "d1", colspan: 1, rowspan: 1 },
  { value: "d3", colspan: 1, rowspan: 1 },

  { value: "e1", colspan: 1, rowspan: 1 },
  { value: "e2", colspan: 2, rowspan: 1 },
],
    width = 3,
cellCount = input.reduce((p,c) => p += c.colspan * c.rowspan,0),
 rowCount = Math.ceil(cellCount/width),
       rc = {r:0,c:0},
 tableMap = input.reduce((t,e) => { var getNextRC = (rc) => {rc.r = rc.c == 2 ? ++rc.r : rc.r;
                                                             rc.c = ++rc.c%width;
                                                             return rc},
                                       insertCell = (rc) => { if (!t[rc.r][rc.c]){
                                                                  for (var c = 0; c < e.colspan; c++)
                                                                  for (var r = 0; r < e.rowspan; r++)t[rc.r+r][rc.c+c] = {"td": e, "sp": r+c};
                                                                getNextRC(rc);
                                                              } else {
                                                               getNextRC(rc);
                                                               insertCell(rc);
                                                              }
                                                              return rc;
                                                            };
                                    rc = insertCell(rc);
                                    return t;}, new Array(rowCount).fill(true).map(e => new Array(width).fill(false))),
tableHTML = tableMap.reduceRight((t,r,i) => { var dt = r.reduceRight((t,d,i) => t = !d.sp ? i > 0 ? '</td><td colspan = "' + 
                                                                                                    d.td.colspan +
                                                                                                    '" rowspan = "' +
                                                                                                    d.td.rowspan +
                                                                                                    '">' + d.td.value + t
                                                                                                  : '<td colspan = "' + 
                                                                                                    d.td.colspan +
                                                                                                    '" rowspan = "' +
                                                                                                    d.td.rowspan +
                                                                                                    '">' + d.td.value + t
                                                                                          : t, '</td>');
                                              t = i > 0 ? '</tr><tr>' + dt + t
                                                        : '<tr>' + dt + t;
                                              return t;
                                            }, '</tr>');

document.write("<style>table, th, td {border: 1px solid black;}</style>");
document.write('<table>' + tableHTML + '</table>');
Redu
  • 25,060
  • 6
  • 56
  • 76