Filters

Last updated on August 02, 2024.

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>

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	""	any	Displays default date displayed
date-from	string	""	any	Displays starting date of date filter
date-to	string	""	any	Displays end date 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.