From 9181097194cb9bdb13304c0f63c4fe135e626993 Mon Sep 17 00:00:00 2001
From: wyyd-yxc <2868299717@qq.com>
Date: Sat, 12 Sep 2026 12:12:39 +0800
Subject: [PATCH] Add user option to rotate table column headers (#12837)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add user option to rotate table column headers (#12558)

Wide column titles (e.g. "Temperature coefficient [±ppm/°C]") take a
lot of horizontal space for narrow data. Add a ROTATE_TABLE_HEADERS
user setting (Display Options) which renders table header titles
vertically via a scoped CSS class, following the implementation
sketch from the issue discussion.

* Format ROTATE_TABLE_HEADERS description per ruff-format

* add missing doc place

* Document ROTATE_TABLE_HEADERS setting in user settings docs

* docs: add changelog entry for rotated table headers option

---------

Co-authored-by: Matthias Mair <code@mjmair.com>
---
 CHANGELOG.md                                         |  1 +
 docs/docs/settings/user.md                           |  1 +
 src/backend/InvenTree/common/setting/user.py         |  6 ++++++
 .../src/components/tables/InvenTreeTable.tsx         |  7 +++++++
 .../src/pages/Index/Settings/UserSettings.tsx        |  1 +
 src/frontend/src/styles/overrides.css                | 12 ++++++++++++
 6 files changed, 28 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2c8e530ff..04db896c3c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [#12713](https://github.com/inventree/InvenTree/pull/12713) adds SCIM 2 provisioning support, allowing InvenTree to be integrated with external identity providers for user management.
 - [#12731](https://github.com/inventree/InvenTree/pull/12731) adds OIDC provider settings to the Admin Center - making all Identity Federation settings now available in one place without the need to use the database admin interface.
+- [#12837](https://github.com/inventree/InvenTree/pull/12837) adds a user setting `ROTATE_TABLE_HEADERS` which rotates table headers by 90 degrees, improving readability for tables with long column titles.
 
 ### Changed
 
diff --git a/docs/docs/settings/user.md b/docs/docs/settings/user.md
index bb590bb6a1..b15dc34f4e 100644
--- a/docs/docs/settings/user.md
+++ b/docs/docs/settings/user.md
@@ -21,6 +21,7 @@ The *Display Settings* screen shows general display configuration options:
 {{ usersetting("ICONS_IN_NAVBAR") }}
 {{ usersetting("STICKY_HEADER") }}
 {{ usersetting("STICKY_TABLE_HEADER") }}
+{{ usersetting("ROTATE_TABLE_HEADERS") }}
 {{ usersetting("SHOW_SPOTLIGHT") }}
 {{ usersetting("BARCODE_IN_FORM_FIELDS") }}
 {{ usersetting("DATE_DISPLAY_FORMAT") }}
diff --git a/src/backend/InvenTree/common/setting/user.py b/src/backend/InvenTree/common/setting/user.py
index bbbebe30db..c30dcc6c7f 100644
--- a/src/backend/InvenTree/common/setting/user.py
+++ b/src/backend/InvenTree/common/setting/user.py
@@ -205,6 +205,12 @@ USER_SETTINGS: dict[str, InvenTreeSettingsKeyType] = {
         'default': False,
         'validator': bool,
     },
+    'ROTATE_TABLE_HEADERS': {
+        'name': _('Rotated Table Headers'),
+        'description': _('Display table column headers with rotated (vertical) text'),
+        'default': False,
+        'validator': bool,
+    },
     'SHOW_SPOTLIGHT': {
         'name': _('Show Spotlight'),
         'description': _('Enable spotlight navigation functionality'),
diff --git a/src/frontend/src/components/tables/InvenTreeTable.tsx b/src/frontend/src/components/tables/InvenTreeTable.tsx
index 40bd5d3e4c..b4b4417bb3 100644
--- a/src/frontend/src/components/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/components/tables/InvenTreeTable.tsx
@@ -120,6 +120,10 @@ export function InvenTreeTableInternal<T extends Record<string, any>>({
     return userSettings.isSet('STICKY_TABLE_HEADER');
   }, [userSettings]);
 
+  const rotateTableHeaders = useMemo(() => {
+    return userSettings.isSet('ROTATE_TABLE_HEADERS');
+  }, [userSettings]);
+
   const tableSearchParams = useMemo(() => {
     return searchParams
       ? excludeDetailNavigationParams(searchParams)
@@ -1031,6 +1035,9 @@ export function InvenTreeTableInternal<T extends Record<string, any>>({
         <Boundary label={`InvenTreeTable-${cacheKey}`}>
           <Box pos='relative'>
             <DataTable
+              className={
+                rotateTableHeaders ? 'rotate-table-headers' : undefined
+              }
               style={{
                 stickyHeader: stickyTableHeader ? 'top' : undefined
               }}
diff --git a/src/frontend/src/pages/Index/Settings/UserSettings.tsx b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
index 6c8be61dae..277ed6a27d 100644
--- a/src/frontend/src/pages/Index/Settings/UserSettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
@@ -55,6 +55,7 @@ export default function UserSettings() {
               'ICONS_IN_NAVBAR',
               'STICKY_HEADER',
               'STICKY_TABLE_HEADER',
+              'ROTATE_TABLE_HEADERS',
               'ENABLE_PREVIEW_PANEL',
               'SHOW_SPOTLIGHT',
               'BARCODE_IN_FORM_FIELDS',
diff --git a/src/frontend/src/styles/overrides.css b/src/frontend/src/styles/overrides.css
index a30d80124b..410aeac98d 100644
--- a/src/frontend/src/styles/overrides.css
+++ b/src/frontend/src/styles/overrides.css
@@ -35,3 +35,15 @@
 .mantine-datatable-resize-locked {
   width: 100% !important;
 }
+
+/* Vertically rotated table column headers (user setting: ROTATE_TABLE_HEADERS) */
+.rotate-table-headers thead th {
+  vertical-align: bottom;
+  min-width: 2.5rem;
+}
+
+.rotate-table-headers thead th .mantine-datatable-header-cell-sortable-text {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  white-space: nowrap;
+}