mat-table-filter
    TypeScript icon, indicating that this package has built-in type declarations

    10.2.0 • Public • Published

    Material Table Filter (matTableFilter Directive)

    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
    

    NOTE: For the previous major versions of Angular install version 1.2.5

    npm install --save mat-table-filter@1.2.5
    

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

    import { MatTableFilterModule } from 'mat-table-filter';
    
    @NgModule({
      imports: [
        ...
        MatTableFilterModule
      ],
     ]})
    

    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 matTableFilter [dataSource]="dataSource"  ...>
    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 matTableFilter [dataSource]="dataSource" [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

      ##API

    MatTableFilterDirective

    matTableFilter is the directive selector

    Input Property Type Description
    @Input exampleEntity any The example entity that is used to filter the table
    @Input filterType MatTableFilter (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
    @Input customPredicate (data: any) => boolean (Optional) You can set your own filtering implementation by providing your predicate function with this input
    @Input propertyOptions PropertyOptions (Optional) With this input you can set seperate filterTypes and some more options for different keys of table item

     

    PropertyOptions

    Property Type Description
    [property: string] Options | (data: any) => boolean Key-Value pair where you set Options or PredicateFunc for a property. See examples.

     

    Options

    Property Type Description
    filterType MatTableFilter (Optional) Defines the filtering strategy. Default value is FilterType.ANYWHERE
    caseSensitive boolean (Optional) Default value is false

     

    MatTableFilter (Filter Types)

    export enum MatTableFilter {
      EQUALS = 'EQUALS',
      ANYWHERE = 'ANYWHERE',
      STARTS_WITH = 'STARTS_WITH',
      ENDS_WITH = 'ENDS_WITH'
    }

    Contributing

    This project is a library project inside ng-material-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 ng-material-extensions directory
    2. Do npm install in ng-material-extensions\projects\mat-table-filter directory
    3. Go to ng-material-extensions directory
    4. Build it:
    ng build mat-table-filter
    
    1. You can run the showcase application and see your changes in action. In ng-material-extensions run ng s -o  

    Support & Donations

    Feel free to show your support. Donating supporters will be added into Supporters section inside the README.md of the repository.

    GitHub Org's stars -> Become a star-gazer, giving a star at Github

    Patreon Badge -> Become a Patreon

    Crypto Donation -> Donate in crypto currencies

     

    Licence

    Apache-2.0

    Install

    npm i mat-table-filter

    DownloadsWeekly Downloads

    633

    Version

    10.2.0

    License

    Apache-2.0

    Unpacked Size

    217 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar