How to make some columns fixed and some columns draggable in React Table - ReactJS

Question

I am following this example of React Table to attain drag and drop functionality in React Table columns.

I have seen that the code is not working properly whenever I am introducing sub columns. This is my Demo - https://codesandbox.io/s/jpzwmvj7py

I have 4 columns, column 1 , 2 and 3 are simple columns while column 4 has subcolumns. Now I am trying to keep col 4 fixed and trying to rearrange col 1, 2 and 3. But I am not able to make col 4 fixed and not getting the desired outcome. Col 1 , 2 and 3 can interchange their place due to drag and drop but col 4 should be fixed and should not change its position. Kindly help me to understand where I am doing wrong. I am a complete beginner in React.

jmathew jmathew · Accepted Answer · 2018-12-25T07:46:09

The issue is that in your code for DraggableTable. It takes all the given headers and makes draggable. The way that class works is by applying a CSS class to the headers the spans that make the headers.

You can see that here in DraggableTable:

const cols = columns.map(col => ({
  ...col,
  Header: <span className="draggable-header">{col.Header}</span>
}));

That code is in the render() method. In react, after render() is called, the callback componentDidMount() triggers. The important thing here is that the DOM nodes actually exist at the time code is executing in this function.

This class only applies the Drag behavior to the DOM nodes that have the CSS selector applied in the render. As you can see in the mountEvents() function:

const headers = Array.prototype.slice.call(
  document.querySelectorAll(".draggable-header")
);

headers.forEach((header, i) => {
... add drag logic ...
}

So to make things optionally not draggable I added a property to the header definitions in index.js. Then in the render where we're creating the headers I check for that property before adding the CSS class that adds drag behavior.

index.js

 {
    Header: "Status",
    noDrag: true,
 ....

DraggableTable.js

Header: <span className={ col.noDrag ? "":"draggable-header"}>{col.Header}</span>

Here's a fiddle

How to make some columns fixed and some columns draggable in React Table - ReactJS

1 Answers