vue-bootstrap4-table icon indicating copy to clipboard operation
vue-bootstrap4-table copied to clipboard

Feature Request: config option to always emit query params, prop to restore the state

Open nullday opened this issue 6 years ago • 3 comments

Here is my use case.

I use all sorts, filters and etc on frontend. But I would like to keep all the query payload in my url, so if user leaves the page and then click back, he will see same picture (sorts, filters, global search and etc). It really helps if you work with table with hundreds of rows, use some filter, go to another page and then leave the page clicking on some link.

You already have emitQueryParams method but it only works when server_mode = true. Would be nice to be able to pass some option in config to don't use server_mode but be able to catch the event from parent component when user interacts with datatable.

Also would be nice to pass same object (queryParamsPayload) into your datatable component via props to be able to restore the state of datatable right after we init it.

Thanks.

nullday avatar Apr 25 '19 20:04 nullday

Hi @nullday

I am already working on implementing the URL mode to preserve the table state. I will let you know once this feature is implemented completely.

And, it makes sense to emit queryparameters after every change in table state in client mode too. I will consider this request.

Regarding your last request (queryParamsPayload), you can init sort, filter, & global search using the init in each column filter config & global search config. Check the below link to see how to set initial values for sorting, filter, and global search.

https://rubanraj54.gitbook.io/vue-bootstrap4-table/sorting#example https://rubanraj54.gitbook.io/vue-bootstrap4-table/filtering#example https://rubanraj54.gitbook.io/vue-bootstrap4-table/global-search#example

Cheers, Ruby.

rubanraj54 avatar Apr 26 '19 08:04 rubanraj54

Maybe somebody will find it useful. I was able to implement my feature with this easy snippet:

  mounted() {
    this.$watch('$refs.vueBootstrapTable.query', {
      handler: newValue => this.saveState(newValue),
      deep: true
    });
  },

P.S. Don't forget to add ref="vueBootstrapTable" to <vue-bootstrap4-table></vue-bootstrap4-table>

nullday avatar May 15 '19 01:05 nullday

How to get the index of an array in row-slot?

mykel019 avatar Oct 10 '19 03:10 mykel019