Use Swapy within a HTML table
Author: isoaxeCreated Jan 14, 2025Updated Jun 5, 2025
Is it possible to use Swapy within a HTML table structure if the desired functionality is to drag and drop table rows?
A table has the following structure:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Munich</td>
</tr>
<tr>
<td>Mike Johnson</td>
<td>35</td>
<td>Lille</td>
</tr>
</tbody>
</table>The problem is that Swapy requires the nesting of the element with the data-swapy-item attribute within an element that has the data-swapy-slot attribute. See below from the docs.
<div class="container">
<div class="section-1" data-swapy-slot="foo">
<div class="content-a" data-swapy-item="a">
<!-- Your content for content-a goes here -->
</div>
</div>
<div class="section-2" data-swapy-slot="bar">
<div class="content-b" data-swapy-item="b">
<!-- Your content for content-b goes here -->
</div>
</div>
<div class="section-3" data-swapy-slot="baz">
<div class="content-c" data-swapy-item="c">
<!-- Your content for content-c goes here -->
</div>
</div>
</div>This does not seem possible to achieve with a table. It requires that <td> be a direct decendent of <tr> and <tr> be a direct decendent of <tbody>.
Is there any workaround for this?
Source: TahaSh/swapy