I have a draggable row in my Data Table that works great. I do however am seeing an extra section while dragging. It seems to be a transparent bit from whatever's above it. It may as well be by design in the Chrome Browser but I would love to know if there's a way to remove it.

Here's what I'm seeing:

enter image description here

And here's a code snippet of my draggable row:

    <template for:each = {myList} for:item = "item" for:index="indexVar" >
        <tr key={item.Id} data-drag-id={item.Id} class="slds-hint-parent draggable" draggable="true" ondragstart={itemDragStart}>
        // ... some code goes here ...

Appreciate any help and suggestions. Thanks!

Updated: Here is a GIF.

  • When you say Data Table do you mean this one? developer.salesforce.com/docs/component-library/bundle/… Or are you building your own html table and applying slds styling to it?
    – Arthlete
    Commented Jun 12, 2020 at 3:57
  • Hi, @Arthlete. I'm using a custom one just like you mentioned in your last statement. Something like this HTML in the playground. Is there a way to remove the extra section when dragging? Commented Jun 13, 2020 at 18:10
  • Are you trying to achieve something like this: developer.salesforce.com/docs/component-library/tools/…
    – Arthlete
    Commented Jun 13, 2020 at 21:51
  • Hi, @Arthlete. Actually, no. I'm not trying to remove the padding from my rows but trying to remove the extra section that looks faded when dragging the actual rows. Here is a GIF. Commented Jun 15, 2020 at 3:14
  • 1
    Take a look at the GIF I made. There's no sign of anything from the upper row when I am dragging. Try this playground and let me know if it's still not working correctly for you. If it is still giving you trouble then can you tell me the browser that you are using and your OS?
    – Arthlete
    Commented Jun 16, 2020 at 7:43

1 Answer 1


It turns out this was an issue with placement of one of the td. I had a textarea there that wasn't aligned with others as it was using custom height through CSS, and as a result was very near the row that came before it. After applying CSS like margin-top and a few other things, the issue went away.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .