dataGrid align numbers right #957

packages/web/src/datagrid/DataGridCell.svelte

@@ -54,6 +54,8 @@
 
   // don't parse JSON for explicit data types
   $: jsonParsedValue = !editorTypes?.explicitDataType && isJsonLikeLongString(value) ? safeJsonParse(value) : null;
+
+  $: showHint = allowHintField && rowData && _.some(col.hintColumnNames, hintColumnName => rowData[hintColumnName]);
 </script>
 
 <td
@@ -68,11 +70,12 @@
   class:isDeleted
   class:isAutofillSelected
   class:isFocusedColumn
+  class:alignRight={_.isNumber(value) && !showHint}
   {style}
 >
   <CellValue {rowData} {value} {jsonParsedValue} {editorTypes} />
 
-  {#if allowHintField && rowData && _.some(col.hintColumnNames, hintColumnName => rowData[hintColumnName])}
+  {#if showHint}
     <span class="hint"
       >{col.hintColumnNames.map(hintColumnName => rowData[hintColumnName]).join(col.hintColumnDelimiter || ' ')}</span
     >
@@ -199,4 +202,9 @@
     overflow: visible;
     cursor: crosshair;
   }
+
+  .alignRight {
+    color: var(--theme-icon-green);
+    text-align: var(--data-grid-numbers-align);
+  }
 </style>

packages/web/src/settings/SettingsModal.svelte

@@ -138,6 +138,8 @@ ORDER BY
             defaultValue="10"
           />
 
+          <FormCheckboxField name="dataGrid.alignNumbersRight" label="Align numbers to right" defaultValue={false} />
+
           <div class="heading">SQL editor</div>
 
           <div class="flex">

packages/web/src/stores.ts

@@ -218,6 +218,9 @@ export const visibleTitleBar = derived(useSettings(), $settings => {
   // console.log('nativeMenuOnStartup', nativeMenuOnStartup);
   return !$settings['app.fullscreen'] && !nativeMenuOnStartup;
 });
+export const alignDataGridNumbersToRight = derived(useSettings(), $settings => {
+  return !!$settings?.['dataGrid.alignNumbersRight'];
+});
 
 export const visibleHamburgerMenuWidget = derived(useSettings(), $settings => {
   const electron = getElectron();
@@ -231,6 +234,7 @@ subscribeCssVariable(visibleSelectedWidget, x => (x ? 1 : 0), '--dim-visible-lef
 subscribeCssVariable(leftPanelWidth, x => `${x}px`, '--dim-left-panel-width');
 subscribeCssVariable(visibleTitleBar, x => (x ? 1 : 0), '--dim-visible-titlebar');
 subscribeCssVariable(lockedDatabaseMode, x => (x ? 0 : 1), '--dim-visible-tabs-databases');
+subscribeCssVariable(alignDataGridNumbersToRight, x => (x ? 'right' : 'left'), '--data-grid-numbers-align');
 
 let activeTabIdValue = null;
 activeTabId.subscribe(value => {