Daily Challenge #226 - Array to HTML Table

#challenge

You need to write a function called toTable, that takes three arguments:

data - a 2D array (list),
headers - an optional boolean value. If True, the first row of the array is considered a header. Defaults to False,
index - an optional boolean value. If True, the first column in the table should contain 1-based indices of the corresponding row. If headers arguments is True, this column should have empty header. Defaults to False.
and returns a string containing HTML tags representing the table.
HTML table is structured like this:

<table>
  <thead>                 <!-- an optional table header -->
    <tr>                  <!-- a header row -->
      <th>header1</th>    <!-- a single header cell -->
      <th>header2</th>
    </tr>
  </thead>
  <tbody>                 <!-- a table's body -->
    <tr>                  <!-- a table's row -->
      <td>row1, col1</td> <!-- a row's cell -->
      <td>row1, col2</td>
    </tr>
    <tr>
      <td>row2, col1</td>
      <td>row2, col2</td>
    </tr>
  </tbody>
</table>

The table header is optional. If header argument is False then the table starts with

tag, ommiting .

So, for example:

toTable([["lorem", "ipsum"], ["dolor", "sit amet"]], true, true)

returns

`<table><thead><tr><th></th><th>lorem</th><th>ipsum</th></tr></thead><tbody><tr><td>1</td><td>dolor</td><td>sit amet</td></tr></tbody></table>"`

As you can see, no linebreaks or whitespaces (except for the ones present in the array values) are included, so the HTML code is minified.

IMPORTANT NOTE: if the value in the array happens to be None, the value of the according cell in the table should be an empty string ("")! Otherwise, just use a string representation of the given value, so, dependent on the language, the output can be slightly different. No additional parsing is needed on the data.

Tests
Find the output for each of these input parameters.
input": [[["o"]]],
input": [[["lorem", "ipsum"], ["dolor", "sit amet"]], true, true],
input": [[[1, 2, 3], [4, 5, 6], [7, 8, 9]], false, true]

Good luck!

This challenge comes from David Gildor on CodeWars. Thank you to CodeWars, who has licensed redistribution of this challenge under the 2-Clause BSD License!

Want to propose a challenge idea for a future post? Email yo+challenge@dev.to with your suggestions!

Top comments (2)

George WL • Apr 16 '20

Es6+ JavaScript

function toTable(datalist, isFirstRowHeader=false, isIndexed=false){
  let headers=[]
  if(isFirstRowHeader&&datalist&&datalist[0].length>0){
    // parse first row
      headers = datalist[0]
      if (isIndexed&& headers&& headers.length>1){
        headers.unshift('')
      }
    }
  const headerRowHTML = toHtmlHead(headers)
  const bodyHTML = toHtmlBody(datalist.slice(isFirstRowHeader?1:0),isIndexed);
  return `<table>${headerRowHTML}${bodyHTML}</table>`
}
const toHtmlHead = headers =>{
    return `<thead><tr>${
      headers.map(header=>`<th>${
        header
      }</th>`).join('')
    }</tr></thead>`
}
const toHtmlBody = (bodyData,isIndexed)=>{
  return `<tbody>${bodyData.length>1?
    bodyData.map((row,index)=>`<tr>${
      isIndexed ?
        `<td>${index+1}</td>`:
          ''
          }${
      row
        .map(cell=>`<td>${cell}</td>`)
        .join('')}</tr>`)
        .join('')
    :
      bodyData
      }` 
}