Component library

Filters

Last updated 2 November 2026

Renders container for filter items.

Live demo

For custom filters, you can add ins-filter-item inside the ins-filter tag.
See the Filter Item component.

<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>

Attributes

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

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

Event	Live example
`onFilterApply`	Try onFilterApply

Events - onFilterApply

<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>

Examples

Default State

<ins-filter></ins-filter>

Direct Set Data

<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

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

dateFormat Attribute

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