## 2017-06-02 Table Example

<lively-script>
import boundEval from "src/client/bound-eval.js";
window.lively4container = this.parentElement.parentElement
var code = this.parentElement.parentElement.querySelector("code").textContent
boundEval("(async () => {" + code + "})()")
""
</lively-script>

```JS
  var path = "" + lively4container.getPath();
  var opts = JSON.parse(await lively.files.statFile(path.replace(/[^/]*$/,"")))

  var table = document.createElement("lively-table") // something like this lineshould be enough
  await lively.components.openIn(lively4container, table) // and this is to much 
  
  table.setFromJSO(_.sortBy(opts.contents.map( ea =>  {
    return {
      name: ea.name.replace(/\.md/,"")
    }
  }), ea => ea.name).reverse().filter(ea => ea.name.match(/\d\d\d\d-\d\d-\d\d/)))

  _.find(table.querySelectorAll("th"), ea => ea.textContent == "name").style.width = "300px"

```

- #TODO allow to load a component without opening them first, is this a browser limitation?
- #TODO make table column styling based on content easier