Merge pull request #28 from killbill/518-sorting-fix

Enhance plugins table: enable ordering and define column orderability

Author: piyushkalasariya

app/assets/stylesheets/kpm/kpm.css

@@ -391,10 +391,12 @@
 
 .kpm-plugins-index table th {
   padding: 0.375rem 0.75rem !important;
+  padding-right: 2rem !important;
   font-weight: 500;
   font-size: 0.875rem;
   color: #717680;
   text-transform: capitalize;
+  position: relative;
 }
 
 .kpm-plugins-index table td {
@@ -405,8 +407,8 @@
   text-transform: capitalize !important;
 }
 
-.kpm-plugins-index table thead tr th::after,
-.kpm-plugins-index table thead tr th::before {
+.kpm-plugins-index table thead tr th:not(:last-child)::after,
+.kpm-plugins-index table thead tr th:not(:last-child)::before {
   content: "" !important;
   display: inline-block !important;
   width: 0.75rem !important;
@@ -415,16 +417,16 @@
   background-position: center !important;
   background-size: 0.75rem 0.75rem !important;
   position: absolute !important;
-  right: 0.5rem !important;
+  left: 4rem !important;
 }
 
-.kpm-plugins-index table thead tr th::after {
+.kpm-plugins-index table thead tr th:not(:last-child)::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5.5L6 2.5L9 5.5' stroke='%23A4A7AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   top: 45% !important;
   transform: translateY(-50%) !important;
 }
 
-.kpm-plugins-index table thead tr th::before {
+.kpm-plugins-index table thead tr th:not(:last-child)::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 6.5L6 9.5L9 6.5' stroke='%23A4A7AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   bottom: 45% !important;
   transform: translateY(50%) !important;

app/views/kpm/plugins/_plugins_table.html.erb

@@ -26,7 +26,11 @@
     $('#plugins-table').dataTable({
       "dom": "t",
       "paging": false,
-      "ordering": false
+      "ordering": true,
+      "columnDefs": [
+        { "orderable": true, "targets": [0, 1] },
+        { "orderable": false, "targets": [2] }
+      ]
     });
   });
 <% end %>