Insites Docs Web Components V2Data DisplayFilters

Filters

Last updated on July 09, 2025.

Element: <ins-filter>

Renders container for filter items.

Complete Example

For custom filters, you can add ins-filter-item inside the ins-filter tag.
Learn more about the ins-filter-item component here.

Code Snippet

<ins-filter 
  with-date-filter 
  date-title="Date Period"
  tooltip="This is a sample tooltip content. It also support html content.">
  <ins-filter-item
    name="Operating System"
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>
</ins-filter>
Default State

Code Snippet

<ins-filter></ins-filter>
Direct Set Data

Code Snippet

<ins-filter 
  id="directDataSourceFilter">
</ins-filter>

<script>
    // Update `withDataFilter`, `defaultData` and `dateTitle` attribute of the component
    var filter = document.getElementById('directDataSourceFilter');
    filter.withDateFilter = true;
    filter.dateTitle = 'Direct Set Value';
    filter.dateFrom = '2018-08-04';
    filter.dateTo = '2018-08-31';
</script>
Static Data Source

Code Snippet

<ins-filter 
  With-date-filter
  date-title="Custom Date Filter Title"
  default-date="Last Year">
</ins-filter>
Events - onFilterApply

Code Snippet

<ins-filter 
  id="date-filter" 
  with-date-filter 
  date-from="05-26-2018" 
  Date-to="05-27-2018">
</ins-filter>

<script>
  const insFilterApply = document.getElementById('date-filter')
  insFilterApply.addEventListener('insFilterApply', event => {
    console.log(event.detail["Date Period"]);
    console.log(event.detail["Date Period"].from);
    console.log(event.detail["Date Period"].to);
    alert("Date From: " + event.detail["Date Period"].from + " Date to: " + event.detail["Date Period"].to);
  });
</script>
dateFormat Attribute

Code Snippet

<ins-filter
  with-date-filter
  date-format="MMMM DD, YYYY"
  date-title="Date Period">
</ins-filter>

 

Date Formats

 

Format Output Description
YY 18 Two-digit year
YYYY 2018 Four-digit year
M 1-12 The month, beginning at 1
MM 01-12 The month, 2-digits
MMM Jan-Dec The abbreviated month name
MMMM January-December The full month name
D 1-31 The day of the month
DD 01-31 The day of the month, 2-digits

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
with-date-filter boolean false true, false Displays date filter
date-title any "Date Period" any Displays date filter title
default-date string "" Today, This Week, Last Week, This Month, Last Month, This Year, Last Year Displays default date displayed
date-from string "" any Displays starting date of date filter (Custom)
date-to string "" any Displays end date of date filter (Custom)
date-format string "" YYYY-MM-DD, MMMM DD, YYYY, MM/DD/YYYYY (see Date Formats) Change the date format of date filter

 

Events

 

EVENT OBJECT DESCRIPTION
insFilterApply stateFrom, stateTo Execute a script when a date filter has been selected

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.