GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Vuetify Version: 2. The selected number of items per page is displayed and when clicked the list of available page sizes appears.

The input only contains the arrow icon, without any value. When clicked, the dropdown list is displayed but the items are just empty space. From what I have seen, it is an issue with the input width for the selected item.

The value does not appear as the overflow is set to hidden and the element is too narrow to fit the text. Since the width comes from the parent elements, I'm guessing IE must compute the size of the elements differently than other browsers.

CRUD on Vuejs with Vuetify

For the dropdown list, the issue seem to come from the padding applied to the items of the list, which moves the texts to the right, outside the boundaries of the dropdown box itself. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up. New issue. Jump to bottom. Copy link Quote reply. Environment Vuetify Version: 2. Look at one of the example widgets. Check the "Rows per page" selector dropdown. Expected Behavior The selected number of items per page is displayed and when clicked the list of available page sizes appears. Actual Behavior The input only contains the arrow icon, without any value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment. C: VDataTable T: bug platform specific. Linked pull requests. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

The dark mode beta is finally here. Change your preferences any time.

Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. How to highlight the selected row in v-data-table? In the above example click on a row will be highlighted by adding class called primary. If it is a static data it is working fine, but if it is dynamic data like getting data from API, the data in the data table will always be refreshed, if i change the pagination and sort and all.

For example, in my case, if i sort the column the data will come from the API and data in the v-data-table will be refreshed with sorted data, in this case it is very hard to maintain that selected flag each and every time when ever the data changes.

Is there any other way to highlight a selected row? Your solution does not work because the selected property is added to the data when you click on a row, but when data is reloaded then the data without a selected property replaces the old data. So to make it work: - add an id field to each item in the list of desserts - add an selectedId with default value -1 to your data - change the line of code in method activerow to this.

If on reload only your list of desserts changes, and the new list contains an item with the same id as selected before, then the same row should become selected. Learn more. Vuetify - How to highlight row on click in v-data-table Ask Question. Asked 10 months ago. Active 2 months ago. Viewed 3k times. Sam Sam 1 1 gold badge 9 9 silver badges 26 26 bronze badges. Do you have unique id on every row? If you do, you can store list of selected rows' ids, then do select row on repopulate v-data-table.

Active Oldest Votes. Nicolai Nikolai Nicolai Nikolai 81 3 3 bronze badges. Hi, welcome to Stack Overflow. The best way is to give a code snippet. Here is a good guide o nhow to write a good answer: stackoverflow. Duplicate answer. Please don't copy-paste the same answer on multiple questions.

This duplicated answer doesn't add any value to the question, and the existing accepted answer. I found this answer first and it is better alternative than other ways of handling row click especially on Vuetify 2.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account. Currently the data-table stores its state within the data itself, which I find highly problematic. Many of the cons listed can be tackled through various boilerplate, methods, computed methods, watchers, server sanitation etc. Move the checked state out of the item and into props and keep the logic inside the data table component. Could you provide some pseudo code in what a data table example would look like with this implementation?

The data table example would remain the same as that in the current documentation except for the omission of value: false in each row. An additional key property, like the one used in v-for could prove helpful. Additionally you can emit the selected rows to the parent component.

I'm not sure which would be easier or if there'd be reactivity issues. All in all, there should be very little change to the documentation as all we're doing is moving data-tables checked state to the data-table itself. Considering the amount of data passed to and from a data table, it would be beneficial to create a model for table data. By providing the simple table model, it would be possible to use the table properties in watchers and computed data, as well as programatically update table properties.

All the above examples require no boilerplate beyond their own logic. Additionally the table model would make it possible to manually insert table headers and footers as such.

Implemented in This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up. New issue. Jump to bottom. Labels T: enhancement T: feature. Copy link Quote reply. Storing view state in data models Pros Not sure Cons You have to map selected state to every data item. That gets complicated if your data is reactive.

Subscribe to RSS

And even more complicated if your data is immutable, e. And even more complicated if the same data is used in a table more than once as the selected state is remembered in the store. And even more complicated if your server enforces schema or doesn't sanitize your submitted data Lastly, you risk data corruption in case your data entries already have a value property and you're unaware that the selected state by default overwrites the value.

This comment has been minimized. Sign in to view. This was referenced Apr 27, Simple select Search feature on Select Component!The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection.

The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop. An array of objects that each describe a header column. See the example below for a definition of all properties. Can be used in combination with hide-headers to specify the number of columns in the table to allow expansion rows and loading bar to function properly. Hide the table actions.

This will also remove pagination. Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar any material color or theme color - primarysecondarysuccessinfowarningerror or a Boolean which uses the component color set by color prop - if it's supported by the component or the primary color. Used to control pagination and sorting from outside the data table. Can also be used to set default sorted column.

Adds header row select all checkbox. Can either be a String which specifies which color is applied to the button, or a Boolean which uses the default color. Manually sets total number of row items, which disables built-in sort and pagination. Used together with pagination prop to enable server-side sort and pagination. Caution: Binding this to a blank string or using in conjunction with search will yield unexpected behaviours. In the latter case, you have to manually specify a key on the row regardless of the item-key value.

If you only want to apply some common markup or effect on each of the header cells, you can use the slot headerCell. In this example is has been used to apply a tooltip to each header. There is also a progress slot for when you want to customize the display for the data table's loading state. By default this is an indeterminate v-progress-linear. There is also a footer slot for when you want to add some extra functionality to tables, for example per column filtering or search.

The v-data-table component also supports expandable rows using the expand slot. By default expanding a row closes all remaining rows. You can use the prop expand on v-data-table to prevent expanded rows from closing when clicking on another row. You can customize the page text displaying the range and total items by using the pageText slot.

Pagination can be controlled externally by using the pagination prop. Remember that you must apply the. Sorting can also be controlled externally by using the pagination prop. You can also use the prop to set the default sorted column. If you're loading data from a backend and want to paginate and sort the results before displaying them, you can use the total-items prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the pagination prop to listen for changes.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

vuetify data table select row

And when I select a row I want to be able to populate an Item on the same page with some of the data such as the name and email in a v-card.

I need to put name into the msg. I feel that I'm going the long way around to get my data and was wondering if someone has a better solution. Thanks for the support. Since there is a binding between the data table and this. You don't need to manually add to this. I've added a minimal example. Note for the item-key prop of v-data-table, you should use unique values. Learn more. How to pull data from a Vuetify Datatable selected row Ask Question.

Asked 1 year, 2 months ago. Active 2 months ago.

vuetify data table select row

Viewed 10k times. Active Oldest Votes. Keqiang Li Keqiang Li 1, 1 1 gold badge 7 7 silver badges 20 20 bronze badges. I'm using single vue component file so the code can be used in a. This works great except for one little thing. There is a checkbox in the header row that selects all. That is a great feature except I can't use it at this point.

The person can only open the file of one person that they select.

Data table

If I take out the Select-all then the header of the first column is over the checkboxes and the width is what the first column would be. Do you happen to know a work around? I also added the logic to control there is only one row can be selected at a time.

Nicolai Nikolai Nicolai Nikolai 81 3 3 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password.

Post as a guest Name. Email Required, but never shown. The Overflow Blog.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account. Option to select one row at a time in a data table, radio-button style. Selecting a new row will clear the previous selection.

Allows the user to provide extra functionality in custom components based on a guaranteed single-row selection in the data table; a preview pane, for example. Yep, would like this as well. Was fixing to start writing some code, to attempt, to do something similar.

I've tried to do it here but It's not working. FabioZanchihere you go. Note that in my snippet in my previous post, I used. Edit: I've just noticed that the selected radio doesn't 'move' when the table is sorted. There's probably a quick fix and I'll look into when I get a chance. Thanks, benjaminpwarren! Hi benjaminpwarren. Thanks for publishing the example for selecting a row with a radio button. Have you discovered how to fix the fixed selected radio button?

When I select a row and skip to the next page, the radio button keeps selected in the new page. The problem is when you page the data table it attempts to reuse the v-radio components.

vuetify data table select row

In Vuetify's checkbox version this doesn't matter since the checkbox values are forced to update to match their corresponding rows' props, whereas in the radio group case the value of the radio is unchanging. As I didn't want my table to be covered in auxiliary radio buttons, my work-around solution to this was to set a data object equal to the item of the clicked row and then check against it during the calculation of the :active property of the rows on the refresh. See here. The best solution for me was to just recode the method click used in the Vuetify documentation example.

All remaining code is the same. Complete solution here. Yep, I also need this feature. Thanks benjaminpwarren for the workaround and thanks zerosym for the tip.

It works fine with the workaround. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Displays linear progress bar.

Used to control pagination and sorting from outside the data table. Can also be used to set default sorted column. Adds header row select all checkbox. Can either be a String which specifies which color is applied to the button, or a Boolean which uses the default color. Manually sets total number of row items, which disables built-in sort and pagination. Used together with pagination prop to enable server-side sort and pagination. Docs Documentation. Store store. Quick Links.

Data table. Invert colors. View on Github. Edit in codepen. View source. Custom search filter. Custom sort filter. Applies the dark theme variant. Disable default sorting on initial render. Designates the table as containing rows that are expandable. The function used for filtering items. Hide the table actions.

The field in the item object that designates a unique key. The array of table rows. Applies the light theme variant. Display text when there is no data. Display text when there are no filtered results.


Join the conversation

Sie sind absolut recht. Darin ist etwas auch den Gedanken gut, ist mit Ihnen einverstanden.

Leave a Reply

Your email address will not be published. Required fields are marked *