npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mat-table-filter

v15.0.0

Published

Provides filtering support for @angular/material tables

Downloads

4,315

Readme

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 mat-table-filter

NOTE: Angular versions older than Angular 8 should install [email protected]

npm install [email protected]

For Angular versions between 8-13 (inclusive), please install [email protected]

npm install [email protected]

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

Crypto Donation -> Donate in crypto currencies

 

Licence

Apache-2.0