`shell
npm install --save akita-filters-mat-datasource

yarn add akita-filters-mat-datasource
`
or to install both package use this :
`shell
npm install --save akita-filters-plugin akita-filters-mat-datasource

yarn add akita-filters-plugin akita-filters-mat-datasource
`

Data Connector for Angular Material Table.

For dealing with angular material table, you need to provide a Data Connector.
This connector, help you by just giving the Entity Store. Data Connector, will deal with Akita Filter for you.

Define your data source here :
`typescript
this.dataSource = new AkitaMatDataSource(EntityQuery);
this.dataSource.setDefaultSort('colomnName', 'asc');
`

Import it with package :
`typescript
import { AkitaMatDataSource } from 'akita-filters-mat-datasource';
`

Then use it in Mat Data Table like other data source.

`angular2html
mat-table
#table
[dataSource]="dataSource"
[trackBy]="trackByName"
matSort
>...
`

#### Demo

A demo page is available in the playground "angular-material-demo" .

#### Dependencies

Need to have installed in your project these APIs :
"@angular/material": "latest",
"@angular/cdk": "latest"

#### Constructor, use existing AkitaFiltersPlugin

If needed you can specify, an already existing AkitaFiltersPlugins in the constructor. Useful to share it with another page/components. @see demo : angular-material-demo.
Else, it will create an internal AkitaFiltersPlugins.

`typescript
this.dataSource = new AkitaMatDataSource(this.productsQuery, this.productsService.filtersProduct);
`

Function

Then you have some function that you can use to manage filters

$3

By setting search properties, you set a filter like search.
`typescript
this.dataSource.search = "Search";
`
Both use filter and filter, but prefer using search, as filter is so confusing with setFilters functions. ("filter" is here to be the same as the MatDataSource)
You can also customize the filter ID, if different in your server API

`typescript
this.dataSource = new AkitaMatDataSource(this.photosQuery, this.photosService, {
searchFilterId: 'search', // you can set the id of this filter, usefull if the params is different for you (default : "search")
});
`

$3

By setting Mat Sort for sorting you can set the sort. Used by Mat Table when changing filter

`typescript
@ViewChild(MatSort, { static: true }) sort: MatSort;

ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
}
`

$3

By setting MatPaginator to enable pagination with datasource. Used by Mat Paginator to define pagination

`typescript
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
}
`

And add the MatPaginator directly like this in the template. No need to give the size, as it will be settled by the data source.
`html
[pageIndex]="0"
[pageSize]="25"
[pageSizeOptions]="[10, 25, 50, 100, 250]">

`

$3

By setting MatPaginator (cf before), it will use a local pagination.
You can specify the option : "serverPagination" to use server side pagination. (Need also to set a MatPaginator).
It will subscribe to MatPaginator change page, and create a server filter that send the page Number, and page size.
We will be then notified in withServer callback function.

See example in "photos" page.

`typescript
this.dataSource = new AkitaMatDataSource(this.photosQuery, this.photosService, {
serverPagination: true, // set to true, to use server side pagination.
pageIndexId: '_page', // you can set the id of this filter, usefull if the params is different for you (default : "page")
pageIndexDisplay: true, // Set to true to display page filter (default: false)
pageIndexName: 'Page', // Set the Name, to you filter, usefull if you want to display the filter : "Name: (value)" (default: "Page")
pageSizeId: '_limit', // you can set the id of this filter, usefull if the params is different for you (default : "size")
pageSizeDisplay: true, // Set to true to display size filter (default: false)
pageSizeName: 'Size', // Set the Name, to you filter, usefull if you want to display the filter : "Name: (value)" (default: "Size")
debounceTimeBetweenTwoChanges: 60, // Debounce time number between two changes, to avoid closest multiples changes events
resetPageIndexOnFiltersChange: true, // If true, will resets page Index after each filters changes (default: true)
});
`

You can also set options after constructor with function :
`typescript
this.dataSource = new AkitaMatDataSource(this.photosQuery, this.photosService).withOptions({
serverPagination: true, // set to true, to use server side pagination.
});
`


But you will need to set the total by your one, depending on how you get this information.

`typescript
this.dataSource.total = 100; // set the total to Mat Paginator
console.log('total number', this.dataSource.total); // or get the setted total, was the length setted in Mat Paginator
`

#### Subscribe to filter changes

subscribe to be noticed when a filter has changed (and with server pagination, will exclude pagination filters).
`typescript
this.dataSource.onFiltersChanges$.subscribe(() => {
// have some actions here
});
`

$3

Access to the AkitaFilters plugins instance, and use all function from AkitaFilters plugins.
`typescript
this.dataSource.akitaFiltersPlugin.setFilter({
id: 'category',
value: 'garden',
predicate: (value: ProductPlant, index, array) => value.category === category
});
`

$3

Set the default sort.
`typescript
this.dataSource.setDefaultSort('colomnName', 'asc');
`

$3

Some proxy function, just to call AkitaFilters Plugins.
`typescript
setFilter(filter: Partial>): void; // Create or update a filter. Any mandatory properties, will be added
setFilters(filter: Partial>[]): void; // Create or update multiples filters in one time with emit changes onlu once
removeFilter(id: ID): void; // Remove a filter by their name
removeFilters(id: ID[]): void; // Remove multiples filters with emit changes onlu once
clearFilters(): void; // Remove all filters
getFilterValue< S >(id: string): E | null; // Get a filters values
`

Compatibility with MatTableDataSource functions

Compatibility has been added with all methods and properties present in MatDatasource. (except the method "sortData" because the sorting in Akita works differently).
Which implements the MatTableDataSourceInterface which takes all the methods and properties of the following MatTableDataSource:
`typescript
export interface MatTableDataSourceInterface {
data: T[];
filter: string;
paginator: MatPaginator;
sort: MatSort;
filterPredicate: ((data: T, filter: string) => boolean);
filteredData: T[];
// Not Implemented : sortData: ((data: T[], sort: MatSort) => T[]);
sortingDataAccessor: ((data: T, sortHeaderId: string) => string | number);
}
`

$3

* data : getter and setter for the data that will be managed in the datasource
* filter: string, to perform a full text search in the data.
* paginator: getter and setter to use pagination with MatPaginator
* sort: getter and setter to use sorting with MatSort
* filteredData : to retrieve synchronously the filtered data in the datasource

$3


Is the function that is called by default, for filtering the data during the simple search.
This method can be overridden to use a different function as it is the case for MatDataSource.

`typescript
/**
* Checks if a data object matches the data source's filter string. By default, each data object
* is converted to a string of its properties and returns true if the filter has
* at least one occurrence in that string. By default, the filter string has its whitespace
* trimmed and the match is case-insensitive. May be overridden for a custom implementation of
* filter matching.
* @param data Data object used to check against the filter.
* @param filter Filter string that has been set on the data source.
* @returns Whether the filter matches against the data
*/
filterPredicate: ((data: E, filter: string) => boolean) = (data: E, searchFilter: string) => {
return defaultFilter(data, null, null, {value: searchFilter});
}
`

$3

Throw an error, because this function cannot be used in akita sorting.

You can use instead "sortFunction" which will be the function used with Akita, to perform the comparison.
The override method should have this signature :
((a: E, b: E, sort: MatSort) => 0 | 1 | -1) = (a, b, sort): 0 | 1 | -1

$3

As in MatTableDataSource, you can define a custom sortingDataAccessor, that need to have this signature :
((data: T, sortHeaderId: string) => string | number)

`typescript
/**
* Data accessor function that is used for accessing data properties for sorting through
* the default sortFunction.
* This default function assumes that the sort header IDs (which defaults to the column name)
* matches the data's properties (e.g. column Xyz represents data['Xyz']).
* May be set to a custom function for different behavior.
* @param data Data object that is being accessed.
* @param sortHeaderId The name of the column that represents the data.
*/
sortingDataAccessor: ((data: T, sortHeaderId: string) => string | number) =
(data: T, sortHeaderId: string): string|number => {
const value = (data as {[key: string]: any})[sortHeaderId];

if (_isNumberValue(value)) {
const numberValue = Number(value);

// Numbers beyond MAX_SAFE_INTEGER can't be compared reliably so we
// leave them as strings. For more info: https://goo.gl/y5vbSg
return numberValue < MAX_SAFE_INTEGER ? numberValue : value;
}

return value;
}
`

$3

You can also use AkitaFilters plugins withServer in Akita-Mat-DataSource by using AkitaFilters Plugins function.
Or there is also a function similar in Akita-Mat-DataSource.

$3

Akita-mat-data-source is now a subpackage to avoid error with akita-filters-plugin, if you don't use Angular Material.

Changes this
`typescript
import { AkitaMatDataSource } from 'akita-filters-plugin';
`
to
`typescript
import { AkitaMatDataSource } from 'akita-filters-mat-datasource';
`

$3

To correspond with Akita, you need now to specify only the entityState. The entity element is calculated as in akita with getEntityType

Changes this
`typescript
new AkitaFiltersPlugin()
`
to
`typescript
new AkitaFiltersPlugin()
`

Changes this
`typescript
AkitaFilter[]
`
to
`typescript
AkitaFilterBase[]
`

Changes this
`typescript
new AkitaMatDataSource()
`
to
`typescript
new AkitaMatDataSource()
`

$3

Only update all libraries : Use last version of Angular, and last version of Akita

$3

Deprecation of AkitaFilter type. Use AkitaFilterLocal when you use local filters, and AkitaFilterServer, when you use server feature.
All type extends AkitaFilterBase, this type is used in the libraries. So you can also use it.

$3

update to angular 10. So this libs should not be fully compatible with previous Angular version.

$3

* update to angular 16-17 and Build in Ivy modes. So this lib should not be fully compatible with previous Angular version.
* Akita filters Mat Datasource is no longer published in the same package o Akita-filter-plugins.
* You need to install it from a separate package
* Imports it from different package
* minimal required version was angular 16 and Akita 8
* Updated all repository

Install the new module akita-filters-mat-datasource

`shell
npm install --save akita-filters-mat-datasource

yarn add akita-filters-mat-datasource
`
Import it with package :
`typescript
import { AkitaMatDataSource } from 'akita-filters-mat-datasource';
``

npm page : https://www.npmjs.com/package/akita-filters-mat-datasource