search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.4k stars 6.76k forks source link

feat(CDK Table): Able to inject row in cell #29114

Open keatkeat87 opened 6 months ago

keatkeat87 commented 6 months ago

Feature Description

The same feature request was made in 2019 but was rejected #15733. Andrew Seguin did not explain why the Angular Material Team does not plan on supporting this case. Over the past few years, Angular has changed a lot, so I am trying to ask again.

Use Case

wawa2 I am trying to do a hover header to show all cell border effects, similar to the Google Ads table (as shown in the GIF above).

My idea is to create two directives (Row and Cell). Row listens to mouse enter events and then queries all Cell instances to call Cell.showBorder(). However, I know that Angular query is based on the LView tree, not the DOM tree, so the Row can't query its Cells.

I tried another way, where Cell injects its Row. However, this also didn't work. After checking the code, I found that when CdkTable creates cell embedded view, it does not specify injector image This is the reason why Cell cannot inject Row.

I'm not sure if the new Angular team will change their attention, but I hope to at least get an explanation.

andrewseguin commented 5 months ago

Can you explain more about why you need any injection here? It's fairly trivial to set a border on row hover

tr:hover th {
  border: 1px solid black;
}
keatkeat87 commented 5 months ago

Actually, it's a resizer bar, not just a border. wawa2 I'd like to encapsulate all the hover-related logic (showing and hiding the resizer) within the resizer component itself. This way, the table component remains clean and doesn't need hover handling if it doesn't have a resizer. In essence, if there's a table with a resizer, the resizer component will take care of the hover behavior, eliminating the need for additional logic in the table.

That's not something the Angular team absolutely needs to implement. We can hack it in many ways. But, if the Angular team feels it wouldn't be much effort and it makes sense for td to inject tr, then I think you could consider it. It would make developers more flexible, especially for complex tables.

wagnermaciel commented 1 month ago

@andrewseguin I think this fell off your radar