CODEWITHSUNDEEP
javascriptvue.jsvue-tables-2
Nahka
Nahka

Reputation: 426

Vue-tables2 custom dropdown

I would like to change the default select dropdown style in vue-tables2 table. The problem is I'm not able to figure out how I can change the whole template of the dropdown to my custom template. I know how I can add css classes to the default dropdown but my custom dropdown requires to change the entire template.

My custom template is something like this and this should be placed on the 'records limit' dropdown on the table:

<div class="some_customclass">
  <span class="second_customclass">{{text}}</span>
  <select class="third_customclass">
    <option>
     {{ option.text }}
    </option>
  </select>
</div>

Example

This is something like dropdown should look like:

Should look like

Upvotes: 2

Views: 1750

Answers (2)

pjro94
pjro94

Reputation: 36

of sure u have to hide the default dropdown like that:

.VueTables__limit { display: none; }

and then create your custom dropdown :

<select @change="$refs.table.setLimit($event.target.value)">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>

and then add your reference to the table like that :

<v-client-table ref="table" :options="yourOptions" :data="yourData" :columns="yourColumns" ></v-client-table>

JSfiddle : https://jsfiddle.net/jfa5t4sm/2601/

Upvotes: 2

Fab
Fab

Reputation: 4657

You could use a vue-tables-2 slot to add your custom dropdown, and then use the available methods to trigger events on dropdown's value change.

To hide standard dropdown I think you can use pagination.dropdown: false, but I'm not sure about this.

Upvotes: 0

Related Questions