Material-table: Support draggable rows
Is your feature request related to a problem? Please describe.
It would be nice if material-table would support reordering rows by dragging them
Describe the solution you'd like
A new option to mark a table as row draggable and a callback to be notified when a row is dragged.
Describe alternatives you've considered
Is this possible to achieve by overriding components and using react-beautiful-dnd ? If so, this would be fine but I think a built-in option would be cleaner.
rnielsen
All 45 comments
Rows are typically sorted according to the corresponding column and order direction. I don't see how something like you suggest might be useful. Mind to describe the case?
jayarjo
on 21 Oct 2019
Sure. The use case is where the order of rows is important, such as a list of rules where the first rule is applied first. The user would drag around the rules in the order that they like and this order would be persisted on the server - you would most likely disable the column sorting feature for this use case. Usually when this feature is available a Drag Handle icon is added to the row.
Here's an example from another project: https://www.ag-grid.com/javascript-grid-row-dragging/
rnielsen
on 22 Oct 2019
i would also like to see this feature. i'd like to test material tables for one of the projects i'm working on, but can't unless this feature is implemented.
mathiashoeld
on 22 Oct 2019
I definitely need this feature. I'm using material-table and I love it so far. I'm surprised they don't have draggable rows feature. I have a requirement for something like drag and drop rows. I've tried various options like overriding the MTableBody and MTableRow with react-beautiful-dnd but none worked.
Satsh24
on 23 Oct 2019
PRs are welcome - never forget :P
jayarjo
on 25 Oct 2019
I would also need this feature. Is there a workaround I can implement meanwhile?
Nderim1
on 13 Nov 2019
+1
n-sviridenko
on 13 Nov 2019
+1 here.
josepichu
on 6 Dec 2019
+1
kslysz
on 16 Dec 2019
+1
mrcesc0
on 7 Jan 2020
+1
mrcesc0
on 15 Jan 2020
+1
awmoreira
on 30 Jan 2020
+1
Eugenelee
on 31 Jan 2020
+1
JosielLima
on 19 Feb 2020
+1
rogeliotg
on 23 Feb 2020
+1
murilopf
on 26 Feb 2020
+1
urkob
on 10 Mar 2020
+1
vernonmanuela
on 17 Mar 2020
+1
cadupedroni
on 23 Mar 2020
+1
roger1618
on 10 Apr 2020
+1 thans!!
yinchen618
on 10 Apr 2020
+1
mzparacha
on 14 Apr 2020
+1
Prasanna-ramesh
on 15 Apr 2020
+1
kishanio
on 28 Apr 2020
+1
diogosmendonca
on 30 Apr 2020
+1
StefanJanuschke
on 6 May 2020
+1
agustinbc
on 7 May 2020
+1
Ardeshir81
on 11 May 2020
+1
maolivieri
on 13 May 2020
It will be tricky in a tree structure
aamirafridi
on 16 May 2020
Any news on this topic ?
thanks
vuk-niko
on 25 May 2020
+1
martin-trajanovski
on 28 May 2020
+1
ekremkenter
on 31 May 2020
+1
Rymou
on 2 Jun 2020
Overriding row component I was able to give drag support. Please check may be helping you as well
components={{
Row: props => (
<MTableBodyRow {...props}
draggable="true"
onDragStart={(e) => {
console.log('onDragStart');
DrageState.row = props.data.tableData.id
}}
onDragEnter={e => {
e.preventDefault();
if( props.data.tableData.id != DrageState.row){
DrageState.dropIndex = props.data.tableData.id ;
}
}}
onDragEnd={(e) => {
console.log(`onDragEnd`);
if(DrageState.dropIndex != -1){
reodering({index: DrageState.row, dropIndex: DrageState.dropIndex})
}
DrageState.row = -1;
DrageState.dropIndex = -1;
}}
/>
)
}
rucsacman
on 4 Jun 2020
@rucsacman dude, it looks like a cool quick solution but I can't understand it. There are misspelling errors and stuff that get me confused. What's DrageStatus ?
piscespieces
on 10 Aug 2020
+1
Lory1990
on 11 Aug 2020
@rucsacman dude, it looks like a cool quick solution but I can't understand it. There are misspelling errors and stuff that get me confused. What's DrageStatus ?
Hi Dude ,
Yes, it should be DragState.
It will keep the clicked row and when mouse button release position of the near dropIndex keep the data about the new row position.
"reodering" function reorder the table rows.
const DragState = {
row: -1, //current row
dropIndex: -1 // drag target
};
Sorry for the confused
rucsacman
on 11 Aug 2020
I see that there are still comments about this feature request.
For everyone that is still looking for a solution - there was a PR opened with a complete implementation of that.
You can check #1995 (Draggable rows / rows reordering / drag & drop rows).
The PR was closed because the maintainer decided to close all "big" PRs and not merge them before a refactoring phase to the library (which is currently undergoing, but there is no ETA for when it will be done).
Maybe if more people will try and push it inside the maintainer will do so.
dekelb
on 27 Aug 2020
@rucsacman can u please provide full example as am not able to achieve it
Overriding row component I was able to give drag support. Please check may be helping you as well
components={{ Row: props => ( <MTableBodyRow {...props} draggable="true" onDragStart={(e) => { console.log('onDragStart'); DrageState.row = props.data.tableData.id }} onDragEnter={e => { e.preventDefault(); if( props.data.tableData.id != DrageState.row){ DrageState.dropIndex = props.data.tableData.id ; } }} onDragEnd={(e) => { console.log(`onDragEnd`); if(DrageState.dropIndex != -1){ reodering({index: DrageState.row, dropIndex: DrageState.dropIndex}) } DrageState.row = -1; DrageState.dropIndex = -1; }} /> ) }
yashaswinibprasad87
on 18 Sep 2020
@rucsacman can u please provide full example as am not able to achieve it
Overriding row component I was able to give drag support. Please check may be helping you as well
components={{ Row: props => ( <MTableBodyRow {...props} draggable="true" onDragStart={(e) => { console.log('onDragStart'); DrageState.row = props.data.tableData.id }} onDragEnter={e => { e.preventDefault(); if( props.data.tableData.id != DrageState.row){ DrageState.dropIndex = props.data.tableData.id ; } }} onDragEnd={(e) => { console.log(`onDragEnd`); if(DrageState.dropIndex != -1){ reodering({index: DrageState.row, dropIndex: DrageState.dropIndex}) } DrageState.row = -1; DrageState.dropIndex = -1; }} /> ) }
const DrageState = {
row: -1,
dropIndex: -1 // drag target
};
<MaterialTable
components={{
Row: props => (
<MTableBodyRow {...props}
draggable="true"
onDragStart={(e) => {
console.log('onDragStart');
DrageState.row = props.data.tableData.id
}}
onDragEnter={e => {
e.preventDefault();
if( props.data.tableData.id !== DrageState.row){
DrageState.dropIndex = props.data.tableData.id ;
}
}}
onDragEnd={(e) => {
console.log(`onDragEnd`);
if(DrageState.dropIndex !== -1){
reOrderRow(DrageState.row, DrageState.dropIndex)
}
DrageState.row = -1;
DrageState.dropIndex = -1;
}}
/>
)
}} // components
/>
//Reorder the table row
const offsetIndex = (from, to, arr = []) => {
if (from < to) {
let start = arr.slice(0, from),
between = arr.slice(from + 1, to + 1),
end = arr.slice(to + 1);
return [...start, ...between, arr[from], ...end];
}
if (from > to) {
let start = arr.slice(0, to),
between = arr.slice(to, from),
end = arr.slice(from + 1);
return [...start, arr[from], ...between, ...end];
}
return arr;
}
const reOrderRow = (from, to) =>{
let newtableData = offsetIndex(from, to, tableData);
//Update react state
setTableData(newtableData);
}
Rucsacman unfortunately I could not get it done by the way you suggested, I think MTableBodyRow does not have onDragStart/onDragEnter/onDragEnd properties, so it did not work for me.
Nevertheless, using react-beautiful-dnd library and watching the demo here:
https://egghead.io/lessons/react-persist-list-reordering-with-react-beautiful-dnd-using-the-ondragend-callback
I was able to combine material-table with react-beatiful-dnd as such:
import React from "react";
import ReactDOM from "react-dom";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import MaterialTable, { MTableBody, MTableBodyRow } from "material-table";
export default function App() {
const values = [
{ name: "one" },
{ name: "two" },
{ name: "three" },
{ name: "four" },
];
const [myState, setMyState] = React.useState(values);
const onDragEnd = (result) => {
const { destination, source } = result;
if (!destination) return;
if (source.index !== destination.index) {
let copyArray = [...myState];
let temp = myState[source.index];
copyArray.splice(source.index, 1);
copyArray.splice(destination.index, 0, temp);
setMyState(copyArray);
}
};
return (
<div style={{ maxWidth: "100%" }}>
<MaterialTable
columns={[{ title: "Numbers", field: "name" }]}
data={myState}
title=""
components={{
Body: (props) => (
<div>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={"singleColumnDroppableAreaThusStaticInput"}>
{(provided) => (
<div ref={provided.innerRef}>
<MTableBody {...props} />
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
),
Row: (props) => (
<Draggable
draggableId={props.data.tableData.id.toString()}
index={props.data.tableData.id}
>
{(provided) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<MTableBodyRow {...props} />
</div>
)}
</Draggable>
),
}}
/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
this works but I am getting a few warnings on the console. When grouped, these are:
- I am inserting div's into table/tbody/tr's thus getting validateDOMNesting warnings
- MTable is adding overflow auto into a div above the MTableBody, and react beautiul dnd is annoyed that there's a nested scroll that it cannot control, I haven't looked more into it, but looks like with the help of this community, this structure can be improved.
Thanks y'all
orhanhub
on 21 Nov 2020
@rucsacman can u please provide full example as am not able to achieve it
Overriding row component I was able to give drag support. Please check may be helping you as well
components={{ Row: props => ( <MTableBodyRow {...props} draggable="true" onDragStart={(e) => { console.log('onDragStart'); DrageState.row = props.data.tableData.id }} onDragEnter={e => { e.preventDefault(); if( props.data.tableData.id != DrageState.row){ DrageState.dropIndex = props.data.tableData.id ; } }} onDragEnd={(e) => { console.log(`onDragEnd`); if(DrageState.dropIndex != -1){ reodering({index: DrageState.row, dropIndex: DrageState.dropIndex}) } DrageState.row = -1; DrageState.dropIndex = -1; }} /> ) }const DrageState = { row: -1, dropIndex: -1 // drag target };<MaterialTable components={{ Row: props => ( <MTableBodyRow {...props} draggable="true" onDragStart={(e) => { console.log('onDragStart'); DrageState.row = props.data.tableData.id }} onDragEnter={e => { e.preventDefault(); if( props.data.tableData.id !== DrageState.row){ DrageState.dropIndex = props.data.tableData.id ; } }} onDragEnd={(e) => { console.log(`onDragEnd`); if(DrageState.dropIndex !== -1){ reOrderRow(DrageState.row, DrageState.dropIndex) } DrageState.row = -1; DrageState.dropIndex = -1; }} /> ) }} // components />//Reorder the table row const offsetIndex = (from, to, arr = []) => { if (from < to) { let start = arr.slice(0, from), between = arr.slice(from + 1, to + 1), end = arr.slice(to + 1); return [...start, ...between, arr[from], ...end]; } if (from > to) { let start = arr.slice(0, to), between = arr.slice(to, from), end = arr.slice(from + 1); return [...start, arr[from], ...between, ...end]; } return arr; } const reOrderRow = (from, to) =>{ let newtableData = offsetIndex(from, to, tableData); //Update react state setTableData(newtableData); }
Thank you it worked for me馃檪
Can we include an icon to each row next to/ before checkbox to indicate to drag,
As it was failing to include
@rucsacman Kindly help with it
yashaswinibprasad87
on 21 Nov 2020
Rucsacman unfortunately I could not get it done by the way you suggested, I think MTableBodyRow does not have onDragStart/onDragEnter/onDragEnd properties, so it did not work for me.
Nevertheless, using react-beautiful-dnd library and watching the demo here:
https://egghead.io/lessons/react-persist-list-reordering-with-react-beautiful-dnd-using-the-ondragend-callbackI was able to combine material-table with react-beatiful-dnd as such:
import React from "react"; import ReactDOM from "react-dom"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import MaterialTable, { MTableBody, MTableBodyRow } from "material-table"; export default function App() { const values = [ { name: "one" }, { name: "two" }, { name: "three" }, { name: "four" }, ]; const [myState, setMyState] = React.useState(values); const onDragEnd = (result) => { const { destination, source } = result; if (!destination) return; if (source.index !== destination.index) { let copyArray = [...myState]; let temp = myState[source.index]; copyArray.splice(source.index, 1); copyArray.splice(destination.index, 0, temp); setMyState(copyArray); } }; return ( <div style={{ maxWidth: "100%" }}> <MaterialTable columns={[{ title: "Numbers", field: "name" }]} data={myState} title="" components={{ Body: (props) => ( <div> <DragDropContext onDragEnd={onDragEnd}> <Droppable droppableId={"singleColumnDroppableAreaThusStaticInput"}> {(provided) => ( <div ref={provided.innerRef}> <MTableBody {...props} /> {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> ), Row: (props) => ( <Draggable draggableId={props.data.tableData.id.toString()} index={props.data.tableData.id} > {(provided) => ( <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > <MTableBodyRow {...props} /> </div> )} </Draggable> ), }} /> </div> ); } ReactDOM.render(<App />, document.getElementById("root"));this works but I am getting a few warnings on the console. When grouped, these are:
- I am inserting div's into table/tbody/tr's thus getting validateDOMNesting warnings
- MTable is adding overflow auto into a div above the MTableBody, and react beautiul dnd is annoyed that there's a nested scroll that it cannot control, I haven't looked more into it, but looks like with the help of this community, this structure can be improved.
Thanks y'all
Hope material-table internally react dnd, we need to explicitly import again
Which version of mat table you are using?
Try to re-implement with his solution
yashaswinibprasad87
on 21 Nov 2020
material-table internally imports react-dnd, it is one of its dependencies, and I am using the latest version of material-table, but somehow rucsacman's solution did not work for me. Can you post yours on github or somewhere, so I can look?
Hope material-table internally react dnd, we need to explicitly import again
Which version of mat table you are using?
Try to re-implement with his solution
orhanhub
on 21 Nov 2020
Related issues
jlgreene2
路
3Comments
victorwvieira
路
3Comments
kfirshahar
路
3Comments
lazeebee
路
3Comments
Likurg2010
路
3Comments
Most helpful comment
Sure. The use case is where the order of rows is important, such as a list of rules where the first rule is applied first. The user would drag around the rules in the order that they like and this order would be persisted on the server - you would most likely disable the column sorting feature for this use case. Usually when this feature is available a Drag Handle icon is added to the row.
Here's an example from another project: https://www.ag-grid.com/javascript-grid-row-dragging/