MultiFilterSortTable

This npm package is exclusively for Angular based applications. On the bottom, it uses angular mat-table but it offers more than a typical mat-table. The main features it provides is:

1. Column specific searching / filtering
2. Multi column searching / filtering
3. Sorting on multiple columns
4. Using sorting and filtering with eachother.
5. It includes a convenient built-in optional feature for action buttons within columns. Simply provide the action button's icon and associated function, and a new column with the button will automatically be appended at the end.

Why is it different and better than mat-table?

It offers multi-column sorting functionality. When sorting data by multiple columns simultaneously, it prioritizes the first-clicked column for sorting and subsequently refines the sorting based on the later-clicked column(s). It indicates the sorting order by showing small numbers beside the column name.

You can also sort the filtered data

Installation

This project uses angular material library as it uses mat-table. It also uses tailwind library for css styling. You can install this package by simply running following commmand:

npm i mat-table-filter-sort

I would suggest to install tailwind as well for seamless experience. To insatll tailwind css with angular, visit following link: https://tailwindcss.com/docs/guides/angular

Usage

How to use this library?

Add following link tags main index.html file present in src folder

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

To use this library, you need to pass the column and datasource same as you pass in angular mat-table.

<NgxMat-mat-table-filter-sort 
  [dataSource]="datasource"
  [displayedColumns]="displayedColumns"
  [columnsFeatures]="columnsFeatures"
  [sortingIconColor]="'red'"
  [sortingIconSize]="'10px'"
  [handleRowActionButton]="handleRowActionButton"
  [actionDisplayedColumns]="actionDisplayedColumns"
  [actionColumnFeatures]="actionColumnFeatures"
  [actionIcon]="'cached'"
  [multiSearch]="multi_search"
  [mutliSearchFieldPlaceholder]="mutliSearchFieldPlaceholder"
  [singleSearch]="single_search"
  [indexOfSearchingColumn]="single_search_index"
  [singleSearchFieldPlaceholder]="single_search_placeholder"
>
</NgxMat-mat-table-filter-sort> 

- In *.ts file, variables look like this:

datasource = [
  {id: 1, name: 'jon', profession: "Engineer"},
  {id: 2, name: 'Doe', profession: "Doctor"},
  {id: 3, name: 'Mark', profession: "Doctor"},
  {id: 4, name: 'Niah', profession: "Doctor"},
  {id: 5, name: 'Ceecee', profession: "Engineer"},
  {id: 6, name: 'jack', profession: "Doctor"}
]

displayedColumns = ["id", "name", "profession"];

columnsFeatures = ["ID", "Name", "Profession"]; // these names will be displayed as column_title

handleRowActionButton = (element: any) => {
  console.log("Action Button Clicked:", element);
}

actionDisplayedColumns = ["action"] // for now it only works with one element in array, multiple action button columns feature will be added later on demand.

actionColumnFeatures = ["Action"]; these names will be displayed as action_column_title

multi_search: boolean = true; // set to true, shows column specific fields for multi searching features. Must be set true for using multi-search feature

mutliSearchFieldPlaceholder = ["ID", "Name", "Profession"]; // if left empty, the fields stay empty

single_search: boolean = false; // set to true, shows column single field at top of table. Must be set true for using single-search feature

single_search_placeholder: string = ""; // placeholder for the field shown in single-search feature

single_search_index: number = 0; // set this to the index of the column, that you want to use for searching in single-search feature

• For using icons options, use this link:

https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/

copy text between mat-icon tags and use it against 'actionIcon' input.

Configuration

You can style the columns and other things by using ng-deep:: feature, support for passing tailwind css will be added later if demanded by the users.

Contributing

1. Take fork of reporsitory.
2. Create branch with the name of the feature you want to add or bug you want to resolve, in following format: for feature branch: FEATURE-feature_name for bug solution branch: BUG-bug_title

License

This project is licensed under the MIT - see the LICENSE file for details.

Queries

In case of any questions feel free to start thread on github, or contact me on linked in. And I will try to reach out to you as soon as possible.

Credits

Mirza Haad Baig - owner/author

github: github.com/haadbaig
linkedin: linkedin.com/in/haadbaig
medium.com/@haadbaig
____________________________________