feat(table): Support drag and drop of rows and columns in same table

[jimshowalter]

Feature Description

Users should be able to drag and drop one or more rows and also drag and drop one or more columns.

Currently it appears that a table can either support drag and drop for rows, or drag and drop for columns, but not both.

If it's not possible to do this with Angular Material's table, is there some other component Angular developers should use?

Do developers need to write a new drag-and-drop?

Even just a blog entry on the topic from Google/Angular that provides some hints/direction would be super-helpful.

Use Case

It's a basic need in a spreadsheet, and Angular Material's table would make a great spreadsheet, except for this missing support.

I'm not the first to ask for this. See for example https://stackoverflow.com/questions/66665859/is-it-possible-to-move-rows-and-columns-in-the-same-angular-material-table and https://stackoverflow.com/questions/65000227/angular-material-table-with-rearrange-rows-and-columns-option.

[ljorgensen]

I need to be able to move columns (e.g. by dragging the column header) and rows (e.g. by dragging the row header), but I can do only one or the other successfully in a given table. I also need to support a variable number of columns and rows, including adding/removing rows and/or columns.

It seems like a reasonable thing to want to do, but it appears to be a missed use case in Angular Material Table.

I've seen this: https://stackblitz.com/edit/angular-ivy-z3cpj2, but it turns out to work only as an artifact of the data in the example. I figured out how to fix the problem in that example (see fix here: https://stackblitz.com/edit/angular-ivy-ia99xc). The data has a different structure than what's expected in mat-table, but at least it supports moving columns and rows in the same table.

I've made a small example of the direction I'm going: https://stackblitz.com/edit/create-fqjhgg. The top table in app.component.html shows columns moving, the bottom table (currently commented out) shows rows moving. I need to be able to do both in one table.

I’ve lost track of all the things I've tried, but here's an example of the closest I’ve gotten to creating something that works: https://stackblitz.com/edit/create-detaao. It appears to conflate the column and row indices; there are 4 columns and 10 rows, and the indices go from 0 to 13, regardless of whether drag-drop is moving vertically or horizontally. It tends to work best when dragging the last column horizontally as far left as possible, or when dragging the last row vertically up to the top of the table (but only slightly into the header row). In other cases (e.g. dragging a random column horizontally or a random row vertically), it usually ends up in a surprising location and not the the one intended. In none of these cases is the dragging pretty.

I haven’t been able to find an example of this working in mat-table. If there’s a way to do this, it would be awesome to have an example.

[jimshowalter]

Possibly related: #13372

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.