Mixing
Reorder mat-table rows with angular material's drag-and-drop
Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples
The documentation deals with rearranging items within lists or transferring items between several lists. However, it doesn't talk about tables.
I was wondering whether there is a comfortable way of using angular material's drag-and-drop system for reordering rows in mat-table or cdk-table.
(You can add cdkDropList to mat-table which makes the mechanism work but without all the fancy animations and default drag placeholders.)
Does something like an easy-to-implement default for sorting table rows via drag-and-drop exist?
Thanks for your help :)
angular drag-and-drop angular-material mat-table
asked Nov 19 '18 at 15:06
David Brem
1131111
add a comment |
Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples
The documentation deals with rearranging items within lists or transferring items between several lists. However, it doesn't talk about tables.
I was wondering whether there is a comfortable way of using angular material's drag-and-drop system for reordering rows in mat-table or cdk-table.
(You can add cdkDropList to mat-table which makes the mechanism work but without all the fancy animations and default drag placeholders.)
Does something like an easy-to-implement default for sorting table rows via drag-and-drop exist?
Thanks for your help :)
angular drag-and-drop angular-material mat-table
asked Nov 19 '18 at 15:06
David Brem
1131111
You described that the mechanism is working. For me it is not working using the actual angular 7.1 . When I am adding a cdkDropList to the mat-table, I always get an Uncaught TypeError: Cannot read property 'clientRect' of undefined.
– jet miller
Nov 27 '18 at 18:23
add a comment |
Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples
The documentation deals with rearranging items within lists or transferring items between several lists. However, it doesn't talk about tables.
I was wondering whether there is a comfortable way of using angular material's drag-and-drop system for reordering rows in mat-table or cdk-table.
(You can add cdkDropList to mat-table which makes the mechanism work but without all the fancy animations and default drag placeholders.)
Does something like an easy-to-implement default for sorting table rows via drag-and-drop exist?
Thanks for your help :)
angular drag-and-drop angular-material mat-table
asked Nov 19 '18 at 15:06
David Brem
1131111
Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples
The documentation deals with rearranging items within lists or transferring items between several lists. However, it doesn't talk about tables.
I was wondering whether there is a comfortable way of using angular material's drag-and-drop system for reordering rows in mat-table or cdk-table.
(You can add cdkDropList to mat-table which makes the mechanism work but without all the fancy animations and default drag placeholders.)
Does something like an easy-to-implement default for sorting table rows via drag-and-drop exist?
Thanks for your help :)
angular drag-and-drop angular-material mat-table
angular drag-and-drop angular-material mat-table
asked Nov 19 '18 at 15:06
David Brem
1131111
asked Nov 19 '18 at 15:06
David Brem
1131111
asked Nov 19 '18 at 15:06
David Brem
1131111
asked Nov 19 '18 at 15:06
David Brem
1131111
asked Nov 19 '18 at 15:06
David Brem
1131111
1131111
You described that the mechanism is working. For me it is not working using the actual angular 7.1 . When I am adding a cdkDropList to the mat-table, I always get an Uncaught TypeError: Cannot read property 'clientRect' of undefined.
– jet miller
Nov 27 '18 at 18:23
add a comment |
You described that the mechanism is working. For me it is not working using the actual angular 7.1 . When I am adding a cdkDropList to the mat-table, I always get an Uncaught TypeError: Cannot read property 'clientRect' of undefined.
– jet miller
Nov 27 '18 at 18:23
You described that the mechanism is working. For me it is not working using the actual angular 7.1 . When I am adding a cdkDropList to the mat-table, I always get an Uncaught TypeError: Cannot read property 'clientRect' of undefined.
– jet miller
Nov 27 '18 at 18:23
You described that the mechanism is working. For me it is not working using the actual angular 7.1 . When I am adding a cdkDropList to the mat-table, I always get an Uncaught TypeError: Cannot read property 'clientRect' of undefined.
– jet miller
Nov 27 '18 at 18:23
add a comment |
2 Answers
2
active
oldest
votes
The styling is done by CSS (look at the CSS tab on the example page). I tweaked it to work with mat-table:
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
I placed this in my main styles.scss file.
For anyone wondering how to implement drag and drop on a mat-table, you need to:
- Add
cdkDropListtomat-table
- Add
(cdkDropListDropped)="onListDrop($event)"tomat-table
- Add
cdkDragtomat-row
onListDrop will look something like:
onListDrop(event: CdkDragDrop<string>) {
// Swap the elements around
moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}
moveItemInArray is an Angular Material function. You can import it.
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
add a comment |
its not working for mat table , can you post more described answer or any piece of code
answered Nov 28 '18 at 3:21
Smriti Jha
12
I've added a few points to the end of my answer that explains what you need to add to get drag and drop to work on a mat-table
– Lee Gunn
Dec 5 '18 at 10:35
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377450%2freorder-mat-table-rows-with-angular-materials-drag-and-drop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The styling is done by CSS (look at the CSS tab on the example page). I tweaked it to work with mat-table:
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
I placed this in my main styles.scss file.
For anyone wondering how to implement drag and drop on a mat-table, you need to:
- Add
cdkDropListtomat-table
- Add
(cdkDropListDropped)="onListDrop($event)"tomat-table
- Add
cdkDragtomat-row
onListDrop will look something like:
onListDrop(event: CdkDragDrop<string>) {
// Swap the elements around
moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}
moveItemInArray is an Angular Material function. You can import it.
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
add a comment |
The styling is done by CSS (look at the CSS tab on the example page). I tweaked it to work with mat-table:
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
I placed this in my main styles.scss file.
For anyone wondering how to implement drag and drop on a mat-table, you need to:
- Add
cdkDropListtomat-table
- Add
(cdkDropListDropped)="onListDrop($event)"tomat-table
- Add
cdkDragtomat-row
onListDrop will look something like:
onListDrop(event: CdkDragDrop<string>) {
// Swap the elements around
moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}
moveItemInArray is an Angular Material function. You can import it.
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
add a comment |
The styling is done by CSS (look at the CSS tab on the example page). I tweaked it to work with mat-table:
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
I placed this in my main styles.scss file.
For anyone wondering how to implement drag and drop on a mat-table, you need to:
- Add
cdkDropListtomat-table
- Add
(cdkDropListDropped)="onListDrop($event)"tomat-table
- Add
cdkDragtomat-row
onListDrop will look something like:
onListDrop(event: CdkDragDrop<string>) {
// Swap the elements around
moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}
moveItemInArray is an Angular Material function. You can import it.
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
The styling is done by CSS (look at the CSS tab on the example page). I tweaked it to work with mat-table:
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
I placed this in my main styles.scss file.
For anyone wondering how to implement drag and drop on a mat-table, you need to:
- Add
cdkDropListtomat-table
- Add
(cdkDropListDropped)="onListDrop($event)"tomat-table
- Add
cdkDragtomat-row
onListDrop will look something like:
onListDrop(event: CdkDragDrop<string>) {
// Swap the elements around
moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}
moveItemInArray is an Angular Material function. You can import it.
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
edited Dec 12 '18 at 10:03
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
answered Dec 5 '18 at 10:28
Lee Gunn
5,33522323
5,33522323
add a comment |
add a comment |
its not working for mat table , can you post more described answer or any piece of code
answered Nov 28 '18 at 3:21
Smriti Jha
12
I've added a few points to the end of my answer that explains what you need to add to get drag and drop to work on a mat-table
– Lee Gunn
Dec 5 '18 at 10:35
add a comment |
its not working for mat table , can you post more described answer or any piece of code
answered Nov 28 '18 at 3:21
Smriti Jha
12
I've added a few points to the end of my answer that explains what you need to add to get drag and drop to work on a mat-table
– Lee Gunn
Dec 5 '18 at 10:35
add a comment |
its not working for mat table , can you post more described answer or any piece of code
answered Nov 28 '18 at 3:21
Smriti Jha
12
its not working for mat table , can you post more described answer or any piece of code
answered Nov 28 '18 at 3:21
Smriti Jha
12
answered Nov 28 '18 at 3:21
Smriti Jha
12
answered Nov 28 '18 at 3:21
Smriti Jha
12
answered Nov 28 '18 at 3:21
Smriti Jha
12
12
I've added a few points to the end of my answer that explains what you need to add to get drag and drop to work on a mat-table
– Lee Gunn
Dec 5 '18 at 10:35
add a comment |
I've added a few points to the end of my answer that explains what you need to add to get drag and drop to work on a mat-table
– Lee Gunn
Dec 5 '18 at 10:35
I've added a few points to the end of my answer that explains what you need to add to get drag and drop to work on a mat-table
– Lee Gunn
Dec 5 '18 at 10:35
I've added a few points to the end of my answer that explains what you need to add to get drag and drop to work on a mat-table
– Lee Gunn
Dec 5 '18 at 10:35
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377450%2freorder-mat-table-rows-with-angular-materials-drag-and-drop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You described that the mechanism is working. For me it is not working using the actual angular 7.1 . When I am adding a cdkDropList to the mat-table, I always get an Uncaught TypeError: Cannot read property 'clientRect' of undefined.
– jet miller
Nov 27 '18 at 18:23