React-beautiful-dnd: provided.placeholder in a table

[valmassoi]

To add the provided.placeholder for a table row the tr and provided.placeholder need to be wrapped in a div but this messes up the rows format. Any recommendations on what to do here?

<tbody>
rowList.map((key) => (
    <Draggable
        key={key}
        draggableId={key}
    >
        {(provided, snapshot) => (
            <div> // need to wrap in div to add the placeholder
                <tr>...</tr>
                {provided.placeholder}
            </div>
        ))}
    </Draggable>
)
</tbody>

[alexreardon]

You would try wrapping the placeholder in a <tr>. Let me know how you go

[valmassoi]

The problem is my normal being wrapped by a div even without the placeholder or this package in general the extra div screws up the table

[alexreardon]

Oh sorry, this is for the Draggable. I am following now. Yes, the current API does make this hard. We need the provided.placeholder to be a sibling of the element which cannot currently do as React does not support returning an array of children. Once we move to React 16 we will be able to overcome this limitation: (see https://github.com/facebook/react/issues/2127) for more details. We are planning on jumping to React 16 once it is stable and has been soaked publicly for a little while #8

Can you please create an example on webpack bin with this scenario? That way we can have a play and see if there is a reasonable workaround in the meantime. Here is a base for you to get started with: https://www.webpackbin.com/bins/-Kr9aE9jnUeWlphY8wsw

[valmassoi]

@alexreardon here's the example with tables: https://www.webpackbin.com/bins/-KuVEVD2KOW8uNkxiBWa
Try deleting the three lines that say comment out - this will change it to proper table formatting but loses the placeholder

[alexreardon]

Unfortunately this is a current limitation of React:
https://www.webpackbin.com/bins/-KuW-9jwJpDYOuX1Yjrb

I cannot seem to find a way to return an array

[alexreardon]

Caused by #8

[alexreardon]

I am keen to get this working - as we too will need sortable tables!

[alexreardon]

For now i'll close this as a duplicate and track it in #8 .

[valmassoi]

Ok thanks Alex. I'm thinking about trying to hack a placeholder by adding a temporary row with empty data to my array that gets mapped to build the trs when onDragStart fires and remove it when onDragEnd and I'll splice it in at the source.index with a class to make it transparent.

Another problem I found with the table is when dragging the row loses its auto width:

AUY.DLR is being dragged and the $0.0010 x 1,300 should be under the Ask Col

[alexreardon]

Without seeing the source it is a little tricky to know what is going on. Can you mimic your example in webpack bin so i can take a look?

[valmassoi]

@alexreardon the placeholder is working in react 16!
https://www.webpackbin.com/bins/-KvDK5REuF8Lzp0oT5Hk
and now you can see the table row width issue when dragging

[jaredcrowe]

nice one @valmassoi!

I don't think there's much we can do about the table column widths if you need to use table-layout: auto. We set position: fixed on the dragging item, which pulls it out of the flow so the column widths will collapse. The simple work-around is to hard-code table and column widths, like so: https://www.webpackbin.com/bins/-KvU70fxM3VdlP_ND0Zv.

A more complicated work-around could be to read the width of the table columns on drag start and manually set the column widths on the dragging item. I haven't tested this solution, but I assume it'd work?

[geemanjs]

I just came across the same issue and as webpackbin has merged with codesandbox had to do a few things to get the examples above working thought I'd share @valmassoi's example above for anyone who needs it:

https://codesandbox.io/s/32yrn7nj6p