vue-tables-2
  • Dependencies & Compatability
  • Getting Started
    • Vue Version 3
  • Client Table
    • Asynchronous Loading
    • Grouping
    • Filtering Algorithm
    • Editable Cells
  • Server Table
    • Implementations
    • Custom Request Function
    • Setting Multiple Request Parameters
    • Error Message
    • Draw Counter
  • Virtual Pagination
  • Custom Template
  • Column Templates
  • Nested Data Structures
  • Selectable Rows
  • Date Columns
  • List Filters
  • Custom Filters
  • Custom Sorting
  • Multiple Sorting
  • Child Rows
  • Conditional Cell Styling
  • Columns Visibility
  • Methods
  • Properties
  • Events
  • Slots
  • Options API
Powered by GitBook
On this page

Was this helpful?

Date Columns

For date columns you can use daterangepicker as a filter instead of the normal free-text input. Note that you must import all the dependencies (JQuery + moment.js + daterangepicker) GLOBALLY, i.e on the window scope. You can check if this is so by typing typeof $().daterangepicker in the console. If it returns function you are good to go. To tell the plugin which columns should be treated as date columns use the dateColumns option. (E.g: dateColumns:['created_at','executed_at']).

For the client component the date must be rendered as a moment object for the filtering to work. You can use the toMomentFormat helper option to do that for you. It accepts the current format of the dates in your dataset, and uses it to convert those dates to moment objects. E.g, if you have a created_at column with a date like 2017-12-31, you can use toMomentFormat: 'YYYY-MM-DD'. To determine the presentation of the dates use the dateFormat option.

On the server component the filter will be sent along with the request in the following format:

{
    query:{
        created_at:{
            start: '2010-12-31 00:00:00',
            end: '2011-12-31 00:00:00'       
        }
    }
}

Date presentation on the server component is completely up to you. If you are unable to control the server response, you can use the templates option to "massage" the date you get from the server into the desired format.

PreviousSelectable RowsNextList Filters

Last updated 5 years ago

Was this helpful?