Two-row circular table in Clojurescript / Reagent

Question

I'm having trouble getting my body to align properly with clojurescript / reagent. I am not really sure that I don’t understand what to do in html or what ...

I am currently displaying the body of a table using a loop

(defn table-body [list-of-maps] [:tbody (for [one-map list-of-maps] [:tbody [:tr [:td (:key1 one-map)] [:td (:key2 one-map)] [:td (:key3 one-map)] [:td (:key4 one-map)] [:td (:key5 one-map)] [:td (:key6 one-map)] [:td (:key7 one-map)]] [:tr [:td (:key8 one-map)]]])]) 

The problem is that I need to group both externally and internally to use any html element, right? If I use [: tbody] on both, this will ruin the alignment with the [: thead] section. If I use an element other than tbody, then it creates all other problems. Everything looks great if I delete [: tbody] in the for loop and in the last [: tr].

Edit: I am currently judging the problem. My ajax application receives and shares data related to a table. When re-rendering, the formatting of the table becomes corrupted.

Edit2: I found a problem.

 (defn test-body [list-of-maps] [:tbody (for [one-map @list-of-maps] [:tbody [:tr [:td (:key1 one-map)] [:td (:key2 one-map)] [:td (:key3 one-map)] [:td (:key4 one-map)] [:td (:key5 one-map)] [:td (:key6 one-map)] [:td (:key7 one-map)]] [:tr [:td (:key8 one-map)]]])]) (defn test-head [] [:thead [:th "key1"] [:th "key2"] [:th "key3"] [:th "key4"] [:th "key5"] [:th "key6"] [:th "key7"]]) (defn test55 [] (let [list-of-maps (reagent/atom [])] (js/setTimeout (fn [] (reset! list-of-maps '({:key1 "a1" :key2 "a2" :key3 "a3" :key4 "a4" :key5 "a5" :key6 "a6" :key7 "a7" :key8 "a8"} {:key1 "b1" :key2 "b2" :key3 "b3" :key4 "b4" :key5 "b5" :key6 "b6" :key7 "b7" :key8 "b8"}))) 3000) [:table [test-head] [test-body list-of-maps]])) 

When the list of maps re-displays the alignment of table breaks.

Answer 1

It turns out that this problem can be solved by thinking about things just like vectors. Which vector do you want the end result to look like?

 [:tbody [:tr [:td "a1"] [:td "a2"] [:td "a3"] [:td "a4"] [:td "a5"] [:td "a6"] [:td "a7"]] [:tr [:td "a8"]] [:tr [:td "b1"] [:td "b2"] [:td "b3"] [:td "b4"] [:td "b5"] [:td "b6"] [:td "b7"]] [:tr [:td "b8"]]] 

So, for this purpose, we intended to create this body function.

 (defn test-body [list-of-maps] (into [] (concat [:tbody] (apply concat (for [one-map @list-of-maps] [ [:tr [:td (:key1 one-map)] [:td (:key2 one-map)] [:td (:key3 one-map)] [:td (:key4 one-map)] [:td (:key5 one-map)] [:td (:key6 one-map)] [:td (:key7 one-map)]] [:tr [:td (:key8 one-map)]]]))))) 

This is my decision. Could be better.

Answer 2

I think your problem is the unequal number of cells in the rows. The HTML TD element has the COLSPAN attribute. Try setting the last row to the number of cells in the lines above.

 (defn test-body [list-of-maps] [:tbody (for [one-map @list-of-maps] [:tbody [:tr [:td (:key1 one-map)] [:td (:key2 one-map)] [:td (:key3 one-map)] [:td (:key4 one-map)] [:td (:key5 one-map)] [:td (:key6 one-map)] [:td (:key7 one-map)]] [:tr [:td {:colspan 7} (:key8 one-map)]]])])