Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add example of a mat-table with re-orderable columns #18456

Merged
merged 4 commits into from
Feb 26, 2020

Conversation

jeanbza
Copy link
Contributor

@jeanbza jeanbza commented Feb 10, 2020

This adds an example of how to re-order a table's columns with CDK drag drop.

This example can be seen at https://stackblitz.com/edit/mat-table-col-reorder. (I created that - it is almost 1:1) (It does not work since stackblitz doesn't have the fix for #15948)

This has come up numerous times in issues and requests:

Note: It looks like CdkDragDrop.previousIndex is never being updated. It always reports the original index - rather than the previous - of the thing being dragged. So, in this PR I've had to add a little mapping from CdkDragDrop.previousIndex -> name from column list -> actual previousIndex.

Note: This requires a very recent version of angular that has the fix for #15948 and #18482 (as of writing, that is likely to be HEAD - hopefully fixes are released soon).

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 10, 2020
@jeanbza jeanbza changed the title add example of a re-orederable table add example of a mat-table with re-orderable columns Feb 10, 2020
@jelbourn jelbourn requested a review from crisbeto February 10, 2020 19:13
@jelbourn jelbourn added docs This issue is related to documentation G This is is related to a Google internal issue labels Feb 10, 2020
@jeanbza
Copy link
Contributor Author

jeanbza commented Feb 21, 2020

Refactored to not have the hack now that the fix is in. Also cleaned lint errors. PTAL.

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@crisbeto crisbeto added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Feb 21, 2020
@Falven
Copy link

Falven commented Feb 24, 2020

@jadekler could you go into more detail on the version of angular required?

@jeanbza
Copy link
Contributor Author

jeanbza commented Feb 24, 2020

@Falven I've updated my PR description, but basically it's HEAD currently. Hopefully those bug fixes are released soon.

@jelbourn jelbourn added target: patch This PR is targeted for the next patch release pr: merge safe labels Feb 24, 2020
@jelbourn jelbourn merged commit 7b3ea26 into angular:master Feb 26, 2020
@jelbourn
Copy link
Member

@jadekler FYI to show up on the docs site, we also need to add this entry to https://github.com/angular/material.angular.io/blob/master/src/app/shared/documentation-items/documentation-items.ts#L410

@jeanbza
Copy link
Contributor Author

jeanbza commented Feb 27, 2020

jelbourn pushed a commit that referenced this pull request Mar 3, 2020
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 29, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement docs This issue is related to documentation G This is is related to a Google internal issue target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants