Search code examples
tabulator

Tabulator: Is there a way to have the HeaderFilter use the Formatted Values rather than the Raw Data Values


I have a tabulator table with a column containing DateTimeOffsetValues e.g. '2020-01-07T13:23:00.000 +01:00', which are being formatted using the builtin DateTime format.

The column works fine displaying the data, but when using the HeaderFiltering, all of the values are the raw data values.

Is there a simple way to have the values supplied to the HeaderFiltering use the Formatted values ? I haven't found anything in the documentation for applying a formatter to autogenerated headerfilter values, but i could be missing something.

I have included the column definition below:

 {
    "field": "AuditDate",
    "title": "Audit Date",
    "visible": true,
    "formatter": "datetime",
    "formatterParams": {
      "inputFormat": null,
      "outputFormat": "DD/MM/YYYY",
      "invalidPlaceholder": null
    },
    "headerFilter": "autocomplete",
    "headerFilterParams": {
      "allowEmpty": true,
      "showListOnEmpty": true,
      "values": true,
      "multiselect": true
    },
    "headerSort": true,
    "editor": "",
    "editorOptions": null,
    "position": 41,
    "cellClick": function (e,row) {auditDateCellClick ( e, row ); }
  }

Solution

  • You could either create a Custom Formatter to behave in the way you want.

    Or you could look at using a Mutator instead of a formatter. this would change the underlying data, instead of just the way it appears, allowing you to filter it that way