Custom dropdown feature in Vue-tables2

Is there a way to customize the select dropdown style in vue-tables2 table? I am trying to change the entire template of the dropdown, not just add CSS classes. My custom template includes additional elements like span and div tags that need to be incorporated into the 'records limit' dropdown on the table.

This is what my custom template looks like:

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

https://i.sstatic.net/xpWx0.png

Here is an example of how the customized dropdown should appear:

https://i.sstatic.net/liqm3.png

javascriptvue.jsvue-tables-2

Answer №1

To customize the dropdown, you first need to hide the default one using this CSS:

.VueTables__limit {
   display: none;
}

Next, create your own custom dropdown like this:

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

Then, add a reference to your table like so:

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

For more details, check out this JSfiddle example: https://jsfiddle.net/jfa5t4sm/2601/

Answer №2

If you want to include a personalized dropdown in your Vue application, you can utilize the vue-tables-2 slot feature for this purpose. By making use of the methods provided by vue-tables-2, you can easily handle events related to changes in the dropdown's value.

In order to conceal the default dropdown, it seems that setting pagination.dropdown: false could be a potential solution, although further testing may be required to confirm its effectiveness.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular directive ng-template serves as a component type

In the code snippet below, <!DOCTYPE html> <html> <head> ..... </head> <body ng-app="app"> <script type="text/ng-template" id="my-info-msg.html"> <s ...

javascriptangularjsangularjs-ng-template

Discover the process of incorporating two distinct component structures within a single React application

In my React app, I am trying to implement a different navbar for routes that start with "admin". For example: Normal Page: <NormalNavbar/> <NormalHeader/> <NormalBody/> <NormalFooter/> But if it's an admin route, then I want: ...

javascriptreactjsreact-hooksreact-router-dom

There appears to be an issue with the functionality of the external CSS pathway

placeholder image hereplaceholder image hereplaceholder image here I'm encountering a problem and struggling to identify the mistake in my current approach. ...

javascripthtmlcssnode.jsexpress

Unable to execute focus() - query not functioning

In my code, I have an input field and I am trying to invoke it in my js file. $(document).ready(function () {$('#input_id').focus(); }); However, the focus is not working as expected. Even when I try to trigger it manually in my Chrome console, ...

javascriptjqueryfocus

Why is Jasmine throwing an error when I try to use getElementsByTagName(...)?

HTML: <ul id="listONE"> <li class="{{isSel}}" ng-repeat="person in people" ng-click="selPersonToChange(this)">{{person.name +" - "+ person.city}}</li> </ul> A snippet from my script.js using AngularJS (1.3.1): mymod.control ...

javascriptangularjstddjasmine

Easily adding multiple field data with the same field name into a database can be achieved using Mongoose and Node.js (specifically Express

I am new to using nodejs and exploring the creation of a project focused on generating invoices. My goal is to store product information in mongodb utilizing mongoose and express, but I'm unsure of how to proceed. Below is a snippet of my HTML code.. ...

javascriptnode.jsmongodbexpressmongoose

Prompting the website to 'refresh' and return to the beginning of the page

My website's functionality is closely tied to the user's position on the page. Different features are triggered once specific distances are reached. I am seeking a way for users to automatically return to the top of the page upon page reload. Cu ...

javascriptjqueryhtml

Troubleshooting Axios Error while Sending Data in MERN Stack Application

In my development setup, I'm testing model validation specifically for the length of a name variable. The front-end is configured at http://localhost:3000/ using React + axios, while the back-end utilizes express + node. To enable communication betwe ...

javascriptnode.jsreactjsexpressaxios

Tips for transferring <form> information to an object array within a React application

I am currently working on a basic component that takes an input message, displays it in a list below the input field when submitted. However, I am facing an issue where clicking the submit button only results in a blank bullet point appearing below. impo ...

javascriptreactjsreact-nativejsx

Update a specific form data field within an Angular application

I recently encountered a situation where I had an angular form with 9 fields and submitted it to the server using a post request. However, I realized that I had only filled in values for 8 fields while leaving one as null. Now, in a new component, I am w ...

javascriptangulartypescriptformsput

What is the best way to make a Dojo TitlePane overlap using CSS?

My dilemma involves a jsfiddle featuring two TitlePane widgets in the central pane's top right corner. Currently, clicking on the right TitlePane ("Switch Basemap") moves the left TitlePane ("Map Overlays") to the left. What I want is for the right Ti ...

javascripthtmlcssdojo

Developing components through JavaScript

I am attempting to use JavaScript to create an element in my HTML using createElement, but there seems to be an issue in my code. HTML <button class="test_button">I am a test</button> <div class="test"></div> ...

javascriptcssvue.jscreateelement

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

cssvue.jsflexboxvuetify.js

AngularJS Custom Navigation based on User Roles

I am currently developing a small web application using angular. My goal is to implement role-based navigation in the app. However, I am facing an issue where the isAdmin function does not seem to be getting called on page load, resulting in only the foo a ...

javascriptangularjs

I'm encountering a Type Error message in VS Code terminal stating that converting data to string is not a function. Can someone please help me understand this type error? I am new to Node.js and

const fileSystem = require('fs'); const data = fileSystem.readFileSync('example.txt'); if (data) console.log(data.toString()); console.log('Program Ended'); This is the code I wrote: and this is the error message my terminal ...

javascriptnode.js

Using Three.js, generate a series of meshes that combine to create a seamless 90-degree donut shape

I'm on a quest to discover an algorithm that can create the following shape in Three.js. Here is my rough sketch of the expected shape The number of meshes needed to form the 90 degree donut, as well as the thickness and spacing between them, should a ...

javascriptthree.jsgeometryshapesmesh

How to implement a select all feature using React and MaterialUI

I am facing a challenge with managing multiple sets of checkboxes independently along with a toggle that can switch them all on or off within their respective groups. Each checkbox has two states, and I can identify the checkbox being clicked using event.t ...

javascriptreactjs

How can PHP effectively interpret JSON strings when sent to it?

When working with JavaScript, I am using JSON.stringify which generates the following string: {"grid":[{"section":[{"id":"wid-id-1-1"},{"id":"wid-id-1-4"}]},{"section":[{"id":"wid-id-1-5"}]},{"section":[{"id":"wid-id-1-2"},{"id":"wid-id-1-3"}]}]} I am ma ...

javascriptphpajaxjson

Place a material-ui React component at the center of a footer section

I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it ou ...

javascripthtmlcssreactjsmaterial-ui

CSS table property remains unchanged following an ajax request

At first, my table is set to display none, making it invisible in the application. I am using an ajax call so that when a user selects an option, a table is generated and the display property changes from none to block, making it visible. However, the tabl ...

javascriptphpajax