Table

Plans, prices, endpoints: anything compared across columns. On a phone each row becomes a card.

kit.table()
615 B of CSS · 25 rules
kit-data.css
No script needed

Plans
Plan	Price	Streams	Clips kept
Free	0	1	30 days
Creator	6	3	1 year
Studio	18	10	Forever

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.table({
      caption: 'Plans',
      columns: [
          { key: 'plan', label: 'Plan', primary: true },
          { key: 'price', label: 'Price', fmt: 'money' },
          { key: 'streams', label: 'Streams', fmt: 'int' },
          { key: 'clips', label: 'Clips kept' },
      ],
      rows: [
          { plan: 'Free', price: 0, streams: 1, clips: '30 days' },
          { plan: 'Creator', price: 6, streams: 3, clips: '1 year' },
          { plan: 'Studio', price: 18, streams: 10, clips: 'Forever' },
      ]
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.table({
        caption: 'Plans',
        columns: [
            { key: 'plan', label: 'Plan', primary: true },
            { key: 'price', label: 'Price', fmt: 'money' },
            { key: 'streams', label: 'Streams', fmt: 'int' },
            { key: 'clips', label: 'Clips kept' },
        ],
        rows: [
            { plan: 'Free', price: 0, streams: 1, clips: '30 days' },
            { plan: 'Creator', price: 6, streams: 3, clips: '1 year' },
            { plan: 'Studio', price: 18, streams: 10, clips: 'Forever' },
        ]
    });
  OpenVibeKit.enhance(box);
</script>

The HTML it returns · 822 B

<div class="ovk-table-wrap ovk-table--stack" role="region" tabindex="0"><table class="ovk-table"><caption>Plans</caption><thead><tr><th scope="col" class="is-primary">Plan</th><th scope="col">Price</th><th scope="col">Streams</th><th scope="col">Clips kept</th></tr></thead><tbody><tr><th scope="row" class="is-primary" data-label="Plan">Free</th><td data-label="Price">0</td><td data-label="Streams">1</td><td data-label="Clips kept">30 days</td></tr><tr><th scope="row" class="is-primary" data-label="Plan">Creator</th><td data-label="Price">6</td><td data-label="Streams">3</td><td data-label="Clips kept">1 year</td></tr><tr><th scope="row" class="is-primary" data-label="Plan">Studio</th><td data-label="Price">18</td><td data-label="Streams">10</td><td data-label="Clips kept">Forever</td></tr></tbody></table></div>

What it weighs

Its own rules are 2.4 KB, 615 B as sent: 3% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.