angular / angular/components

feat(Mat-Table): Allow for adding multiple TBODY within Mat-Table

Open
#28,195 1 comment 5 reactions 0 assignees View on GitHub
area: cdk/table feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

In the current cdk Table implementation we can only have on `` with a `matRowDef`. This will generate a TBODY element with the TR's inside.
That works fine for most use case.

I would like to be able to add a second TBODY with a selection of the rows of the datasource (based on a filter) so that I have 2 groups of rows within the same table.

I tried using the When option in matRowDef but that doesn't result in 2 TBODY's, but it comes close into what I am looking for.

### Use Case

I am having a list of Categories of which the top 3 can have primary flag. Those are display at the top, then row 4 until X is the non primary Categories.
I enabled drag and drop and I only want to be able to order the Primary rows within their TBODY and the non-primary rows in their TBODY. So you can't accidentally drop a Non primary row into a primary block.

You can control if a category is primary or not by editing the Category itself.

So to sum up feature request:

- Allow for multiple TBODYs which can have a filtered collection of the datasource
- Allow Drag and drop within that tbody only
image

Contributor guide

Open the contributing guide

Research direction

Start with the CDK Table implementation and the matRowDef When option to understand how the current single TBODY is generated. Define how multiple filtered datasource groups should render and how drag-and-drop should remain within each TBODY; done means both behaviors work for the described primary and non-primary category groups.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.