JSFiddle - React, Tailwind, and code Playground

by ksey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app">

   <b-container>
    <b-row>
      <b-col>
        <multiselect 
          :limit="3"
          v-model="filter.region"  
          label="text" track-by="value" 
          :options="region" 
          :multiple="true">
        </multiselect>
</b-col>
      <b-col>
        <b-form-select
          v-model="filter.currencies"
          :options="currencies"
        ></b-form-select>
      </b-col>
      <b-col>
        <b-form-select
          v-model="filter.languages"
          :options="languages"
        ></b-form-select>
      </b-col>
      <b-col>
        <b-form-select
          v-model="filter.population"
          :options="populations"
        ></b-form-select>
      </b-col>
    </b-row> 

    <b-row>
      <b-col>
        <b-table  
          :items="continents"
          :fields="fields"
          :filter-function="filterFunction"
          :filter="filter"
        >
          <template v-slot:cell(region)="data">
            <b class="text-info">{{ data.value }}</b>
          </template>        
          <template v-slot:cell(currencies)="data">
            <b class="text-info">{{ data.value.filter(c => c.name).map(c => `${c.code}`).join(", ")}}</b>
          </template>        
          <template...

CSS

.table td, th{
    text-align: center;
    max-width: 200px;
    vertical-align: middle;
  }

JavaScript

new Vue({
  el: '#app',
  components: {
    Multiselect: window.VueMultiselect.default,
  },
  data: () => ({
    continents: [],
    fields: [
      { key: 'region', label: 'region', sortable: true,  },
      { key: 'currencies', label: 'currencies', sortable: true, },
      { key: 'languages', label: 'languages', sortable: true, },
      { key: 'population', label: 'population', sortable: true,  }
    ],
    filter: {
        region:  null,
        currencies: null,
        languages: null,
        population: null
    },
    region: [{ text: '-', value: null },],
    currencies: [{ text: '-', value: null },],
    languages: [{ text: '-', value: null },],
    populations: [
      { text: '-', value: null },
      { text: '[ 0, 50 )', value: [0, 5000] },
      { text: '[ 50, 100 )', value: [50000, 100000] },
      { text: '[ 100, +∞ )', value: [100000, Infinity] }
    ],
  }),
  methods: {
     filterFunction(row, val) {
       const { population: p, region, currencies: c, languages: l,} = val;
       return [
         !region || val.region.filter(r =>r.value).map(r => `${r.value}`).join(", ") === row.region,
         !c || c === row.currencies.filter(c => c.name).map(c => `${c.code}`).join(", "),
         !l || l === row.languages.filter(l => l.name).map(l => `${l.name}`).join(", "),
         !p || p[0] <= row.population && p[1] > row.population
       ].every(Boolean);
      },
  },
  created(){
    axios.get('https://restcountries.eu/rest/v2/all')
    .then (resp => {
        this.continents = resp
         for (var i = 0; i < this.continents.length; i++) {
           let region = {
             text: this.continents[i].region,
             value: this.continents[i].region,
           }
           this.region.push(region)

           let currencies = {
             text: this.continents[i].currencies.filter(c => c.name).map(c => `${c.code}`).join(", "),
             value: this.continents[i].currencies.filter(c => c.name).map(c => `${c.code}`).join(", "),
   ...