Uses cursors for simplicity, uses common grid bottom

src/clj/auto_ap/ssr/components/data_grid.clj

@@ -3,8 +3,10 @@
    [auto-ap.ssr-routes :as ssr-routes]
    [auto-ap.ssr.components.card :refer [content-card-]]
    [auto-ap.ssr.components.paginator :refer [paginator-]]
+   [auto-ap.ssr.components.buttons :refer [a-button-]]
    [bidi.bidi :as bidi]
-   [hiccup2.core :as hiccup]))
+   [hiccup2.core :as hiccup]
+   [auto-ap.ssr.hx :as hx]))
 
 (defn header- [params & rest]
   (into [:th.px-4.py-3 {:scope "col" :class (:class params)
@@ -103,3 +105,23 @@
     [:div {:class "htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2 overflow-hidden w-full h-full"}
      [:div {:class "flex items-center justify-center w-full h-full border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700 bg-opacity-50" }
       [:div {:class "px-3 py-1 text-xs font-medium leading-none text-center text-blue-800 bg-blue-200 rounded-full animate-pulse dark:bg-blue-900 dark:text-blue-200"} "loading..."]]])])
+
+(defn new-row- [{:keys [index colspan tr-params] :as params} & content]
+  (row-
+    (merge {:class  "new-row"
+            :x-data (hx/json {:newRowIndex index})
+            }
+           tr-params)
+    (cell- {:colspan colspan
+            :class   "bg-gray-100"}
+           [:div.flex.justify-center
+            (a-button- (merge
+                         (dissoc params :index :colspan)
+                         {
+                                "@click"    "$dispatch('newRow', {index: newRowIndex++})"
+                                :color      :secondary
+                                :hx-trigger "newRow"
+                                :hx-vals    (hiccup/raw "js:{index: event.detail.index}")
+                                :hx-target  "closest .new-row"
+                                :hx-swap    "beforebegin"})
+                       content)])))