Components: MatTableDataSource should delimit stringified properties with a special character

[JacobBrandt]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The data table filter should filter on the individual value of cells of a row

What is the current behavior?

The data table filters on the combined value of all cells in a row

What are the steps to reproduce?

StackBlitz: https://stackblitz.com/edit/angular-prsrvj

What is the use-case or motivation for changing an existing behavior?

Given the provided StackBlitz I would expect when searching for "test" that I only get one row back. However both are shown because the cell values are combined together without spacing.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All

[manklu]

Works as documented. See https://material.angular.io/components/table/api#MatTableDataSource

You are free to provide your own filter function.

[JacobBrandt]

@manklu I know that I can provide my own filter function, I'm saying the default is really bizarre.

[josephperrott]

Closing as this is working as intended. To change from this default filtering function, you will need to provide your own function.

[JacobBrandt]

Just because documentation says the default combines all values into one string doesn't mean its a good solution. I was saying that a better solution is possible.
I read the read me and saw this:

What do we mean by "high-quality"?
Behave as expected across a wide variety of use-cases without bugs.

I don't think this default filtering behaves as expected.

[JacobBrandt]

Here is another example. https://stackblitz.com/edit/angular-prsrvj-2nhdev. I just reversed the column data from row 2 on the last row.

So are you saying that users should expect that when they enter test that theFlute | Stop row shows up but not the Stop | Flute row? I'm not sure why this doesn't demonstrate unexpected behavior.

[JacobBrandt]

@josephperrott Can you provide some clarification then. It's not an obvious behavior so doesn't that go against the phrase "behave as expected". When the teams says behave as expected do you guys really mean that it should do only what's documented?

[jelbourn]

Thanks @JacobBrandt, the current behavior is indeed incorrect. There should be a delimiter here:
https://github.com/angular/material2/blob/0a25fca2d7457eafa923e24c54af779611e2560b/src/lib/table/table-data-source.ts#L177

The fix would be to just add a special character as a delimiter (something that wouldn't normally be typed) and a corresponding unit test.

[JacobBrandt]

Thanks for reopening. What delimiter do you have in mind that would work in all cases?

[jelbourn]

Honestly I was just going to pick a weird unicode character

[JacobBrandt]

Sounds good to me.

[StephenWTurner]

Rather than a "weird unicode character" how about a specific non-printable character that is in the character set solely for the purposes of delimiting text? i.e. '\x1F'

https://en.wikipedia.org/wiki/Delimiter#ASCII_delimited_text

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}