JSFiddle - React, Tailwind, and code Playground

by adamcikado

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
</div>

<script type="text/x-template" id="template">
	<div>
  	<h1>vue-collection-cluster</h1>
    <h2>Columns</h2>

    <p>Number of rendered cells: {{cells}}</p>

    <collection-cluster
      :items="items"
      v-bind="options"
      @cellsChange="onCellsChange"
    >
      <div slot="item" slot-scope="{ cell, item }"
        class="item"
        :key="cell.index"
       >
        Item: #{{item.value}}
      </div>
    </collection-cluster>
  </div>
</script>

<script src="https://adamcikado.github.io/vue-collection-cluster/dist/vue-collection-cluster.js"></script>

CSS

body {
  font-family: 'Open Sans', Arial;
}

h1, h2, p {
  text-align: center;
}

.collection-cluster {
  overflow: auto;
  margin: 0 auto;
  max-width: 800px;
  height: 400px;
  background: #fafafa;
  border: 1px solid #dfdfdf;
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: calc(100% / 3);
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
}

JavaScript

new Vue({
  el: '#app',
  template: '#template', //use template, because of camelcase events
  components: {
    CollectionCluster: window.VueCollectionCluster.default,
  },
  data () {
    return {
      options: {
	      itemHeight: 100,
        columns: 3,
      },
      cells: 0,
      items: Array.from(Array(100), (item, i) => {
				return {type: 'item', value: i + 1};
			}),
    };
  },
  methods: {
  	onCellsChange(cells) {
    	this.cells = cells.length;
    }
  },
});