Vuetify: [Documentation] update v-data-table options prop

Created on 21 Sep 2019  路  8Comments  路  Source: vuetifyjs/vuetify

Problem to solve

Vuetify 2 introduces new props for data table like page, items-per-page, sort-by and sort-desc. Devs will assume that those options will have to synced individually which adds to the complexity of implementation. Options prop also allows sync (missing from documentation) and can handle all of these props. The options -prop is not documented (docs just say refer to examples). I had to convert 20+ tables from Vuetify 1.5 and this made the conversion somewhat painful. If you are using server side pagination you actually have to use the options -prop because you cannot easily watch all the individual sort and page props for changes (as they update in some random order when user click on header sort options).

Proposed solution

Document v-data-table options property and mention .sync modifier can be used.

documentation

Most helpful comment

Any updates on this?

All 8 comments

Awaiting on a PR merge that contains an update to api that allows for expanded details for props and will get in. Thanks for reporting this.

Just stumbled across this, yes the Options prop is not documented properly at all and the existing docs are misleading claiming it is documented in an example below which I picked through one by one trying to find but confusingly the one that actually mentions "Options" in the title:
https://vuetifyjs.com/en/components/data-tables#external-sorting
doesn't actually even use it and the only example that even references it in code is the next example below the one that talks about Options and that example doesn't mention it at all in the title:
https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side
doesn't actually provide any information about Options property at all, just appears to bind it to some data coming from the server so there is nothing that actually documents the Options property at all!? (other than the source code I guess)

This is a big thing, external sorting is surely very common use case for larger apps and also a huge breaking change to existing implementations and perhaps requires a very detailed dedicated section to Options usage and explanation of all the properties alone.

Any updates on this?

It would be really useful to update the docs with more information about this prop

I second the sentiment here that the documentation on the options prop falls well short of assisting this noob in trying to implement external pagination and sort for the first time - something I would assume to be rather common for a data table, Hasn't helped that of the examples I've found most refer to the now deprecated pagination prop with .sync modifier. If anyone can point me to a working example using vuex store actions/getters I'd appreciate.

I must be missing something here, there doesn't appear to be any new documentation in the resolution?

Indeed, this issue is not resolved. I have no clue why @MajesticPotatoe closed this issue, maybe he can provide some insight?

This may very well be a crucial feature and part of the component's documentation.

@cogscape it was closed automatically with the merge of the PR above that added this information to the api as noted.

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dschreij picture dschreij  路  3Comments

SteffenDE picture SteffenDE  路  3Comments

dohomi picture dohomi  路  3Comments

itanka9 picture itanka9  路  3Comments

aaronjpitts picture aaronjpitts  路  3Comments