Merge pull request #144 from jenkinsci/right-align-number-columns

[JENKINS-62414] Make number columns right aligned

Author: uhafner

pom.xml

@@ -18,7 +18,7 @@
   <url>https://github.com/jenkinsci/data-tables-api-plugin</url>
 
   <properties>
-    <revision>1.10.21-4</revision>
+    <revision>1.10.23-1</revision>
     <changelist>-SNAPSHOT</changelist>
     <datatables.version>1.10.23</datatables.version>
 

src/main/java/io/jenkins/plugins/datatables/TableColumn.java

@@ -31,15 +31,34 @@ public class TableColumn {
     private final String headerLabel;
     private final String definition;
 
+    /**
+     * Renders a expandable details column with the specified text.
+     *
+     * @param detailsText
+     *         the text to show if the column has been expanded.
+     *
+     * @return the HTML div to create the details column
+     */
     public static String renderDetailsColumn(final String detailsText) {
         return renderDetailsColumn(detailsText, new JenkinsFacade());
     }
 
+    /**
+     * Renders a expandable details column with the specified text.
+     *
+     * @param detailsText
+     *         the text to show if the column has been expanded.
+     * @param jenkinsFacade
+     *         facade for Jenkins API calls
+     *
+     * @return the HTML div to create the details column
+     */
     public static String renderDetailsColumn(final String detailsText, final JenkinsFacade jenkinsFacade) {
         return div()
                 .withClass("details-control")
                 .attr("data-description", detailsText)
-                .with(new UnescapedText(new SvgTag(DETAILS_COLUMN_ICON_NAME, jenkinsFacade).withClasses("details-icon").render()))
+                .with(new UnescapedText(
+                        new SvgTag(DETAILS_COLUMN_ICON_NAME, jenkinsFacade).withClasses("details-icon").render()))
                 .render();
     }
 
@@ -101,8 +120,8 @@ public TableColumn setHeaderClass(final ColumnCss headerClass) {
     }
 
     /**
-     * Sets the width of the column. Will be expanded to the class {@code col-width-[width]}, see
-     * {@code jenkins-style.css} for details about the actual percentages.
+     * Sets the width of the column. Will be expanded to the class {@code col-width-[width]}, see {@code
+     * jenkins-style.css} for details about the actual percentages.
      *
      * @param width
      *         the width CSS class to select for the column
@@ -138,10 +157,14 @@ public enum ColumnCss {
         /** No special rendering, the display property will be shown as such. */
         NONE(""),
         /**
-         * Dates will be shown using Luxon. The display value will be a human friendly relative time like
-         * "two weeks ago", rather than an absolute time. A tooltip is available that shows the absolute time.
+         * Dates will be shown using Luxon. The display value will be a human friendly relative time like "two weeks
+         * ago", rather than an absolute time. A tooltip is available that shows the absolute time.
          */
         DATE("date"),
+        /**
+         * Numbers will be shown right aligned so they can be compared more easily..
+         */
+        NUMBER("text-right"),
         /** Disables sorting of the column. Rendering is the same as with {@code NONE}. */
         NO_SORT("nosort");
 

src/main/webapp/css/jenkins-style.css

@@ -6,6 +6,10 @@ table.dataTable {
     border-collapse: collapse !important;
 }
 
+tfoot {
+    font-weight: bold;
+}
+
 /* Change color of active pagination, to fit to the material blue grey css */
 .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
     background-color: #b4b4b4;

src/main/webapp/js/table.js

@@ -20,6 +20,10 @@ jQuery3(document).ready(function () {
                         targets: 'nosort', // All columns with the '.nosort' class in the <th>
                         orderable: false
                     },
+                    {
+                        targets: 'text-right', // All columns with the '.text-right' class in the <th>
+                        className: 'text-right'
+                    },
                     {
                         targets: 'date', // All columns with the '.date' class in the <th>
                         render: function (data, type, _row, _meta) {