Vue-good-table: For Reference: Adding Flatpickr Date Range selector to Column Filter with FilterFn

Created on 29 Oct 2018 · 2Comments · Source: xaksis/vue-good-table

Issue Type (delete the irrelevant ones)

[x] Enhancement Request (not really)

Specs

What version are you using?
2.14.1
What browser?
Chrome

I'm posting this issue only as a reference for other users - hoping to save others some time if they need this use case.

Specifically, I needed to add a custom datepicker to multiple column filters that allowed selection of a date range (which then returned all data that contained a date which fell into the user-selected range).

It took a bit of trial and error, but in the end, it turned out to be fairly simple.

I'm using the most recent version of flatpickr for the datepicker.

I've reproduced the functionality in the below codesandbox. The sandbox doesn't have everything from my enterprise app's table, and it may look a little weird, but it illustrates the implementation of flatpickr to individual column filters, as well as a functional custom filterFn that is successfully parsing and filtering table data per the function's instructions.

In addition to the datepicker functionality, there's a few custom parse functions and other bells and whistles that users might find helpful. The code definitely isn't perfect, but it's really cool to see what this plugin can do with a little tinkering.

Thanks xaksis for the amazing plugin. I've learned the ins and outs of every corner of this plugin over the last few weeks. Without question, it's the best vue table plugin available today.

codesandbox (easier to import npm packages and just better ui/ux imo)

https://codesandbox.io/s/73vpxn13z6

Source

ow-en

👍3

Most helpful comment

For reference: this is what the completed setup looks like. @xaksis , any chance this capability could be supported natively, or at least referenced in the docs? I'd be happy to add to the documentation.

Thanks,

ow-en on 29 Oct 2018

👍7 🎉3

All 2 comments

Thanks,

ow-en on 29 Oct 2018

👍7 🎉3

This is very helpful, thank you. I'm new to Vue, coming from React. Is the ideal scenario that there would be a we could pass our own filter component into to render instead of the default input?

In addition to a date range picker, we also would want to be able to select from greater than, less than, equals, etc, and pass a number, which implies two inputs.