Add user option to rotate table column headers (#12837)

* 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

@@ -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
 

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") }}

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'),

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
               }}

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',

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;
+}