examples/usage-in-browser--table.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/component.min.js"></script>
<script src="../dist/htmel.min.js"></script>
<script src="../dist/storage.min.js"></script>
<script src="../dist/syncTabs.min.js"></script>
<script>
Component.syncTabs = syncTabs;
Component.storage = storage;

// Define a re-usable component
// Just create a function that creates a new Component, and returns it:
function Table(state, schema) {

  const defaults = {
    css: {
      "font-weight": "bold",
      "color": "red",
    },
    attrs: {
      width: "100%",
      "border": 0,
    },
    title: "Title goes here",
    subTitle: "Click me and check the dev tools console",
    headings: [ "Country", "0-10", "11-20", "21-30", "31-40", "older" ],
    content: [
      [ "England", 10, 20, 30, 20, 20 ],
      [ "France",  10, 20, 30, 30, 10 ],
      [ "Germany", 1, 2, 3, 3, 1 ],
    ],
    source: false,
    onclick: e => console.log("CLICKED!", e.target),
  };

  // Create the component to return
  const Table = new Component({ ...defaults, ...state }, schema);

  const TableRows = props => props.map(row =>
    htmel`<tr>${row.map((item, i) => `<td>${row[i]}</td>`)}</tr>`);

  Table.view = props => htmel`
    <div>
      <h2 style="${props.css}">${props.title}</h2>

      <p onclick="${props.onclick}">
        ${props.subTitle}
      </p>
      <table ${props.attrs}>
      <thead>
        <tr>
          ${props.headings.map(h => `<td>${h}</td>`)}
        </tr>
      </thead>
      <tbody>
          ${TableRows(props.content)}
      </tbody>
      </table>
      ${props.source && `<p>Source: ${props.source}</p>`}
    </div>`;

  Table.style = props => `
    table { display: table; }
    thead { font-weight: bold; }
    td { min-width: 50px; padding: 4px; border: 1px solid grey; }`;

  Table.middleware = [ props => console.log("MIDDLEWARE", props.title, Table.uid) ]

  Table.actions({
    add: props => Table.setState({ content: [ ...Table.state.content, props ] })
  })

  return Table;
}


// a counter app
const Counter = new Component({ count: 1 });

Counter.debug = true;

const add = num => Counter({ count: Counter.state.count + num })

Counter.view = props => htmel`
<div>
  <h1>Counter: ${props.count}</h1>
  <button onclick="${e => add(+1)}"> + </button>
  <button onclick="${e => add(-1)}"> - </button>
</div>`;

Counter.store = 'myCounter'; // give a name for the localStorage "store" (optional)

</script>
</head>

<body>

  <div class="demo">
    <div class="table1"></div>
    <div class="table2"></div>
    <div class="table3"></div>
  </div>

  <hr>

  <div class="counter"></div>

  <script>
  // now we can create lots of re-usable components
  var table1 = new Table({ title: "table 1" });
  var table2 = new Table({ title: "table 2" });
  var table3 = new Table({ title: "table 3" });

  table1.render('.table1');
  table2.render('.table2');
  table3.render('.table3');

  table1.add(["Added to ONE",   23, 20, 47,  7, 0])
  table2.add(["Added to TWO",    0, 32, 40, 91, 0])
  table3.add(["Added to THREE", 20, 40, 60, 20, 0])


  Counter.render('.counter');
  </script>

</body>

</html>