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,
        region:  [],
        // currencies:null,
        currencies: [],
        // languages:null,
        languages: [],
        // population: null
        population: []
    },
    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.length || region.includes(row.region),
         // !region || val.region.value === row.region,

        // !currencies.length || currencies === currencies.includes(row.currencies),

        // !currencies.length || currencies.filter(c => c.name).map(c => `${c.code}`).join("") === currencies.includes(row.currencies),



        // !currencies.length || p.some(n => n.value[0] <= row.currencies && n.value[1] > row.currencies),
        // !currencies.length || currencies.some(n => n.code == row.currencies),

!currencies.length  || currencies.some(n => n.value == row.currencies.value),



        !l.length || l === l.includes(row.languages),
        !p.length || p.some(n => n.value[0] <= row.population && n.value[1] > row.population),
       ].every(Boolean);
      },
  },
  created(){
    axios.get('https://restcountries.eu/rest/v2/all')
    .then...