diff --git a/_data/components/otableData/02tableColumnsFiltersColumn.yml b/_data/components/otableData/02tableColumnsFiltersColumn.yml index 30d25439d..7ca7fd640 100644 --- a/_data/components/otableData/02tableColumnsFiltersColumn.yml +++ b/_data/components/otableData/02tableColumnsFiltersColumn.yml @@ -29,5 +29,22 @@ attributes: { name: "query-method", since: "15.2.1" - } + }, + { + name: 'mode', + description: 'Indicates the filtering mode for the column. `default` combines both selection and custom modes. `selection` allows filtering by selecting values present in the column. `custom` allows filtering using a form control.', + since: '15.9.0', + type: 'default | custom | selection', + default: 'default' + },{ + name: 'date-format', + default: "Column format", + required: "15.9.0", + description: "Date format. See [MomentJS format](http://momentjs.com/docs/#/displaying/format){:target='_blank'}" + },{ + name: 'date-value-type', + since: '15.9.0', + description: 'Indicates how the date value is stored and sent in the filter query.', + type: 'string | date | iso-8601 | timestamp', + default: 'timestamp' } ] diff --git a/docs/components/data/35-o-table.component.md b/docs/components/data/35-o-table.component.md index 9abd28ca5..30f4a5f97 100644 --- a/docs/components/data/35-o-table.component.md +++ b/docs/components/data/35-o-table.component.md @@ -343,6 +343,29 @@ A button will also appear to the right of the sort button to change whether you ![Filtering columns by all data]({{ "/assets/images/components/tabla/filter-by-column-all-data.png" | absolute_url }}){: .comp-example-img} +**Filtering date columns** + +When the column to be filtered is of type `date`, you can configure how the date value is interpreted and displayed +using the `date-format` and `date-value-type` inputs. + +- `date-format` sets the format string used to parse and show the date (using [moment.js tokens](https://momentjs.com/docs/#/displaying/format/)). If not set, the format of the `o-table-column` with the same `attr` is used automatically. +- `date-value-type` defines how the value is stored internally: as a `timestamp` (number), a `string`, as a `iso-8601` (date) or a `date` object. + +```html + + + + + + + +``` + + ### Custom filter **OntimizeWeb** allows to customize the table data filtering by building your own filters. You can build complex filtering structures by adding the [`o-filter-builder`]({{ base_path }}/components/data/filterbuilder/overview){:target='_blank'} component to you application.