Filtering

Filtering option facilitates the users to filter out data based on a specific criteria. Filtering would help the users to view and analyze data within a few seconds.

In order to perform Filter operations, ornamentum provides, Dropdown Filtering and Text Box Filtering options. Those filtering controls are located on the header level of the data table. For additional details about header refer the Header Details section.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
Select
Select
Select
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-filtering-usage',
  templateUrl: './filtering-usage.component.html'
})
export class FilteringUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Basic Usage

filterable: boolean   Default Value: falseTarget Component: <ng-data-table-column>

Once Enabling the filtering functionality, ornamentum starts to support Text Box Filtering for the specified column by default. Please note that filterable does not support default.

  <ng-data-table
    ... >
    <ng-data-table-column
       ...
      [filterable]="true">
    </ng-data-table-column>
  </ng-data-table>

Filter Text Box

There are several more properties that can be used to customize the behavior of filter text box and those can be used after enabling the filterable property.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-filtering-text-box-usage',
  templateUrl: './filtering-text-box-usage.component.html'
})
export class FilteringTextBoxUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Filter Place Holder

filterPlaceholder: string   Default Value: 'Search'Target Component: <ng-data-table-column>

The filter place holder property facilitates the user to specify the placeholder name for the column filtering text box. As depicted in the above data table filter place holder names are configured for all the columns.

Show Filter Clear Button

showFilterClearButton: boolean   Default Value: trueTarget Component: <ng-data-table-column>

This property can be used to enable a button for clear filter keywords and applicable only when Text Box Filtering mode is enabled.

Filter Dropdown

Apart from the Text Box Filtering, Ornamentum facilitates Dropdown Filtering option to filter out data from the data table. In order to enable Dropdown Filtering, It is required to set showDropdownFilter property to true and by default, it's set to false. We strongly recommend use this option if your data set contains common patterns.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
Select
Select
Select
Select
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-filtering-dropdown-usage',
  templateUrl: './filtering-dropdown-usage.component.html'
})
export class FilteringDropdownUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

The following Property mapping table depicts how each Data table dropdown filtering properties are connected with Ornamentum Dropdown properties by implicitly.

Dropdown Filtering Property NameSimilar Dropdown Property NameDefault Value
Dropdown Filter Menu PositionMenu Position'bottom-left'
Dropdown Filter Show Option Select Check BoxShow Option Select Check Boxundefined
Dropdown Filter Close Menu On SelectClose Menu On Selecttrue
Dropdown Filter Select ModeSelect Mode'multi'
Dropdown Filter Wrap Display Select LimitWrap Display Select Limit1
Dropdown Filter Show Selected Option Remove ButtonShow Selected Option Remove Buttonfalse
Dropdown Filter Group By FieldGroup By Fieldundefined
Dropdown Filter Menu HeightMenu Height250
Dropdown Filter Menu WidthMenu Width320
Dropdown Filter Multi Select Option Max WidthMulti Select Option Max Width135
Dropdown Filter SearchableFilterabletrue
Dropdown Filter Search DebounceFilter Debouncetrue
Dropdown Filter Search Debounce TimeFilter Debounce Time500
Dropdown Filter Dynamic Dimension CalculationDynamic Dimension Calculationtrue
Dropdown Filter Dynamic Width RatioDynamic Width Ratio1.25
Dropdown Filter Dynamic Height RatioDynamic Height Ratio1.25
FilterFilter Text''

Server Side Filtering

Filtering functionality is fully supported by server side date binding approaches out of the box. Please refer Server Side Basic Data Binding and Server Side WebSocket Data Binding documentations for more information.

Events
Header Details
Column Binding
API Doc for Data Filtering (refer filtering associated configurations)