style

app/models/communication/block/template/datatable.rb

 class Communication::Block::Template::Datatable < Communication::Block::Template::Base
 
-  has_array :columns
   has_elements Communication::Block::Template::Datatable::Row
+  has_array :columns
   has_text :caption
 
 end

app/models/communication/block/template/datatable/row.rb

 class Communication::Block::Template::Datatable::Row < Communication::Block::Template::Base
 
-    has_array :cells
+  has_array :cells
 
 end

app/views/admin/communication/blocks/templates/datatable/_edit.html.erb

-
-
-<a  class="<%= button_classes('mb-4 me-2') %>"
-    v-on:click="data.columns.pop(); data.elements.forEach(row => row.cells.pop());">
-    Supprimer la dernière colonne
-</a>
-
-
 <div class="table-responsive mb-5">
-  <table class="table table-striped table-hover">
+  <table class="table table-bordered table-hover">
     <thead>
       <tr>
-        <td></td>
         <td v-for="(column, index) in data.columns">
-          <input 
-              type="text"
-              v-model="data.columns[index]">
-            <a  class="btn btn-sm btn-danger ms-2"
+          <div class="d-flex">
+            <input  type="text"
+                    class="form-control"
+                    v-model="data.columns[index]">
+            <a  class="btn btn-danger ms-2"
                 v-on:click="data.columns.splice(index, 1); data.elements.forEach(row => row.cells.splice(index, 1));">
                 <i class="fas fa-times"></i>
             </a>
+          </div>
         </td>
-        <td>
-          <a  class="<%= button_classes("btn-sm") %>"
+        <td class="text-end">
+          <a  class="btn btn-primary me-2"
               v-on:click="data.columns.push('')">
               <i class="fas fa-plus"></i> colonne
           </a>
+          <a  class="btn btn-primary"
+              v-on:click="data.elements.push({cells: []})">
+              <i class="fas fa-plus"></i> ligne
+          </a>
         </td>
       </tr>
     </thead>
     <tbody>
       <draggable :list="data.elements" handle=".dragHandle">
         <tr v-for="(row, index) in data.elements">
-          <td>
-            <a class="btn p-0 dragHandle">
-              <i class="fa fa-bars handle"></i>
-            </a>
-          </td>
           <td v-for="(column, columnIndex) in data.columns">
-            <input 
-                type="text"
-                v-model="row.cells[columnIndex]">
+            <input  type="text"
+                    class="form-control"
+                    v-model="row.cells[columnIndex]">
           </td>
-          <td>
-            <a  class="btn btn-sm btn-danger"
-                v-on:click="data.elements.splice(index, 1);">
-                <i class="fas fa-times"></i>
-            </a>
+          <td class="text-end">
+            <div class="d-flex">
+              <a  class="btn btn-danger"
+                  v-on:click="data.elements.splice(index, 1)">
+                  <i class="fas fa-times"></i>
+              </a>
+
+              <a class="btn ms-auto dragHandle">
+                <i class="fa fa-bars handle"></i>
+              </a>
+            </div>
           </td>
         </tr>
       </draggable>
     </tbody>
   </table>
-  <a  class="<%= button_classes('btn-sm') %>"
-      v-on:click="data.elements.push({cells: []})">
-      <i class="fas fa-plus"></i> ligne
-  </a>
 </div>
 
 
@@ -63,7 +57,5 @@
     placeholder: "Écrivez-ici la transcription textuelle du tableau" %>
 
 
-<%#= block_component_add_element "Ajouter une ligne" %> 
+<%#= block_component_add_element "Ajouter une ligne" %>
 <%# Comportement non attendu dans ce context  %>
-
-