Fixed color display

netbox/dcim/tables.py

@@ -2,7 +2,7 @@ import django_tables2 as tables
 from django_tables2.utils import Accessor
 
 from tenancy.tables import COL_TENANT
-from utilities.tables import BaseTable, BooleanColumn, ToggleColumn
+from utilities.tables import BaseTable, BooleanColumn, ColorColumn, ToggleColumn
 from .models import (
     Cable, ConsolePort, ConsolePortTemplate, ConsoleServerPort, ConsoleServerPortTemplate, Device, DeviceBay,
     DeviceBayTemplate, DeviceRole, DeviceType, FrontPort, FrontPortTemplate, Interface, InterfaceTemplate,
@@ -662,6 +662,7 @@ class CableTable(BaseTable):
         template_code=CABLE_LENGTH,
         order_by='_abs_length'
     )
+    color = ColorColumn()
 
     class Meta(BaseTable.Meta):
         model = Cable

netbox/project-static/css/base.css

@@ -416,6 +416,10 @@ table.report th a {
 }
 
 /* Misc */
+.color-block {
+    display: block;
+    width: 80px;
+}
 .text-nowrap {
     white-space: nowrap;
 }

netbox/templates/dcim/cable.html

@@ -48,7 +48,7 @@
                     <tr>
                         <td>Color</td>
                         <td>
-                            <span style="background-color: #{{ cable.color }}">{{ cable.color }}A</span>
+                            <span class="label color-block" style="background-color: #{{ cable.color }}">&nbsp;</span>
                         </td>
                     </tr>
                     <tr>

netbox/utilities/tables.py

@@ -46,3 +46,13 @@ class BooleanColumn(tables.Column):
         else:
             rendered = '<span class="text-muted">&mdash;</span>'
         return mark_safe(rendered)
+
+
+class ColorColumn(tables.Column):
+    """
+    Display a color (#RRGGBB).
+    """
+    def render(self, value):
+        return mark_safe(
+            '<span class="label color-block" style="background-color: #{}">&nbsp;</span>'.format(value)
+        )