UI: Use tabular-numbers globally (#107036)

* UI: Use tabular-numbers globally with feature toggle

* Enable toggle by default

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -85,6 +85,7 @@ Most [generally available](https://grafana.com/docs/release-life-cycle/#general-
 | `alertingMigrationUI`                  | Enables the alerting migration UI, to migrate data source-managed rules to Grafana-managed rules                                   | Yes                |
 | `alertingImportYAMLUI`                 | Enables a UI feature for importing rules from a Prometheus file to Grafana-managed rules                                           | Yes                |
 | `unifiedNavbars`                       | Enables unified navbars                                                                                                            |                    |
+| `tabularNumbers`                       | Use fixed-width numbers globally in the UI                                                                                         | Yes                |
 
 ## Public preview feature toggles
 

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -1032,4 +1032,9 @@ export interface FeatureToggles {
   * @default false
   */
   preferLibraryPanelTitle?: boolean;
+  /**
+  * Use fixed-width numbers globally in the UI
+  * @default true
+  */
+  tabularNumbers?: boolean;
 }

packages/grafana-ui/src/themes/GlobalStyles/elements.ts

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 
 import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data';
 
+import { getFeatureToggle } from '../../utils/featureToggle';
 import { getFocusStyles } from '../mixins';
 
 export function getElementStyles(theme: GrafanaTheme2, isExtensionSidebarOpen?: boolean) {
@@ -61,6 +62,7 @@ export function getElementStyles(theme: GrafanaTheme2, isExtensionSidebarOpen?:
       fontVariantLigatures: 'no-contextual',
       ...theme.typography.body,
       ...bodyOverflow,
+      fontVariantNumeric: getFeatureToggle('tabularNumbers') ? 'tabular-nums' : 'initial',
     },
 
     'h1, .h1': getVariantStyles(theme.typography.h1),

pkg/services/featuremgmt/registry.go

@@ -1773,6 +1773,13 @@ var (
 			Owner:       grafanaDashboardsSquad,
 			Expression:  "false",
 		},
+		{
+			Name:        "tabularNumbers",
+			Description: "Use fixed-width numbers globally in the UI",
+			Stage:       FeatureStageGeneralAvailability,
+			Owner:       grafanaFrontendPlatformSquad,
+			Expression:  "true",
+		},
 	}
 )
 

pkg/services/featuremgmt/toggles_gen.csv

@@ -231,3 +231,4 @@ skipTokenRotationIfRecent,privatePreview,@grafana/identity-access-team,false,fal
 alertEnrichment,experimental,@grafana/alerting-squad,false,false,false
 alertingImportAlertmanagerAPI,experimental,@grafana/alerting-squad,false,false,false
 preferLibraryPanelTitle,privatePreview,@grafana/dashboards-squad,false,false,false
+tabularNumbers,GA,@grafana/grafana-frontend-platform,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -934,4 +934,8 @@ const (
 	// FlagPreferLibraryPanelTitle
 	// Prefer library panel title over viz panel title.
 	FlagPreferLibraryPanelTitle = "preferLibraryPanelTitle"
+
+	// FlagTabularNumbers
+	// Use fixed-width numbers globally in the UI
+	FlagTabularNumbers = "tabularNumbers"
 )

pkg/services/featuremgmt/toggles_gen.json

@@ -3236,6 +3236,22 @@
         "frontend": true
       }
     },
+    {
+      "metadata": {
+        "name": "tabularNumbers",
+        "resourceVersion": "1750754828442",
+        "creationTimestamp": "2025-06-20T12:08:40Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2025-06-24 08:47:08.442537461 +0000 UTC"
+        }
+      },
+      "spec": {
+        "description": "Use fixed-width numbers globally in the UI",
+        "stage": "GA",
+        "codeowner": "@grafana/grafana-frontend-platform",
+        "expression": "true"
+      }
+    },
     {
       "metadata": {
         "name": "teamHttpHeadersMimir",