title: Vue Good Table Component, insert html in filter select options
body: <p>I am a web-designer, i am working in <code>laravel 5.8</code> with <code>vue js 2</code>, this is a work for my company.</p>
  
  <p>I have a <code>vue</code> good table component and i want in the flags(languages) column a filter with a drop-down options. </p>
  
  <p>The options(list of languages(<em>example: pt,fr and gb</em>)) are coming from database by a <code>axios</code> request. </p>
  
  <p>Don't want the languages to appear in the filter options with name of the languages but with "span" for a flags icon </p>
  
  <blockquote>
    <p>(Example: <code>"&lt;span :class="'flag-icon flag-icon-gb
    flag-icon-squared'"&gt;&lt;/span&gt;</code>" ).</p>
  </blockquote>
  
  <p>This examples works just fine with a row scope and get the flags but in the filter I can get it to translate to html just gives the line as plain text.</p>
  
  <p>I have already tried with <code>"html: true,"</code> and <code>"htmlContent: &lt;span&gt;&lt;/span&gt;"</code></p>
  
  <p>The scop for the row flag works just fine</p>
  
  <p>vue component scop</p>
  
  <pre><code>&lt;template slot="table-row" slot-scope="row"&gt;
      &lt;span class="text-center" v-if="row.column.field == 'language.name'"&gt;
          &lt;span :class="'flag-icon flag-icon-' + row.formattedRow[row.column.field] + ' flag-icon-squared'"&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;span v-else&gt;
          {{ row.formattedRow[row.column.field] }}
      &lt;/span&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>The table data</strong></p>
  
  <pre><code>data() {
      return {
          columns: [
              {
                  label: 'Name',
                  field: 'user.name',
                  filterOptions: {
                      enabled: true
                  }
              },
              {
                  label: 'Country',
                  field: 'language.name',
                  html: true,
                  filterOptions: {
                      enabled: true,
                      filterDropdownItems: []
                  }
              },
              {
                  label: 'Status',
                  field: 'status.name',
                  filterOptions: {
                      enabled: true,
                      filterDropdownItems: []
                  }
              },
              {
                  label: 'Property',
                  field: 'property.title',
                  filterOptions: {
                      enabled: true,
                      filterDropdownItems: []
                  }
              },
              {
                  label: 'Last Reply',
                  field: 'updated_at',
                  type: 'date',
                  dateInputFormat: 'YYYY-MM-DD hh:mm:ss',
                  dateOutputFormat: 'Do MMM YYYY',
                  filterOptions: {
                      enabled: true
                  }
              },
              {
                  label: 'Create Date',
                  field: 'created_at',
                  type: 'date',
                  dateInputFormat: 'YYYY-MM-DD hh:mm:ss',
                  dateOutputFormat: 'Do MMM YYYY',
                  filterOptions: {
                      enabled: true
                  }
              },
          ],
          rows: [],
          totalRecords: 0,
          serverParams: {
          columnFilters: {},
          sort: {
              field: '',
              type: '',
          },
          page: 1,
          perPage: 10
          }
      }
  },
  </code></pre>
  
  <p>The axios request where i get the language list and try to put the span in the filter options</p>
  
  <pre><code>vue               
  getLanguages() {
      let url = '/manage/data/request-language';
  
      axios.get(url)
          .then(({status, data}) =&gt; {
              if (status === 200) {
                  data.records.forEach(item =&gt; {
                      let newData = {value: item.id, html: true, text: "&lt;span :class='flag-icon flag-icon-" + item.name + " flag-icon-squared'&gt;&lt;/span&gt;"};
                      this.columns[1].filterOptions.filterDropdownItems.push(newData);
                  });
              }
          }).catch(error =&gt; Alert.handleRequestError(error));
  },
  </code></pre>
  
  <p>I expect to appear a flag list and not a span list of the flags.</p>
  
  <p>Is it possible to override that specific filter or to force it html instead of plain text?</p>