Datagrid Base

datagrid.cljs

; https://github.com/borkdude/draggable-button-in-reagent/blob/master/src-cljs/drag/main.cljs

(def columns
  [{:key :one   :display "One"}
   {:key :two   :display "Two"}
   {:key :three :display "Three"}
   {:key :four  :display "Four"}
   {:key :five  :display "Five"}])

(def cell-renderers
  {:one #(+ 13 %)})

(def data
  (for [i (range 1 6)]
    (zipmap
      [:one :two :three :four :five]
      (for [j (range 1 6)] (* i j)))))

; (defn- allow-drop
;   [e]
;   (.preventDefault e))

(defn handle-drag-start
  [e]
  (.setData (.. e -dataTransfer) "text/plain" ""))

(defn handle-drag-enter
  [e]
  (.preventDefault e)
  (println "Drag enter!"))

(defn handle-drop
  [e]
  (.preventDefault e)
  (println "Drop!"))

(defn datagrid-header
  [{:keys [draggable display]}]
  [:div.datagrid__header
    {:on-drag-start handle-drag-start
     :on-drag-enter handle-drag-enter
     :on-drop handle-drop}
    [:div display]
    (when draggable [:div.datagrid__draghandle.px-2 "‖"])])

(defn datagrid
  "A datagrid component, one day."
  [{:keys [columns data draggable-columns cell-renderers]
    :or   {draggable-columns false cell-renderers {}}}]
  [:div.datagrid
   (for [{:keys [display key]} columns] ^{:key (name key)}
     [:div.datagrid__column {:draggable draggable-columns}
      [datagrid-header {:draggable draggable-columns :display display}]
      (for [d data] ^{:key (hash d)}
        [:div.datagrid__cell
         (if-let [renderer (get cell-renderers key)]
           (renderer (get d key))
           (get d key))])])])

(defn app
  []
  [:div.flex.justify-center.pt-8.mx-64
   [datagrid {:columns columns
              :data data
              :cell-renderers cell-renderers
              :draggable-columns true}]])

datagrid.css

.datagrid {
  @apply flex flex-grow;
}

.datagrid-border {
  border-color: rgba(255, 255, 255, 0.1);
}

.datagrid__column {
  @apply flex-1;
}

.datagrid__header,
.datagrid__cell {
  @apply px-4 py-2;
}

.datagrid__header {
  @apply font-bold flex align-middle justify-between;
  background-color: rgba(0, 0, 0, 0.1);
}

.datagrid div:first-child .datagrid__header:first-child {
  @apply rounded-tl;
}

.datagrid div:last-child .datagrid__header:first-child {
  @apply rounded-tr;
}

.datagrid div:first-child .datagrid__cell:last-child {
  @apply rounded-bl;
}

.datagrid div:last-child .datagrid__cell:last-child {
  @apply rounded-br;
}

.datagrid div .datagrid__header {
  @apply datagrid-border border-l border-t;
}

.datagrid div:last-child .datagrid__header {
  @apply border-r;
}

.datagrid__cell {
  @apply datagrid-border border-t border-l;
}

.datagrid div .datagrid__cell:last-child {
  @apply border-b;
}

.datagrid div:last-child .datagrid__cell {
  @apply border-r;
}