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>Multiple slots</h2>

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

    <collection-cluster
      :items="items"
      v-bind="options"
      @cellsChange="onCellsChange"
    >
      <div slot="header" slot-scope="{ cell, item }"
        class="header"
        :key="cell.index"
       >
        Letter: {{item.letter}}
      </div>
      <div slot="item" slot-scope="{ cell, item }"
        class="item"
        :key="cell.index"
       >
				{{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;
}

.header {
  padding: 20px;
  background: #f0f0f0;
  font-weight: bold;
}

.item {
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
}

JavaScript

const list = [{
  type: 'header',
  letter: 'J',
}, {
  type: 'item',
  value: 'Jack',
}, {
  type: 'item',
  value: 'John',
}, {
  type: 'item',
  value: 'Josh',
}, {
  type: 'item',
  value: 'Jack',
}, {
  type: 'item',
  value: 'John',
}, {
  type: 'item',
  value: 'Josh',
}, {
  type: 'item',
  value: 'Jack',
}, {
  type: 'item',
  value: 'John',
}, {
  type: 'item',
  value: 'Josh',
}, {
  type: 'header',
  letter: 'K',
}, {
  type: 'item',
  value: 'Kate',
}];

new Vue({
  el: '#app',
  template: '#template', //use template, because of camelcase events
  components: {
    CollectionCluster: window.VueCollectionCluster.default,
  },
  data () {
    return {
      options: {
      	heightType: 'automatic',
	      itemHeight: 100, //estimate
      },
      cells: 0,
      items: list,
    };
  },
  methods: {
  	onCellsChange(cells) {
    	this.cells = cells.length;
    }
  },
});