Drag-to-reorder list table. Wraps the core SortableGrid hook (priv/static/assets/phoenix_kit.js) with the projects module's standard chrome: card-shadow shell, table layout, drag-handle column with bars-3 icon, hover state, and align-middle cells so icons stay vertically centered during drag.

When draggable={false} the drag handle column is dropped and the hook isn't attached — useful when the list is filtered (archived / all) so reordering wouldn't write consistent positions.

Slots

• :col — one per visible column. :label becomes the <th> text; the inner block renders the cell. :class is appended to the <td> (align-middle is always merged in).

Example

<.sortable_table
  id="tasks-list-body"
  rows={@tasks}
  row_id={& &1.uuid}
  event="reorder_tasks"
  draggable={true}
>
  <:col label={gettext("Title")}>
    <.smart_link
      navigate={Paths.edit_task(t.uuid)}
      emit={{PhoenixKitProjects.Web.TaskFormLive,
             %{"live_action" => "edit", "id" => t.uuid}}}
      embed_mode={@embed_mode}
      class="link link-hover font-medium"
    >
      {Task.localized_title(t, lang)}
    </.smart_link>
  </:col>
  <:col label={gettext("Actions")} class="text-right">
    ...
  </:col>
</.sortable_table>