Message from JavaScript discussions

November 2017

—

<template id="rowTemplate">
  <div data-content-text="column0"></div>
  <div data-content-text="column1"></div>
  <div data-content-text="column2"></div>
  <div data-content-text="column3"></div>
</template>

Message permanent page

—

var rows = [
  {
    column0: "Name",
    column1: "Age",
    column2: "Job",
    column3: "Favorite Color"
  },
  {
    column0: "Dani",
    column1: "24",
    column2: "SysAdmin",
    column3: "Purple"
  }
];

— There, quick attempt :P

— Should generate this:

<div id="templateContainer">
  <div>Name</div>
  <div>Age</div>
  <div>Job</div>
  <div>Favorite Color</div>

  <div>Dani</div>
  <div>24</div>
  <div>SysAdmin</div>
  <div>Purple</div>
</div>

Message permanent page

— Which ofc needs extra styling, but that's good markup

— determin1st

— I imagine a simple flexbox would work great

— It can paginate as well

— Well it's not a framework lol, that's just how I'd do it myself

— Simple flexbox with wrap turned on, append the same row template over and over

— That particular example is

— There is pretty much nothing forcing you to use a template either