JSFiddle - React, Tailwind, and code Playground

by fiatjaf ~

HTML

<div id="main"></div>

CoffeeScript

{ul, li, a, table, thead, tbody, tr, th, td} = React.DOM

TreeJSON = React.createClass
  render: ->
    if Array.isArray @props.data
      keys = {}
      for item in @props.data when typeof item == 'object' and not Array.isArray item
        for key in Object.keys item
          keys[key] = true

      keylength = keys.length
      (table {},
        (thead {},
          (tr {},
            (th {key: key}, key) for key in keys
          )
        )
        (tbody {},
          (=>
            rows = []
            for item, i in @props.data
              if Array.isArray item
                cells = (td colSpan: keylength,
                  (TreeJSON data: item)
                )
              else if typeof item == 'object'
                cells = []
                for key in keys
                  if item[key]
                    console.log item[key]
                    cells.push (td {key: key}, (TreeJSON data: item[key]))
                  else
                    cells.push (td {key: key})
              else
                cells = (td {colSpan: keylength}, item)
                
              rows.push (tr {key: i}, cells)
            return rows
          )()
        )
      )
        
    else
      JSON.stringify @props.data
    
data = [{"note":"início do dia","kind":"comment"},{"q":"200","u":"g","item":"ovo de codorna","value":"20","kind":"venda"},{"q":"1","u":"kg","item":"bolo de banana","value":"4.80","kind":"venda"},{"q":"1","u":"kg","item":"açúcar mascavo","value":"13.20","kind":"venda"},{"q":"500","u":"g","item":"cogumelo","value":"1","kind":"venda"},{"q":"1","u":"pacote","item":"uvas","value":"4.50","kind":"venda"},{"q":"1","u":"kg","item":"uvas ","value":"40","kind":"venda"},{"q":"400","u":"g","item":"cacau-em-pó","value":"4","kind":"venda"},{"note":"isto é um comentário","kind":"comment"},{"q":"1","u":"pct","item":"soja...