JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 780
  • Score
    100M100P100Q102878F
  • License Apache-2.0

Provides filtering support for @angular/material tables

Package Exports

  • mat-table-filter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mat-table-filter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Material Table Filter (matTableFilter Directive)

JavaScript Style Guide: Good Parts Node version Total Downloads

Provides filtering support for @angular/material tables. Table filtering is done by using the directive matTableFilter. This project is inspired by Hibernate's example api. By employing this directive you will end up with having

  • Less code, less complicated logic for filtering
  • Default debounce support
  • Being able to filter nested objects no matter how deep the properties are

Installation

npm install --save mat-table-filter

After installing mat-table-filter import MatTableFilterModule in your ngModule

Usage

A datasource of a simple array won't work. In order to use matTableFilter, your table's datasource must be created as MatTableDataSource, see the example below.

dataSource = new MatTableDataSource(ELEMENT_DATA);
  1. Add matTableFilter directive as a property to your material table.
<table mat-table [dataSource]="dataSource" matTableFilter ...>

  1. Keep an example object of the same type with your items in your table.

  2. Bind the exampleObject to the exampleEntity property of the matTableFilter directive

<table mat-table [dataSource]="dataSource" matTableFilter [exampleEntity]="exampleObject"...>

That's all. When you populate the exampleObject's properties, the filter will automatically work just fine with the default debounce support. You can change the debounce time also.

 

Stackblitz demo mat-table-filter-example

The input components are placed inside table headers in this example however you are completely free to do what ever you want. UX is up to you.

 

API

matTableFilter is the directive selector

Input Property Type Description
@Input exampleEntity any The example entity that is used to filter the table
@Input filterType FilterType (Optional) Defines the filtering strategy. Default value is FilterType.ANYWHERE
@Input debounceTime number (Optional) Defines debounce time in milliseconds. Default value is 400
@Input caseSensitive boolean (Optional) Default value is false

Contributing

This project is a library project inside mat-table-extensions angular workspace. If you are interested in the source code of this particular library you can get ready and build the project by applying the steps below:

  1. Do npm install in mat-table-extensions directory
  2. Do npm install in mat-table-extensions\projects\mat-table-filter directory
  3. Go to mat-table-extensions directory
  4. Build it:
ng build mat-table-filter

Licence

Apache-2.0