Filtering

Filtering option facilitates the users to filter out data on a data grid based on a specific criteria. Filtering data would help the users to view and analyse data within a short period of time.

In order to filter data in Data Table, Dropdown or Text Box can be used. Those filtering controls will be displayed on the header level of the data table.

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

To enable the filtering option user should make the filterable property true. However the default status of the property is false.

This property is used to configure and filter the data in the table column level. The default form of data tables does not filter it’s content however users can enhance the filtering capabilities with the use of multiple properties.

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

Filter Text Box

There are few more properties which affect the behaviour of filter text box and those are applicable in column level of table configuration after enabling the filtering.

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

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 only for Retailer Type, Product Line, Product Type, Revenue, Quantity and Gross Margin columns.

Show Filter Clear Button

showFilterClearButton: boolean  
Default Value: true

Show filter clear button property facilitates the user to show/hide the column filtering text box clear button.

Filter Dropdown

Apart from the filter text box the users are facilitated to use a dropdown filtration option to filter out data from a data table. In order to enable the filter dropdown the users required to make showDropdownFilter property true.

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();
  }
}
dropdownFilterMenuPosition: string = 'bottom-right' | 'bottom-left' | 'top-left' | 'top-right'  
Default Value: 'bottom-left'

Enables users to configure the dropdown filter position. Note that, there are 4 positions users can configure to align the dropdown. According to the following example,

  • Order Method Type column filter has the position of bottom right
  • Retailer Type column filter has the position of bottom left
  • Product Line column filter has the position of top right
  • Product Type column filter has the position of top left
dropDownFilterShowOptionSelectCheckbox: boolean  
Default Value: false

Enabled users to controls the visibility of dropdown filter's option selection check boxes.

dropdownFilterCloseMenuOnSelect: boolean  
Default Value: true

Enable/disable dropdown filter close after an option is selected.

dropdownFilterSelectMode: string = 'multi' | 'single' | 'single-toggle'  
Default Value: 'multi'

Enables users to configure the dropdown filter option selection type. There are 3 types of selection types available in ornamentum data table dropdown filter.

dropdownFilterWrapDisplaySelectLimit: number  
Default Value: 1

Used to configure the number of options to be shown in the dropdown at a time.

dropdownFilterShowSelectedOptionRemoveButton: boolean  
Default Value: false

Used to show/hide the filtered option removal from the dropdown.

dropdownFilterGroupByField: string  
Default Value: ''

Enable dropdown filter options grouping under a specified name. If the group name is not specified all the values are shown as a single group.

dropdownFilterMenuHeight: number  
Default Value: 250

Used to specify the column dropdown filter menu height.

dropdownFilterMenuWidth: number  
Default Value: 320

Used to specify the column dropdown filter menu width.

dropdownFilterMultiSelectOptionMaxWidth: number  
Default Value: 135

Used to specify the multiple option selection dropdown option max width.

dropdownFilterSearchable: boolean  
Default Value: true

Used to show/hide dropdown filter search box.

dropdownFilterSearchDebounce: boolean  
Default Value: true

Used to enable/disable dropdown filter debounce.

dropdownFilterSearchDebounceTime: number  
Default Value: 500
dropdownFilterShowClearSelectionButton: boolean  
Default Value: true

Used to show/hide drop down filter selection clear button.

Column Value Filter

filter: any  
Default Value: ''

Used to provide a filter to see the values matched for specified criteria.

Server-side Column Filter

This feature enables to perform column data filtering in the server side via Text Box or Dropdown.

Server-side Column Filter Text Box

Server-side text box filtering can be enabled by simply setting the filterable property as mentioned in the, Basic Usage section, when Server-side Data Binding technique is used.

This feature will enable to perform the same behaviour mentioned in the Client-side Filter Text Box, in the server-side.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';

import {
  DataTableDataBindCallback,
  DataTableHttpResourceFactoryService
} from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-text-box-filtering-usage',
  templateUrl: './server-side-text-box-filtering-usage.component.html'
})
export class ServerSideTextBoxFilteringUsageComponent {
  public onDataBind: DataTableDataBindCallback<ExampleData>;

  constructor(private resourceFactory: DataTableHttpResourceFactoryService) {
    const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
    this.onDataBind = exampleDataResource.onDataBind('/api/data');
  }
}

Server-side Column Filter Dropdown

This feature will enable to perform the same behaviour mentioned in the Client-side Filter Dropdown, in the server-side.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
Select
Select
Select
Select

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';

import {
  DataTableDataBindCallback,
  DataTableFilterValueExtractCallback,
  DataTableHttpResourceFactoryService
} from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-dropdown-filtering-usage',
  templateUrl: './server-side-dropdown-filtering-usage.component.html'
})
export class ServerSideDropdownFilteringUsageComponent {
  public onDataBind: DataTableDataBindCallback<ExampleData>;
  public onFilterValueExtract: DataTableFilterValueExtractCallback;

  constructor(private resourceFactory: DataTableHttpResourceFactoryService) {
    const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
    this.onDataBind = exampleDataResource.onDataBind('/api/data');
    this.onFilterValueExtract = exampleDataResource.onFilterValueExtract('/api/data/filter');
  }
}
Events
API Doc for Data Filtering (refer filtering associated configurations)