Feature requests, API changes or bug fixes

[Maxl94]

Hello together,

since this library starts gaining popularity, I like to know what should be improved in the next updates. In this thread features, bug fixes and API changes will be discussed.

Thanks for your feedback.

[ddrobot-ideas]

Hi,

_handleClick() is not called at all after @HostListener removing.

Angular 11, Material 11

[Maxl94]

Hi @ddrobot-ideas, thanks for your feedback. Could you provide some more information?

• Version of Angular
• Describe the failing behavior
• Provide logs
• Provide screenshots

Without this information it is hard to understand what's wrong. Thanks for your support.

[Rakshith-hv]

is it possible to implement filtering/searchtext on data in MatMultiSortTableDataSource , I know it is possible with MatTableDataSource

[Maxl94]

@Rakshith-hv I have not used MatSortTableDataSource filtering. If the Basic DataSource provides filtern, than the MatMultiSortTableDataSource does it either, the class extends the DataSource. You can do it of course in a service and set the data to the MatMultiSortTableDataSource. You could do it, as an example in this repository in the DummyService.

[Rakshith-hv]

filtering is present in MatTableDataSource and not in DataSource. Basically, for filtering any data we will use below logic with MatTableDataSource ..

searchText :"" --> we get this input from html on a key stroke on search field

dataSource: MatTableDataSource;

this.dataSource.filter === searchText

now the dataSource will have the filtered value and the same is returned to html

[Maxl94]

I think this is a good feature request. Thanks for the Idea, I will create a separate issue.

[CarstenHouweling]

Thanks for all your effort.

I would love to see a built in cache using localStorage so users don't need to set their preferred sorting and column arrangements.

[FilipKovac]

i saw, that after toggle, there is some console.log. Also after dynamically change of active columns, there is no way to accomplish to change it just one time. Now, i have to set isActive property on every column as well as set displayedColumns. It would be nice to have function which will set isActive property as well as displayed columns from passed ids of columns.

Now I have to do this:
const colsToBeShown: string[] = ['id1', 'id2',....] // ids of columns to be shown
this.table.displayedColumns = colsToBeShown // table: TableData
this.table.columns.forEach((c: { id: string, name: string, isActive: boolean }) => {
const index = colsToBeShown.findIndex(c2 => c2 === c.id)
c.isActive = index > -1
if (c.isActive)
colsToBeShown.splice(index, 1)
})

Instead i would like to just call this.table.setActiveColumns(colsToBeShown)

[fbaldo31]

Hello,
Is it possible to provide an example with several tables in the same page please ?
I tried to add an #id to the mat-multi-sort-header element and call it with @ViewChild but it doesn't work.
Did you already tried something like that ?

[Maxl94]

Hi, unfortunately, I have never tried something like that. I think the sort indicators could cause some trouble. Sorry. Maybe you can split your tables in component, but not sure if that fits your architecture.

[cummings695]

is there any way to make the sorting case insensitive. I am able to do this with MatTableDataSource by setting the sortingDataAccessor.

[Maxl94]

Hi @cummings695, unfortunately I don't think so. As a workaround, you could use a service like the DummyService in my Demo to sort your data. There you would have full control over the sort algorithm, but I understand that this not a good solution.

[JanMann89]

Hi, I found the following bug:
When the mat-multi-sort-table-settings-button is behind an horizontal overflow, the column-order is not sortable via drag & drop.

The issue is reproduceable in the sample project by simply changing the window width in the style.css:

html, body { 
    height: 100%; 
    width: 3000px; // or whatever width you need to cause a horizontal scrolling
}

[Maxl94]

Hi, I found the following bug: When the mat-multi-sort-table-settings-button is behind an horizontal overflow, the column-order is not sortable via drag & drop.

The issue is reproduceable in the sample project by simply changing the window width in the style.css:

html, body { 
    height: 100%; 
    width: 3000px; // or whatever width you need to cause a horizontal scrolling
}

Thanks, as soon I find the time I will have a look.

[cummings695]

I am running into the issue currently where the data model for the grid is changing during development of new features and the components throw an error because its saved setting do not match with the grid configuration. is there any way to have this error just clear the setting and restart. I could do this in my component but I cannot seem to trap the error.

[BartoszNowak-PastureMap]

Hi,
Could You remove console.log("Store") from table-data.ts? It doesn't seem to be necessary and just clutters console.

[B34v0n]

Hi,
Is there an option (or is it planned to implement) for the sorting to only apply multiple sorts if I click it with pressed shift or ctrl key?
I'd love to use this, but I need the "standard"-behaviour that if you click another header to sort, that the sort is only the new clicked header instead of both. And the multiple-sort only happening, if I hold down the shift or ctrl key.

So:

• I click on header1: it's only sorted with header1
• I click on header2: it's only sorted with header2
• I click on header3 with pressed shift/ctrl key: it's sorted with header2 and header 3
• I click on header4 (not with shift/ctrl): it's only sorted with header 4

[Maxl94]

@B34v0n thanks for your suggestions. I personally think that's not a good feature, since it is not really user-friendly and as well all contradicts the mobile first approach, since there is no Shift/Ctr click. This does not only apply for phones but also any touch device in general.

If you still need this feature be free to fork the table and implement it yourself.

[manimau01]

Hi, thank you for your efforts for putting this library. I have recently started using it and is very useful.

Do you have any plans for updating it to be used with Angular 16? I am trying to update my app to Angular 16, but I am getting error due to this library.

Package "ngx-mat-multi-sort" has an incompatible peer dependency to "@angular/cdk" (requires "~15.0.4", would install "16.1.4").
Package "ngx-mat-multi-sort" has an incompatible peer dependency to "@angular/material" (requires "~15.0.4", would install "16.1.4").
× Migration failed: Incompatible peer dependencies found.

I will appreciate if you can let us know about the migration plan.

[Maxl94]

Hi, thank you for your efforts for putting this library. I have recently started using it and is very useful.

Do you have any plans for updating it to be used with Angular 16? I am trying to update my app to Angular 16, but I am getting error due to this library.

Package "ngx-mat-multi-sort" has an incompatible peer dependency to "@angular/cdk" (requires "~15.0.4", would install "16.1.4"). Package "ngx-mat-multi-sort" has an incompatible peer dependency to "@angular/material" (requires "~15.0.4", would install "16.1.4"). × Migration failed: Incompatible peer dependencies found.

I will appreciate if you can let us know about the migration plan.

I have released a 16.x version

[MilanNemeth]

Hi, thank you for your efforts for putting this library. I have recently started using it and is very useful.
Do you have any plans for updating it to be used with Angular 16? I am trying to update my app to Angular 16, but I am getting error due to this library.
Package "ngx-mat-multi-sort" has an incompatible peer dependency to "@angular/cdk" (requires "~15.0.4", would install "16.1.4"). Package "ngx-mat-multi-sort" has an incompatible peer dependency to "@angular/material" (requires "~15.0.4", would install "16.1.4"). × Migration failed: Incompatible peer dependencies found.
I will appreciate if you can let us know about the migration plan.

I have released a 16.x version

@Maxl94 I've just noticed, that the released version of the package.json has incorrect Material and CDK versions, more precisely the patch version should be 2 instead of 4:

ngx-multi-sort-table/projects/mat-multi-sort/package.json

Lines 28 to 29 in 7fae5c0

	"@angular/material": "^16.2.4",
	"@angular/cdk": "^16.2.4"

Can you check?

[tomohavvk]

Please, fix typo in README.md file.
table.onPagnationEvent($event) -> table.onPaginationEvent($event)

Location: https://github.com/Maxl94/ngx-multi-sort-table/blob/master/README.md?plain=1#L121C74-L121C90

[FilipKovac]

Please check this. Function onPaginationEvent has a condition on line 86 for } else if ($event.previousPageIndex && $event.previousPageIndex < $event.pageIndex) { but material pagination returns as previousPageIndex 0 and the condition fails (it should not) since index starts at 0 when user is on first page and click on any next page it does not fire nextObservable.

[ruempel]

We suggest using only the 6 dots icon and not the entire menu entry as a drag handle. This fixes scrolling with fingers on mobile devices, when you have a small screen and many menu items.

#168

[Catscratch]

In order to keep the issues clean I would suggest to move any discussion in here into the discussions section https://github.com/Maxl94/ngx-multi-sort-table/discussions

A couple of issues were already fixed:

• feat: use only 6 dots icon as a drag handle for table menu #177
• chore: remove unnecessary console logs #183
• fix: next observable not fired on page index 0 #182
• chore: fix some README.md typos #181