@finos/legend-application-repl 0.0.48 → 0.0.49

package/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx

@@ -16,7 +16,6 @@
 
 import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { useREPLStore } from '../../REPLStoreProvider.js';
 import {
   FormBadge_Advanced,
   FormCheckbox,
@@ -31,7 +30,7 @@ import {
   FormDocumentation,
 } from '../../repl/Form.js';
 import {
-  DataCubeAggregateOperation,
+  DataCubeAggregateOperator,
   DataCubeColumnDataType,
   DataCubeColumnKind,
   DataCubeColumnPinPlacement,
@@ -46,1046 +45,1117 @@ import {
   DEFAULT_URL_LABEL_QUERY_PARAM,
 } from '../../../stores/dataCube/core/DataCubeQueryEngine.js';
 import { DocumentationKey } from '../../../application/LegendREPLDocumentation.js';
+import type { DataCubeState } from '../../../stores/dataCube/DataCubeState.js';
 
-export const DataCubeEditorColumnPropertiesPanel = observer(() => {
-  const repl = useREPLStore();
-  const dataCube = repl.dataCube;
-  const panel = dataCube.editor.columnProperties;
-  const gridConfiguration = dataCube.editor.generalProperties.configuration;
-  const selectedColumn = panel.selectedColumn;
-  const [openColumnsDropdown, closeColumnsDropdown, columnsDropdownProps] =
-    useDropdownMenu();
-  const [openKindDropdown, closeKindDropdown, kindDropdownProps] =
-    useDropdownMenu();
-  const [
-    openAggregationTypeDropdown,
-    closeAggregationTypeDropdown,
-    aggregationTypeDropdownProps,
-  ] = useDropdownMenu();
-  const [
-    openNumberScaleDropdown,
-    closeNumberScaleDropdown,
-    numberScaleDropdownProps,
-  ] = useDropdownMenu();
-  const [
-    openFontFamilyDropdown,
-    closeFontFamilyDropdown,
-    fontFamilyDropdownProps,
-  ] = useDropdownMenu();
-  const [
-    openFontSizeDropdown,
-    closeFontSizeDropdown,
-    openFontSizeDropdownProps,
-  ] = useDropdownMenu();
-  const [
-    openFontFormatUnderlineVariantDropdown,
-    closeFontFormatUnderlineVariantDropdown,
-    fontFormatUnderlineVariantDropdownProps,
-  ] = useDropdownMenu();
-  const [
-    openColumnPinDropdown,
-    closeColumnPinDropdown,
-    columnPinDropdownProps,
-  ] = useDropdownMenu();
-  const [openFontCaseDropdown, closeFontCaseDropdown, fontCaseDropdownProps] =
-    useDropdownMenu();
+export const DataCubeEditorColumnPropertiesPanel = observer(
+  (props: { dataCube: DataCubeState }) => {
+    const { dataCube } = props;
+    const panel = dataCube.editor.columnProperties;
+    const gridConfiguration = dataCube.editor.generalProperties.configuration;
+    const selectedColumn = panel.selectedColumn;
+    const [
+      openColumnsDropdown,
+      closeColumnsDropdown,
+      columnsDropdownProps,
+      columnsDropPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openKindDropdown,
+      closeKindDropdown,
+      kindDropdownProps,
+      kindDropdownPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openAggregationTypeDropdown,
+      closeAggregationTypeDropdown,
+      aggregationTypeDropdownProps,
+      aggregationTypeDropdownPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openNumberScaleDropdown,
+      closeNumberScaleDropdown,
+      numberScaleDropdownProps,
+      numberScaleDropdownPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openColumnPinDropdown,
+      closeColumnPinDropdown,
+      columnPinDropdownProps,
+      columnPinDropdownPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openFontFamilyDropdown,
+      closeFontFamilyDropdown,
+      fontFamilyDropdownProps,
+      fontFamilyDropdownPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openFontSizeDropdown,
+      closeFontSizeDropdown,
+      openFontSizeDropdownProps,
+      openFontSizeDropdownPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openFontFormatUnderlineVariantDropdown,
+      closeFontFormatUnderlineVariantDropdown,
+      fontFormatUnderlineVariantDropdownProps,
+    ] = useDropdownMenu();
+    const [openFontCaseDropdown, closeFontCaseDropdown, fontCaseDropdownProps] =
+      useDropdownMenu();
 
-  return (
-    <div className="h-full w-full select-none p-2">
-      <div className="flex h-6 justify-between">
-        <div className="flex h-full">
-          <div className="relative flex h-6 items-center text-xl font-medium">
-            <DataCubeIcon.TableColumn />
-            <DataCubeIcon.TableColumnOptions__Settings className="absolute bottom-1 right-0 bg-white text-xs" />
+    return (
+      <div className="h-full w-full select-none p-2">
+        <div className="flex h-6 justify-between">
+          <div className="flex h-full">
+            <div className="relative flex h-6 items-center text-xl font-medium">
+              <DataCubeIcon.TableColumn />
+              <DataCubeIcon.TableColumnOptions__Settings className="absolute bottom-1 right-0 bg-white text-xs" />
+            </div>
+            <div className="ml-1 flex h-6 items-center text-xl font-medium">
+              Column Properties
+            </div>
           </div>
-          <div className="ml-1 flex h-6 items-center text-xl font-medium">
-            Column Properties
+          <div className="flex h-full items-center pr-2">
+            <FormCheckbox
+              label="Show advanced settings?"
+              checked={panel.showAdvancedSettings}
+              onChange={() =>
+                panel.setShowAdvancedSettings(!panel.showAdvancedSettings)
+              }
+            />
+            <FormBadge_Advanced />
           </div>
         </div>
-        <div className="flex h-full items-center pr-2">
-          <FormCheckbox
-            label="Show advanced settings?"
-            checked={panel.showAdvancedSettings}
-            onChange={() =>
-              panel.setShowAdvancedSettings(!panel.showAdvancedSettings)
-            }
-          />
-          <FormBadge_Advanced />
-        </div>
-      </div>
-      <div className="flex h-[calc(100%_-_24px)] w-full">
-        <div className="h-full w-full py-2">
-          <div className="flex h-6 w-full items-center">
-            <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-              Choose Column:
-            </div>
-            <FormDropdownMenuTrigger
-              className="w-80"
-              onClick={openColumnsDropdown}
-            >
-              <div className="flex h-full w-full items-center">
-                <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
-                  {selectedColumn?.name ?? '(None)'}
-                </div>
-                {selectedColumn && (
-                  <div className="ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600">
-                    {selectedColumn.dataType}
-                  </div>
-                )}
+        <div className="flex h-[calc(100%_-_24px)] w-full">
+          <div className="h-full w-full py-2">
+            <div className="flex h-6 w-full items-center">
+              <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                Choose Column:
               </div>
-            </FormDropdownMenuTrigger>
-            <FormDropdownMenu className="w-80" {...columnsDropdownProps}>
-              {panel.configurableColumns.map((column) => (
-                <FormDropdownMenuItem
-                  key={column.name}
-                  onClick={() => {
-                    panel.setSelectedColumnName(column.name);
-                    closeColumnsDropdown();
-                  }}
-                >
+              <FormDropdownMenuTrigger
+                className="w-80"
+                onClick={openColumnsDropdown}
+                open={columnsDropPropsOpen}
+              >
+                <div className="flex h-full w-full items-center">
                   <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
-                    {column.name}
-                  </div>
-                  <div className="ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600">
-                    {column.dataType}
+                    {selectedColumn?.name ?? '(None)'}
                   </div>
-                </FormDropdownMenuItem>
-              ))}
-            </FormDropdownMenu>
-            {panel.showAdvancedSettings && selectedColumn && (
-              <>
-                <div className="mx-2 h-[1px] w-4 flex-shrink-0 bg-neutral-400" />
-                <div className="flex h-6 items-center">
-                  <div className="flex h-full flex-shrink-0 items-center text-sm">
-                    Kind:
-                  </div>
-                  <FormDropdownMenuTrigger
-                    className="ml-1 w-20"
-                    onClick={openKindDropdown}
-                    disabled={true}
-                  >
-                    {selectedColumn.kind}
-                  </FormDropdownMenuTrigger>
-                  <FormDropdownMenu className="w-20" {...kindDropdownProps}>
-                    {[
-                      DataCubeColumnKind.DIMENSION,
-                      DataCubeColumnKind.MEASURE,
-                    ].map((kind) => (
-                      <FormDropdownMenuItem
-                        key={kind}
-                        onClick={() => {
-                          selectedColumn.setKind(kind);
-                          closeKindDropdown();
-                        }}
-                      >
-                        {kind}
-                      </FormDropdownMenuItem>
-                    ))}
-                  </FormDropdownMenu>
-                  <FormBadge_Advanced />
-                  <FormBadge_WIP />
-                  <FormDocumentation
-                    className="ml-1"
-                    documentationKey={DocumentationKey.DATA_CUBE_COLUMN_KINDS}
-                  />
-                </div>
-              </>
-            )}
-          </div>
-
-          <div className="-ml-2 mb-2 mt-3 h-[1px] w-[calc(100%_+_16px)] bg-neutral-200" />
-
-          {selectedColumn && (
-            <>
-              <div className="mt-2 flex h-5 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Display Name:
+                  {selectedColumn && (
+                    <div className="ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600">
+                      {selectedColumn.dataType}
+                    </div>
+                  )}
                 </div>
-                <FormTextInput
-                  className="w-80"
-                  value={selectedColumn.displayName ?? ''}
-                  onChange={(event) => {
-                    const value = event.target.value.trim();
-                    selectedColumn.setDisplayName(
-                      value !== '' ? value : undefined,
-                    );
-                  }}
-                />
-              </div>
-
-              {selectedColumn.dataType === DataCubeColumnDataType.NUMBER && (
-                <>
-                  <div className="mt-2 flex h-5 w-full items-center">
-                    <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                      Number Format:
+              </FormDropdownMenuTrigger>
+              <FormDropdownMenu className="w-80" {...columnsDropdownProps}>
+                {panel.configurableColumns.map((column) => (
+                  <FormDropdownMenuItem
+                    key={column.name}
+                    onClick={() => {
+                      panel.setSelectedColumnName(column.name);
+                      closeColumnsDropdown();
+                    }}
+                    autoFocus={column.name === selectedColumn?.name}
+                  >
+                    <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+                      {column.name}
                     </div>
-                    <FormNumberInput
-                      className="w-16 text-sm"
-                      min={0}
-                      step={1}
-                      value={selectedColumn.decimals ?? 0}
-                      setValue={(value) => {
-                        selectedColumn.setDecimals(value);
-                      }}
-                    />
-                    <div className="ml-1 flex-shrink-0 text-sm">
-                      Decimal places
+                    <div className="ml-1.5 mr-0.5 flex h-3.5 w-12 flex-shrink-0 items-center justify-center rounded-sm border border-neutral-300 bg-neutral-100 text-xs font-medium uppercase text-neutral-600">
+                      {column.dataType}
                     </div>
-                    <FormCheckbox
-                      className="ml-3"
-                      label="Display commas"
-                      checked={selectedColumn.displayCommas}
-                      onChange={() =>
-                        selectedColumn.setDisplayCommas(
-                          !selectedColumn.displayCommas,
-                        )
-                      }
-                    />
-                    <FormCheckbox
-                      className="ml-3"
-                      label="Negative number in parens"
-                      checked={selectedColumn.negativeNumberInParens}
-                      onChange={() =>
-                        selectedColumn.setNegativeNumberInParens(
-                          !selectedColumn.negativeNumberInParens,
-                        )
-                      }
-                    />
-                  </div>
-
-                  <div className="mt-2 flex h-5 w-full items-center">
-                    <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                      Number Scale:
-                    </div>
-                    <FormDropdownMenuTrigger
-                      className="w-32"
-                      onClick={openNumberScaleDropdown}
-                    >
-                      {selectedColumn.numberScale ?? '(None)'}
-                    </FormDropdownMenuTrigger>
-                    <FormDropdownMenu
-                      className="w-32"
-                      {...numberScaleDropdownProps}
-                    >
-                      {[
-                        undefined,
-                        DataCubeNumberScale.PERCENT,
-                        DataCubeNumberScale.BASIS_POINT,
-                        DataCubeNumberScale.THOUSANDS,
-                        DataCubeNumberScale.MILLIONS,
-                        DataCubeNumberScale.BILLIONS,
-                        DataCubeNumberScale.TRILLIONS,
-                        DataCubeNumberScale.AUTO,
-                      ].map((scale) => (
-                        <FormDropdownMenuItem
-                          key={scale ?? ''}
-                          onClick={() => {
-                            selectedColumn.setNumberScale(scale);
-                            closeNumberScaleDropdown();
-                          }}
-                        >
-                          {scale ?? '(None)'}
-                        </FormDropdownMenuItem>
-                      ))}
-                    </FormDropdownMenu>
-                  </div>
-
-                  <div className="mt-2 flex h-5 w-full items-center">
-                    <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                      Aggregation Type:
+                  </FormDropdownMenuItem>
+                ))}
+              </FormDropdownMenu>
+              {panel.showAdvancedSettings && selectedColumn && (
+                <>
+                  <div className="mx-2 h-[1px] w-4 flex-shrink-0 bg-neutral-400" />
+                  <div className="flex h-6 items-center">
+                    <div className="flex h-full flex-shrink-0 items-center text-sm">
+                      Kind:
                     </div>
                     <FormDropdownMenuTrigger
-                      className="w-32"
-                      onClick={openAggregationTypeDropdown}
+                      className="ml-1 w-20"
+                      onClick={openKindDropdown}
+                      open={kindDropdownPropsOpen}
                       disabled={true}
                     >
-                      {selectedColumn.aggregateFunction ?? '(None)'}
+                      {selectedColumn.kind}
                     </FormDropdownMenuTrigger>
-                    <FormDropdownMenu
-                      className="w-32"
-                      {...aggregationTypeDropdownProps}
-                    >
+                    <FormDropdownMenu className="w-20" {...kindDropdownProps}>
                       {[
-                        DataCubeAggregateOperation.SUM,
-                        DataCubeAggregateOperation.AVERAGE,
-                        DataCubeAggregateOperation.COUNT,
-                        DataCubeAggregateOperation.MIN,
-                        DataCubeAggregateOperation.MAX,
-                      ].map((fn) => (
+                        DataCubeColumnKind.DIMENSION,
+                        DataCubeColumnKind.MEASURE,
+                      ].map((kind) => (
                         <FormDropdownMenuItem
-                          key={fn}
+                          key={kind}
                           onClick={() => {
-                            selectedColumn.setAggregateFunction(fn);
-                            closeAggregationTypeDropdown();
+                            selectedColumn.setKind(kind);
+                            closeKindDropdown();
                           }}
+                          autoFocus={kind === selectedColumn.kind}
                         >
-                          {fn}
+                          {kind}
                         </FormDropdownMenuItem>
                       ))}
                     </FormDropdownMenu>
+                    <FormBadge_Advanced />
                     <FormBadge_WIP />
-                  </div>
-
-                  <div className="mt-2 flex h-5 w-full items-center">
-                    <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                      Exclude from HPivot?
-                    </div>
-                    <FormCheckbox
-                      checked={selectedColumn.excludedFromHorizontalPivot}
-                      onChange={() =>
-                        selectedColumn.setExcludedFromHorizontalPivot(
-                          !selectedColumn.excludedFromHorizontalPivot,
-                        )
-                      }
-                      disabled={true}
+                    <FormDocumentation
+                      className="ml-1"
+                      documentationKey={DocumentationKey.DATA_CUBE_COLUMN_KINDS}
                     />
-                    <FormBadge_WIP />
                   </div>
                 </>
               )}
+            </div>
 
-              {selectedColumn.dataType === DataCubeColumnDataType.TEXT && (
-                <>
-                  <div className="mt-2 flex h-5 w-full items-center">
-                    <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                      Dislay as Link?
-                      <FormDocumentation
-                        className="ml-1"
-                        documentationKey={
-                          DocumentationKey.DATA_CUBE_COLUMN_DISPLAY_AS_LINK
+            <div className="-ml-2 mb-2 mt-3 h-[1px] w-[calc(100%_+_16px)] bg-neutral-200" />
+
+            {selectedColumn && (
+              <>
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                    Display Name:
+                  </div>
+                  <FormTextInput
+                    className="w-80"
+                    value={selectedColumn.displayName ?? ''}
+                    onChange={(event) => {
+                      const value = event.target.value.trim();
+                      selectedColumn.setDisplayName(
+                        value !== '' ? value : undefined,
+                      );
+                    }}
+                  />
+                </div>
+
+                {selectedColumn.dataType === DataCubeColumnDataType.NUMBER && (
+                  <>
+                    <div className="mt-2 flex h-5 w-full items-center">
+                      <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                        Number Format:
+                      </div>
+                      <FormNumberInput
+                        className="w-16 text-sm"
+                        min={0}
+                        step={1}
+                        value={selectedColumn.decimals ?? 0}
+                        setValue={(value) => {
+                          selectedColumn.setDecimals(value);
+                        }}
+                      />
+                      <div className="ml-1 flex-shrink-0 text-sm">
+                        Decimal places
+                      </div>
+                      <FormCheckbox
+                        className="ml-3"
+                        label="Display commas"
+                        checked={selectedColumn.displayCommas}
+                        onChange={() =>
+                          selectedColumn.setDisplayCommas(
+                            !selectedColumn.displayCommas,
+                          )
+                        }
+                      />
+                      <FormCheckbox
+                        className="ml-3"
+                        label="Negative number in parens"
+                        checked={selectedColumn.negativeNumberInParens}
+                        onChange={() =>
+                          selectedColumn.setNegativeNumberInParens(
+                            !selectedColumn.negativeNumberInParens,
+                          )
                         }
                       />
                     </div>
-                    <FormCheckbox
-                      checked={selectedColumn.displayAsLink}
-                      onChange={() =>
-                        selectedColumn.setDisplayAsLink(
-                          !selectedColumn.displayAsLink,
-                        )
-                      }
-                    />
-                    <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
-                    <div className="ml-2 mr-1.5 flex h-full flex-shrink-0 items-center text-sm">
-                      Use Parameter in Link as Label:
+
+                    <div className="mt-2 flex h-5 w-full items-center">
+                      <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                        Number Scale:
+                      </div>
+                      <FormDropdownMenuTrigger
+                        className="w-32"
+                        onClick={openNumberScaleDropdown}
+                        open={numberScaleDropdownPropsOpen}
+                      >
+                        {selectedColumn.numberScale ?? '(None)'}
+                      </FormDropdownMenuTrigger>
+                      <FormDropdownMenu
+                        className="w-32"
+                        {...numberScaleDropdownProps}
+                      >
+                        {[
+                          undefined,
+                          DataCubeNumberScale.PERCENT,
+                          DataCubeNumberScale.BASIS_POINT,
+                          DataCubeNumberScale.THOUSANDS,
+                          DataCubeNumberScale.MILLIONS,
+                          DataCubeNumberScale.BILLIONS,
+                          DataCubeNumberScale.TRILLIONS,
+                          DataCubeNumberScale.AUTO,
+                        ].map((scale) => (
+                          <FormDropdownMenuItem
+                            key={scale ?? ''}
+                            onClick={() => {
+                              selectedColumn.setNumberScale(scale);
+                              closeNumberScaleDropdown();
+                            }}
+                            autoFocus={scale === selectedColumn.numberScale}
+                          >
+                            {scale ?? '(None)'}
+                          </FormDropdownMenuItem>
+                        ))}
+                      </FormDropdownMenu>
                     </div>
-                    <FormTextInput
-                      className="w-48"
-                      placeholder={DEFAULT_URL_LABEL_QUERY_PARAM}
-                      value={selectedColumn.linkLabelParameter ?? ''}
-                      onChange={(event) => {
-                        const value = event.target.value.trim();
-                        selectedColumn.setLinkLabelParameter(
-                          value !== '' ? value : undefined,
-                        );
-                      }}
+
+                    <div className="mt-2 flex h-5 w-full items-center">
+                      <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                        Aggregation Type:
+                      </div>
+                      <FormDropdownMenuTrigger
+                        className="w-32"
+                        onClick={openAggregationTypeDropdown}
+                        disabled={true}
+                        open={aggregationTypeDropdownPropsOpen}
+                      >
+                        {selectedColumn.aggregateFunction ?? '(None)'}
+                      </FormDropdownMenuTrigger>
+                      <FormDropdownMenu
+                        className="w-32"
+                        {...aggregationTypeDropdownProps}
+                      >
+                        {[
+                          DataCubeAggregateOperator.SUM,
+                          DataCubeAggregateOperator.AVERAGE,
+                          DataCubeAggregateOperator.COUNT,
+                          DataCubeAggregateOperator.MIN,
+                          DataCubeAggregateOperator.MAX,
+                        ].map((op) => (
+                          <FormDropdownMenuItem
+                            key={op}
+                            onClick={() => {
+                              selectedColumn.setAggregateFunction(op);
+                              closeAggregationTypeDropdown();
+                            }}
+                            autoFocus={op === selectedColumn.aggregateFunction}
+                          >
+                            {op}
+                          </FormDropdownMenuItem>
+                        ))}
+                      </FormDropdownMenu>
+                      <FormBadge_WIP />
+                    </div>
+
+                    <div className="mt-2 flex h-5 w-full items-center">
+                      <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                        Exclude from HPivot?
+                      </div>
+                      <FormCheckbox
+                        checked={selectedColumn.excludedFromHorizontalPivot}
+                        onChange={() =>
+                          selectedColumn.setExcludedFromHorizontalPivot(
+                            !selectedColumn.excludedFromHorizontalPivot,
+                          )
+                        }
+                        disabled={true}
+                      />
+                      <FormBadge_WIP />
+                    </div>
+                  </>
+                )}
+
+                {selectedColumn.dataType === DataCubeColumnDataType.TEXT && (
+                  <>
+                    <div className="mt-2 flex h-5 w-full items-center">
+                      <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                        Dislay as Link?
+                        <FormDocumentation
+                          className="ml-1"
+                          documentationKey={
+                            DocumentationKey.DATA_CUBE_COLUMN_DISPLAY_AS_LINK
+                          }
+                        />
+                      </div>
+                      <FormCheckbox
+                        checked={selectedColumn.displayAsLink}
+                        onChange={() =>
+                          selectedColumn.setDisplayAsLink(
+                            !selectedColumn.displayAsLink,
+                          )
+                        }
+                      />
+                      <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
+                      <div className="ml-2 mr-1.5 flex h-full flex-shrink-0 items-center text-sm">
+                        Use Parameter in Link as Label:
+                      </div>
+                      <FormTextInput
+                        className="w-48"
+                        placeholder={DEFAULT_URL_LABEL_QUERY_PARAM}
+                        value={selectedColumn.linkLabelParameter ?? ''}
+                        onChange={(event) => {
+                          const value = event.target.value.trim();
+                          selectedColumn.setLinkLabelParameter(
+                            value !== '' ? value : undefined,
+                          );
+                        }}
+                      />
+                    </div>
+                  </>
+                )}
+
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                    {`Missing Value Format:`}
+                    <FormDocumentation
+                      className="ml-1"
+                      documentationKey={
+                        DocumentationKey.DATA_CUBE_COLUMN_MISSING_VALUE_FORMAT
+                      }
                     />
                   </div>
-                </>
-              )}
-
-              <div className="mt-2 flex h-5 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  {`Missing Value Format:`}
-                  <FormDocumentation
-                    className="ml-1"
-                    documentationKey={
-                      DocumentationKey.DATA_CUBE_COLUMN_MISSING_VALUE_FORMAT
-                    }
+                  <FormTextInput
+                    className="w-16"
+                    value={selectedColumn.missingValueDisplayText ?? ''}
+                    onChange={(event) => {
+                      const value = event.target.value.trim();
+                      selectedColumn.setMissingValueDisplayText(
+                        value !== '' ? value : undefined,
+                      );
+                    }}
+                    placeholder="(empty)"
                   />
                 </div>
-                <FormTextInput
-                  className="w-16"
-                  value={selectedColumn.missingValueDisplayText ?? ''}
-                  onChange={(event) => {
-                    const value = event.target.value.trim();
-                    selectedColumn.setMissingValueDisplayText(
-                      value !== '' ? value : undefined,
-                    );
-                  }}
-                  placeholder="(empty)"
-                />
-              </div>
 
-              <div className="mt-2 flex h-5 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Visibility:
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                    Visibility:
+                  </div>
+                  <FormCheckbox
+                    label="Blur content"
+                    checked={selectedColumn.blur}
+                    onChange={() =>
+                      selectedColumn.setBlur(!selectedColumn.blur)
+                    }
+                    disabled={selectedColumn.hideFromView}
+                  />
+                  <FormCheckbox
+                    className="ml-3"
+                    label="Hide from view"
+                    checked={selectedColumn.hideFromView}
+                    onChange={() =>
+                      selectedColumn.setHideFromView(
+                        !selectedColumn.hideFromView,
+                      )
+                    }
+                  />
                 </div>
-                <FormCheckbox
-                  label="Blur content"
-                  checked={selectedColumn.blur}
-                  onChange={() => selectedColumn.setBlur(!selectedColumn.blur)}
-                  disabled={selectedColumn.hideFromView}
-                />
-                <FormCheckbox
-                  className="ml-3"
-                  label="Hide from view"
-                  checked={selectedColumn.hideFromView}
-                  onChange={() =>
-                    selectedColumn.setHideFromView(!selectedColumn.hideFromView)
-                  }
-                />
-              </div>
 
-              <div className="mt-2 flex h-5 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Pin:
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                    Pin:
+                  </div>
+                  <FormDropdownMenuTrigger
+                    className="w-16"
+                    onClick={openColumnPinDropdown}
+                    open={columnPinDropdownPropsOpen}
+                  >
+                    {selectedColumn.pinned ?? '(None)'}
+                  </FormDropdownMenuTrigger>
+                  <FormDropdownMenu
+                    className="w-16"
+                    {...columnPinDropdownProps}
+                  >
+                    {[
+                      undefined,
+                      DataCubeColumnPinPlacement.LEFT,
+                      DataCubeColumnPinPlacement.RIGHT,
+                    ].map((placement) => (
+                      <FormDropdownMenuItem
+                        key={placement ?? ''}
+                        onClick={() => {
+                          selectedColumn.setPinned(placement);
+                          closeColumnPinDropdown();
+                        }}
+                        autoFocus={placement === selectedColumn.pinned}
+                      >
+                        {placement ?? '(None)'}
+                      </FormDropdownMenuItem>
+                    ))}
+                  </FormDropdownMenu>
                 </div>
-                <FormDropdownMenuTrigger
-                  className="w-16"
-                  onClick={openColumnPinDropdown}
-                >
-                  {selectedColumn.pinned ?? '(None)'}
-                </FormDropdownMenuTrigger>
-                <FormDropdownMenu className="w-16" {...columnPinDropdownProps}>
-                  {[
-                    undefined,
-                    DataCubeColumnPinPlacement.LEFT,
-                    DataCubeColumnPinPlacement.RIGHT,
-                  ].map((placement) => (
-                    <FormDropdownMenuItem
-                      key={placement ?? ''}
-                      onClick={() => {
-                        selectedColumn.setPinned(placement);
-                        closeColumnPinDropdown();
-                      }}
-                    >
-                      {placement ?? '(None)'}
-                    </FormDropdownMenuItem>
-                  ))}
-                </FormDropdownMenu>
-              </div>
 
-              <div className="mt-1.5 flex h-6 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Width:
-                </div>
-                <FormCheckbox
-                  label="(Any)"
-                  checked={
-                    selectedColumn.fixedWidth === undefined &&
-                    selectedColumn.minWidth === undefined &&
-                    selectedColumn.maxWidth === undefined
-                  }
-                  onChange={() => {
-                    if (
+                <div className="mt-1.5 flex h-6 w-full items-center">
+                  <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                    Width:
+                  </div>
+                  <FormCheckbox
+                    label="(Any)"
+                    checked={
                       selectedColumn.fixedWidth === undefined &&
                       selectedColumn.minWidth === undefined &&
                       selectedColumn.maxWidth === undefined
-                    ) {
-                      selectedColumn.setFixedWidth(DEFAULT_COLUMN_WIDTH);
-                      selectedColumn.setMinWidth(undefined);
-                      selectedColumn.setMaxWidth(undefined);
-                    } else {
-                      selectedColumn.setFixedWidth(undefined);
-                      selectedColumn.setMinWidth(undefined);
-                      selectedColumn.setMaxWidth(undefined);
                     }
-                  }}
-                />
-
-                <FormCheckbox
-                  className="ml-3"
-                  label="Fixed"
-                  checked={selectedColumn.fixedWidth !== undefined}
-                  onChange={() => {
-                    selectedColumn.setFixedWidth(
-                      selectedColumn.fixedWidth !== undefined
-                        ? undefined
-                        : DEFAULT_COLUMN_WIDTH,
-                    );
-                    selectedColumn.setMinWidth(undefined);
-                    selectedColumn.setMaxWidth(undefined);
-                  }}
-                />
-                <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
-                <FormNumberInput
-                  className="ml-1 w-16 text-sm"
-                  min={0}
-                  step={50}
-                  defaultValue={undefined}
-                  isValid={(value) => value !== undefined && value > 0}
-                  value={selectedColumn.fixedWidth}
-                  setValue={(value) => {
-                    selectedColumn.setFixedWidth(value);
-                  }}
-                  disabled={
-                    selectedColumn.minWidth !== undefined ||
-                    selectedColumn.maxWidth !== undefined
-                  }
-                />
+                    onChange={() => {
+                      if (
+                        selectedColumn.fixedWidth === undefined &&
+                        selectedColumn.minWidth === undefined &&
+                        selectedColumn.maxWidth === undefined
+                      ) {
+                        selectedColumn.setFixedWidth(DEFAULT_COLUMN_WIDTH);
+                        selectedColumn.setMinWidth(undefined);
+                        selectedColumn.setMaxWidth(undefined);
+                      } else {
+                        selectedColumn.setFixedWidth(undefined);
+                        selectedColumn.setMinWidth(undefined);
+                        selectedColumn.setMaxWidth(undefined);
+                      }
+                    }}
+                  />
 
-                <FormCheckbox
-                  className="ml-3"
-                  label="In range"
-                  checked={
-                    selectedColumn.minWidth !== undefined ||
-                    selectedColumn.maxWidth !== undefined
-                  }
-                  onChange={() => {
-                    if (
-                      selectedColumn.minWidth === undefined &&
-                      selectedColumn.maxWidth === undefined
-                    ) {
-                      selectedColumn.setMinWidth(DEFAULT_COLUMN_MIN_WIDTH);
-                      selectedColumn.setMaxWidth(DEFAULT_COLUMN_MAX_WIDTH);
-                      selectedColumn.setFixedWidth(undefined);
-                    } else {
+                  <FormCheckbox
+                    className="ml-3"
+                    label="Fixed"
+                    checked={selectedColumn.fixedWidth !== undefined}
+                    onChange={() => {
+                      selectedColumn.setFixedWidth(
+                        selectedColumn.fixedWidth !== undefined
+                          ? undefined
+                          : DEFAULT_COLUMN_WIDTH,
+                      );
                       selectedColumn.setMinWidth(undefined);
                       selectedColumn.setMaxWidth(undefined);
-                      selectedColumn.setFixedWidth(undefined);
+                    }}
+                  />
+                  <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
+                  <FormNumberInput
+                    className="ml-1 w-16 text-sm"
+                    min={0}
+                    step={50}
+                    defaultValue={undefined}
+                    isValid={(value) => value !== undefined && value > 0}
+                    value={selectedColumn.fixedWidth}
+                    setValue={(value) => {
+                      selectedColumn.setFixedWidth(value);
+                    }}
+                    disabled={
+                      selectedColumn.minWidth !== undefined ||
+                      selectedColumn.maxWidth !== undefined
                     }
-                  }}
-                />
-                <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
-                <FormNumberInput
-                  className="ml-1 w-16 text-sm"
-                  min={0}
-                  step={50}
-                  defaultValue={undefined}
-                  isValid={(value) => value !== undefined && value > 0}
-                  value={selectedColumn.minWidth}
-                  setValue={(value) => {
-                    selectedColumn.setMinWidth(value);
-                  }}
-                  disabled={selectedColumn.fixedWidth !== undefined}
-                />
-                <div className="ml-1 h-[1px] w-1 flex-shrink-0 bg-neutral-400" />
-                <FormNumberInput
-                  className="ml-1 w-16 text-sm"
-                  min={selectedColumn.minWidth ?? 0}
-                  step={50}
-                  defaultValue={undefined}
-                  isValid={(value) =>
-                    value !== undefined &&
-                    value >= (selectedColumn.minWidth ?? 0)
-                  }
-                  value={selectedColumn.maxWidth}
-                  setValue={(value) => {
-                    selectedColumn.setMaxWidth(value);
-                  }}
-                  disabled={selectedColumn.fixedWidth !== undefined}
-                />
-              </div>
-
-              <div className="my-2 h-[1px] w-full bg-neutral-200" />
-
-              <div className="mt-2 flex h-5 w-full items-center">
-                <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
-                  Font:
-                </div>
-                <FormDropdownMenuTrigger
-                  className="w-28"
-                  onClick={openFontFamilyDropdown}
-                >
-                  {selectedColumn.fontFamily ?? gridConfiguration.fontFamily}
-                </FormDropdownMenuTrigger>
-                <FormDropdownMenu className="w-28" {...fontFamilyDropdownProps}>
-                  {[
-                    DataCubeFont.ARIAL,
-                    DataCubeFont.ROBOTO,
-                    DataCubeFont.ROBOTO_CONDENSED,
-                  ].map((font) => (
-                    <FormDropdownMenuItem
-                      key={font}
-                      onClick={() => {
-                        selectedColumn.setFontFamily(font);
-                        closeFontFamilyDropdown();
-                      }}
-                    >
-                      {font}
-                    </FormDropdownMenuItem>
-                  ))}
-                  <FormDropdownMenuItemSeparator />
-                  {[
-                    DataCubeFont.GEORGIA,
-                    DataCubeFont.ROBOTO_SERIF,
-                    DataCubeFont.TIMES_NEW_ROMAN,
-                  ].map((font) => (
-                    <FormDropdownMenuItem
-                      key={font}
-                      onClick={() => {
-                        selectedColumn.setFontFamily(font);
-                        closeFontFamilyDropdown();
-                      }}
-                    >
-                      {font}
-                    </FormDropdownMenuItem>
-                  ))}
-                  <FormDropdownMenuItemSeparator />
-                  {[
-                    DataCubeFont.JERBRAINS_MONO,
-                    DataCubeFont.ROBOTO_MONO,
-                    DataCubeFont.UBUNTU_MONO,
-                  ].map((font) => (
-                    <FormDropdownMenuItem
-                      key={font}
-                      onClick={() => {
-                        selectedColumn.setFontFamily(font);
-                        closeFontFamilyDropdown();
-                      }}
-                    >
-                      {font}
-                    </FormDropdownMenuItem>
-                  ))}
-                </FormDropdownMenu>
-
-                <FormDropdownMenuTrigger
-                  className="ml-1 w-10"
-                  onClick={openFontSizeDropdown}
-                >
-                  {selectedColumn.fontSize ?? gridConfiguration.fontSize}
-                </FormDropdownMenuTrigger>
-                <FormDropdownMenu
-                  className="w-10"
-                  {...openFontSizeDropdownProps}
-                >
-                  {[
-                    4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26,
-                    28, 32, 36, 48, 72,
-                  ].map((size) => (
-                    <FormDropdownMenuItem
-                      key={size}
-                      onClick={() => {
-                        selectedColumn.setFontSize(size);
-                        closeFontSizeDropdown();
-                      }}
-                    >
-                      {size}
-                    </FormDropdownMenuItem>
-                  ))}
-                </FormDropdownMenu>
+                  />
 
-                <div className="relative ml-2 flex h-5">
-                  <button
-                    title="Bold"
-                    className={cn(
-                      'relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          selectedColumn.fontBold ?? gridConfiguration.fontBold,
-                      },
-                    )}
-                    onClick={() =>
-                      selectedColumn.setFontBold(
-                        !(
-                          selectedColumn.fontBold ?? gridConfiguration.fontBold
-                        ),
-                      )
+                  <FormCheckbox
+                    className="ml-3"
+                    label="In range"
+                    checked={
+                      selectedColumn.minWidth !== undefined ||
+                      selectedColumn.maxWidth !== undefined
                     }
-                  >
-                    <DataCubeIcon.FontBold />
-                  </button>
-                  <button
-                    title="Italic"
-                    className={cn(
-                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          selectedColumn.fontItalic ??
-                          gridConfiguration.fontItalic,
-                      },
-                    )}
-                    onClick={() =>
-                      selectedColumn.setFontItalic(
-                        !(
-                          selectedColumn.fontItalic ??
-                          gridConfiguration.fontItalic
-                        ),
-                      )
-                    }
-                  >
-                    <DataCubeIcon.FontItalic />
-                  </button>
-                  <button
-                    title={`Underline${(selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline) ? ` (${selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline})` : ''}`}
-                    className={cn(
-                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          (selectedColumn.fontUnderline ??
-                            gridConfiguration.fontUnderline) !== undefined,
-                      },
-                    )}
-                    onClick={() => {
+                    onChange={() => {
                       if (
-                        (selectedColumn.fontUnderline ??
-                          gridConfiguration.fontUnderline) === undefined
+                        selectedColumn.minWidth === undefined &&
+                        selectedColumn.maxWidth === undefined
                       ) {
-                        selectedColumn.setFontUnderline(
-                          DataCubeFontFormatUnderlineVariant.SOLID,
-                        );
-                        selectedColumn.setFontStrikethrough(false);
+                        selectedColumn.setMinWidth(DEFAULT_COLUMN_MIN_WIDTH);
+                        selectedColumn.setMaxWidth(DEFAULT_COLUMN_MAX_WIDTH);
+                        selectedColumn.setFixedWidth(undefined);
                       } else {
-                        selectedColumn.setFontUnderline(undefined);
+                        selectedColumn.setMinWidth(undefined);
+                        selectedColumn.setMaxWidth(undefined);
+                        selectedColumn.setFixedWidth(undefined);
                       }
                     }}
+                  />
+                  <div className="ml-1 h-[1px] w-2 flex-shrink-0 bg-neutral-400" />
+                  <FormNumberInput
+                    className="ml-1 w-16 text-sm"
+                    min={0}
+                    step={50}
+                    defaultValue={undefined}
+                    isValid={(value) => value !== undefined && value > 0}
+                    value={selectedColumn.minWidth}
+                    setValue={(value) => {
+                      selectedColumn.setMinWidth(value);
+                    }}
+                    disabled={selectedColumn.fixedWidth !== undefined}
+                  />
+                  <div className="ml-1 h-[1px] w-1 flex-shrink-0 bg-neutral-400" />
+                  <FormNumberInput
+                    className="ml-1 w-16 text-sm"
+                    min={selectedColumn.minWidth ?? 0}
+                    step={50}
+                    defaultValue={undefined}
+                    isValid={(value) =>
+                      value !== undefined &&
+                      value >= (selectedColumn.minWidth ?? 0)
+                    }
+                    value={selectedColumn.maxWidth}
+                    setValue={(value) => {
+                      selectedColumn.setMaxWidth(value);
+                    }}
+                    disabled={selectedColumn.fixedWidth !== undefined}
+                  />
+                </div>
+
+                <div className="my-2 h-[1px] w-full bg-neutral-200" />
+
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-32 flex-shrink-0 items-center text-sm">
+                    Font:
+                  </div>
+                  <FormDropdownMenuTrigger
+                    className="w-28"
+                    onClick={openFontFamilyDropdown}
+                    open={fontFamilyDropdownPropsOpen}
                   >
-                    <DataCubeIcon.FontUnderline />
-                  </button>
-                  <button
-                    className="text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus-visible:z-[1]"
-                    onClick={openFontFormatUnderlineVariantDropdown}
-                  >
-                    <div
-                      className={cn('h-4 w-[0.5px] bg-neutral-200', {
-                        'opacity-0':
-                          (selectedColumn.fontUnderline ??
-                            gridConfiguration.fontUnderline) !== undefined,
-                      })}
-                    />
-                    <DataCubeIcon.CaretDown />
-                  </button>
+                    {selectedColumn.fontFamily ?? gridConfiguration.fontFamily}
+                  </FormDropdownMenuTrigger>
                   <FormDropdownMenu
-                    className="w-14"
-                    {...fontFormatUnderlineVariantDropdownProps}
+                    className="w-28"
+                    {...fontFamilyDropdownProps}
                   >
                     {[
-                      DataCubeFontFormatUnderlineVariant.SOLID,
-                      DataCubeFontFormatUnderlineVariant.DASHED,
-                      DataCubeFontFormatUnderlineVariant.DOTTED,
-                      DataCubeFontFormatUnderlineVariant.DOUBLE,
-                      DataCubeFontFormatUnderlineVariant.WAVY,
-                    ].map((variant) => (
+                      DataCubeFont.ARIAL,
+                      DataCubeFont.ROBOTO,
+                      DataCubeFont.ROBOTO_CONDENSED,
+                    ].map((font) => (
                       <FormDropdownMenuItem
-                        className="relative"
-                        key={variant}
+                        key={font}
                         onClick={() => {
-                          selectedColumn.setFontUnderline(variant);
-                          selectedColumn.setFontStrikethrough(false);
-                          closeFontFormatUnderlineVariantDropdown();
+                          selectedColumn.setFontFamily(font);
+                          closeFontFamilyDropdown();
                         }}
+                        autoFocus={
+                          font ===
+                          (selectedColumn.fontFamily ??
+                            gridConfiguration.fontFamily)
+                        }
                       >
-                        <div
-                          className={cn(
-                            '!hover:underline absolute top-0 !underline',
-                            {
-                              '!hover:decoration-solid !decoration-solid':
-                                variant ===
-                                DataCubeFontFormatUnderlineVariant.SOLID,
-                              '!hover:decoration-dashed !decoration-dashed':
-                                variant ===
-                                DataCubeFontFormatUnderlineVariant.DASHED,
-                              '!hover:decoration-dotted !decoration-dotted':
-                                variant ===
-                                DataCubeFontFormatUnderlineVariant.DOTTED,
-                              '!hover:decoration-double !decoration-double':
-                                variant ===
-                                DataCubeFontFormatUnderlineVariant.DOUBLE,
-                              '!hover:decoration-wavy !decoration-wavy':
-                                variant ===
-                                DataCubeFontFormatUnderlineVariant.WAVY,
-                              'text-sky-600':
-                                variant ===
-                                (selectedColumn.fontUnderline ??
-                                  gridConfiguration.fontUnderline),
-                            },
-                          )}
-                        >
-                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        </div>
+                        {font}
                       </FormDropdownMenuItem>
                     ))}
-                  </FormDropdownMenu>
-                  <button
-                    title="Strikethrough"
-                    className={cn(
-                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          selectedColumn.fontStrikethrough ??
-                          gridConfiguration.fontStrikethrough,
-                      },
-                    )}
-                    onClick={() => {
-                      if (
-                        selectedColumn.fontStrikethrough ??
-                        gridConfiguration.fontStrikethrough
-                      ) {
-                        selectedColumn.setFontStrikethrough(false);
-                      } else {
-                        selectedColumn.setFontStrikethrough(true);
-                        selectedColumn.setFontUnderline(undefined);
-                      }
-                    }}
-                  >
-                    <DataCubeIcon.FontStrikethrough />
-                  </button>
-                  <button
-                    title={`Case${(selectedColumn.fontCase ?? gridConfiguration.fontCase) ? ` (${selectedColumn.fontCase ?? gridConfiguration.fontCase})` : ''}`}
-                    className={cn(
-                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          (selectedColumn.fontCase ??
-                            gridConfiguration.fontCase) !== undefined,
-                      },
-                    )}
-                    onClick={() => {
-                      if (
-                        (selectedColumn.fontCase ??
-                          gridConfiguration.fontCase) === undefined
-                      ) {
-                        selectedColumn.setFontCase(DataCubeFontCase.UPPERCASE);
-                      } else {
-                        selectedColumn.setFontCase(undefined);
-                      }
-                    }}
-                  >
-                    <DataCubeIcon.FontCase className="stroke-[0.5px]" />
-                  </button>
-                  <button
-                    className="text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center rounded-br-sm rounded-tr-sm border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus-visible:z-[1]"
-                    onClick={openFontCaseDropdown}
-                  >
-                    <div
-                      className={cn('h-4 w-[0.5px] bg-neutral-200', {
-                        'opacity-0':
-                          (selectedColumn.fontCase ??
-                            gridConfiguration.fontCase) !== undefined,
-                      })}
-                    />
-                    <DataCubeIcon.CaretDown />
-                  </button>
-                  <FormDropdownMenu className="w-20" {...fontCaseDropdownProps}>
+                    <FormDropdownMenuItemSeparator />
                     {[
-                      DataCubeFontCase.LOWERCASE,
-                      DataCubeFontCase.UPPERCASE,
-                      DataCubeFontCase.CAPITALIZE,
-                    ].map((fontCase) => (
+                      DataCubeFont.GEORGIA,
+                      DataCubeFont.ROBOTO_SERIF,
+                      DataCubeFont.TIMES_NEW_ROMAN,
+                    ].map((font) => (
                       <FormDropdownMenuItem
-                        className="relative"
-                        key={fontCase}
+                        key={font}
                         onClick={() => {
-                          selectedColumn.setFontCase(fontCase);
-                          closeFontCaseDropdown();
+                          selectedColumn.setFontFamily(font);
+                          closeFontFamilyDropdown();
                         }}
+                        autoFocus={
+                          font ===
+                          (selectedColumn.fontFamily ??
+                            gridConfiguration.fontFamily)
+                        }
                       >
-                        <div
-                          className={cn({
-                            lowercase: fontCase === DataCubeFontCase.LOWERCASE,
-                            uppercase: fontCase === DataCubeFontCase.UPPERCASE,
-                            capitalize:
-                              fontCase === DataCubeFontCase.CAPITALIZE,
-                            'text-sky-600':
-                              fontCase ===
-                              (selectedColumn.fontCase ??
-                                gridConfiguration.fontCase),
-                          })}
-                        >
-                          {fontCase}
-                        </div>
+                        {font}
+                      </FormDropdownMenuItem>
+                    ))}
+                    <FormDropdownMenuItemSeparator />
+                    {[
+                      DataCubeFont.JERBRAINS_MONO,
+                      DataCubeFont.ROBOTO_MONO,
+                      DataCubeFont.UBUNTU_MONO,
+                    ].map((font) => (
+                      <FormDropdownMenuItem
+                        key={font}
+                        onClick={() => {
+                          selectedColumn.setFontFamily(font);
+                          closeFontFamilyDropdown();
+                        }}
+                        autoFocus={
+                          font ===
+                          (selectedColumn.fontFamily ??
+                            gridConfiguration.fontFamily)
+                        }
+                      >
+                        {font}
                       </FormDropdownMenuItem>
                     ))}
                   </FormDropdownMenu>
-                </div>
 
-                <div className="relative ml-2 flex h-5">
-                  <button
-                    title="Align Left"
-                    className={cn(
-                      'relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          (selectedColumn.textAlign ??
-                            gridConfiguration.textAlign) ===
-                          DataCubeFontTextAlignment.LEFT,
-                      },
-                    )}
-                    onClick={() =>
-                      selectedColumn.setTextAlign(
-                        DataCubeFontTextAlignment.LEFT,
-                      )
-                    }
-                  >
-                    <DataCubeIcon.TextAlignLeft />
-                  </button>
-                  <button
-                    title="Align Center"
-                    className={cn(
-                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          (selectedColumn.textAlign ??
-                            gridConfiguration.textAlign) ===
-                          DataCubeFontTextAlignment.CENTER,
-                      },
-                    )}
-                    onClick={() =>
-                      selectedColumn.setTextAlign(
-                        DataCubeFontTextAlignment.CENTER,
-                      )
-                    }
+                  <FormDropdownMenuTrigger
+                    className="ml-1 w-10"
+                    onClick={openFontSizeDropdown}
+                    open={openFontSizeDropdownPropsOpen}
                   >
-                    <DataCubeIcon.TextAlignCenter />
-                  </button>
-                  <button
-                    title="Align Right"
-                    className={cn(
-                      'relative -ml-[1px] flex h-5 w-5 items-center justify-center rounded-br-sm rounded-tr-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus-visible:z-[1]',
-                      {
-                        'bg-neutral-200':
-                          (selectedColumn.textAlign ??
-                            gridConfiguration.textAlign) ===
-                          DataCubeFontTextAlignment.RIGHT,
-                      },
-                    )}
-                    onClick={() =>
-                      selectedColumn.setTextAlign(
-                        DataCubeFontTextAlignment.RIGHT,
-                      )
-                    }
+                    {selectedColumn.fontSize ?? gridConfiguration.fontSize}
+                  </FormDropdownMenuTrigger>
+                  <FormDropdownMenu
+                    className="w-10"
+                    {...openFontSizeDropdownProps}
                   >
-                    <DataCubeIcon.TextAlignRight />
-                  </button>
-                </div>
-              </div>
-
-              <div className="mt-2 flex w-full">
-                <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm">
-                  Colors:
-                </div>
-                <div className="h-18">
-                  <div className="flex h-6">
-                    <div className="w-16 flex-shrink-0" />
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
-                      Normal
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
-                      Negative
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
-                      Zero
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
-                      Error
-                    </div>
-                  </div>
-                  <div className="flex h-6">
-                    <div className="flex h-full w-16 flex-shrink-0 items-center text-sm">
-                      Foreground:
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.normalForegroundColor ??
-                          gridConfiguration.normalForegroundColor
-                        }
-                        defaultColor={gridConfiguration.normalForegroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setNormalForegroundColor(value)
-                        }
-                      />
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.negativeForegroundColor ??
-                          gridConfiguration.negativeForegroundColor
-                        }
-                        defaultColor={gridConfiguration.negativeForegroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setNegativeForegroundColor(value)
-                        }
-                      />
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.zeroForegroundColor ??
-                          gridConfiguration.zeroForegroundColor
+                    {[
+                      4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26,
+                      28, 32, 36, 48, 72,
+                    ].map((size) => (
+                      <FormDropdownMenuItem
+                        key={size}
+                        onClick={() => {
+                          selectedColumn.setFontSize(size);
+                          closeFontSizeDropdown();
+                        }}
+                        autoFocus={
+                          size ===
+                          (selectedColumn.fontSize ??
+                            gridConfiguration.fontSize)
                         }
-                        defaultColor={gridConfiguration.zeroForegroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setZeroForegroundColor(value)
+                      >
+                        {size}
+                      </FormDropdownMenuItem>
+                    ))}
+                  </FormDropdownMenu>
+
+                  <div className="relative ml-2 flex h-5">
+                    <button
+                      title="Bold"
+                      className={cn(
+                        'relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            selectedColumn.fontBold ??
+                            gridConfiguration.fontBold,
+                        },
+                      )}
+                      onClick={() =>
+                        selectedColumn.setFontBold(
+                          !(
+                            selectedColumn.fontBold ??
+                            gridConfiguration.fontBold
+                          ),
+                        )
+                      }
+                    >
+                      <DataCubeIcon.FontBold />
+                    </button>
+                    <button
+                      title="Italic"
+                      className={cn(
+                        'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            selectedColumn.fontItalic ??
+                            gridConfiguration.fontItalic,
+                        },
+                      )}
+                      onClick={() =>
+                        selectedColumn.setFontItalic(
+                          !(
+                            selectedColumn.fontItalic ??
+                            gridConfiguration.fontItalic
+                          ),
+                        )
+                      }
+                    >
+                      <DataCubeIcon.FontItalic />
+                    </button>
+                    <button
+                      title={`Underline${(selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline) ? ` (${selectedColumn.fontUnderline ?? gridConfiguration.fontUnderline})` : ''}`}
+                      className={cn(
+                        'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            (selectedColumn.fontUnderline ??
+                              gridConfiguration.fontUnderline) !== undefined,
+                        },
+                      )}
+                      onClick={() => {
+                        if (
+                          (selectedColumn.fontUnderline ??
+                            gridConfiguration.fontUnderline) === undefined
+                        ) {
+                          selectedColumn.setFontUnderline(
+                            DataCubeFontFormatUnderlineVariant.SOLID,
+                          );
+                          selectedColumn.setFontStrikethrough(false);
+                        } else {
+                          selectedColumn.setFontUnderline(undefined);
                         }
+                      }}
+                    >
+                      <DataCubeIcon.FontUnderline />
+                    </button>
+                    <button
+                      className="text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus:z-[1]"
+                      onClick={openFontFormatUnderlineVariantDropdown}
+                    >
+                      <div
+                        className={cn('h-4 w-[0.5px] bg-neutral-200', {
+                          'opacity-0':
+                            (selectedColumn.fontUnderline ??
+                              gridConfiguration.fontUnderline) !== undefined,
+                        })}
                       />
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.errorForegroundColor ??
-                          gridConfiguration.errorForegroundColor
+                      <DataCubeIcon.CaretDown />
+                    </button>
+                    <FormDropdownMenu
+                      className="w-14"
+                      {...fontFormatUnderlineVariantDropdownProps}
+                    >
+                      {[
+                        DataCubeFontFormatUnderlineVariant.SOLID,
+                        DataCubeFontFormatUnderlineVariant.DASHED,
+                        DataCubeFontFormatUnderlineVariant.DOTTED,
+                        DataCubeFontFormatUnderlineVariant.DOUBLE,
+                        DataCubeFontFormatUnderlineVariant.WAVY,
+                      ].map((variant) => (
+                        <FormDropdownMenuItem
+                          className="relative"
+                          key={variant}
+                          onClick={() => {
+                            selectedColumn.setFontUnderline(variant);
+                            selectedColumn.setFontStrikethrough(false);
+                            closeFontFormatUnderlineVariantDropdown();
+                          }}
+                          autoFocus={
+                            variant ===
+                            (selectedColumn.fontUnderline ??
+                              gridConfiguration.fontUnderline)
+                          }
+                        >
+                          <div
+                            className={cn(
+                              '!hover:underline absolute top-0 !underline',
+                              {
+                                '!hover:decoration-solid !decoration-solid':
+                                  variant ===
+                                  DataCubeFontFormatUnderlineVariant.SOLID,
+                                '!hover:decoration-dashed !decoration-dashed':
+                                  variant ===
+                                  DataCubeFontFormatUnderlineVariant.DASHED,
+                                '!hover:decoration-dotted !decoration-dotted':
+                                  variant ===
+                                  DataCubeFontFormatUnderlineVariant.DOTTED,
+                                '!hover:decoration-double !decoration-double':
+                                  variant ===
+                                  DataCubeFontFormatUnderlineVariant.DOUBLE,
+                                '!hover:decoration-wavy !decoration-wavy':
+                                  variant ===
+                                  DataCubeFontFormatUnderlineVariant.WAVY,
+                              },
+                            )}
+                          >
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                          </div>
+                        </FormDropdownMenuItem>
+                      ))}
+                    </FormDropdownMenu>
+                    <button
+                      title="Strikethrough"
+                      className={cn(
+                        'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            selectedColumn.fontStrikethrough ??
+                            gridConfiguration.fontStrikethrough,
+                        },
+                      )}
+                      onClick={() => {
+                        if (
+                          selectedColumn.fontStrikethrough ??
+                          gridConfiguration.fontStrikethrough
+                        ) {
+                          selectedColumn.setFontStrikethrough(false);
+                        } else {
+                          selectedColumn.setFontStrikethrough(true);
+                          selectedColumn.setFontUnderline(undefined);
                         }
-                        defaultColor={gridConfiguration.errorForegroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setErrorForegroundColor(value)
+                      }}
+                    >
+                      <DataCubeIcon.FontStrikethrough />
+                    </button>
+                    <button
+                      title={`Case${(selectedColumn.fontCase ?? gridConfiguration.fontCase) ? ` (${selectedColumn.fontCase ?? gridConfiguration.fontCase})` : ''}`}
+                      className={cn(
+                        'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-r-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            (selectedColumn.fontCase ??
+                              gridConfiguration.fontCase) !== undefined,
+                        },
+                      )}
+                      onClick={() => {
+                        if (
+                          (selectedColumn.fontCase ??
+                            gridConfiguration.fontCase) === undefined
+                        ) {
+                          selectedColumn.setFontCase(
+                            DataCubeFontCase.UPPERCASE,
+                          );
+                        } else {
+                          selectedColumn.setFontCase(undefined);
                         }
+                      }}
+                    >
+                      <DataCubeIcon.FontCase className="stroke-[0.5px]" />
+                    </button>
+                    <button
+                      className="text-2xs relative -ml-[1px] flex h-5 w-2.5 items-center justify-center rounded-br-sm rounded-tr-sm border border-l-0 border-neutral-400 bg-neutral-50 p-0 text-neutral-600 focus:z-[1]"
+                      onClick={openFontCaseDropdown}
+                    >
+                      <div
+                        className={cn('h-4 w-[0.5px] bg-neutral-200', {
+                          'opacity-0':
+                            (selectedColumn.fontCase ??
+                              gridConfiguration.fontCase) !== undefined,
+                        })}
                       />
-                    </div>
+                      <DataCubeIcon.CaretDown />
+                    </button>
+                    <FormDropdownMenu
+                      className="w-20"
+                      {...fontCaseDropdownProps}
+                    >
+                      {[
+                        DataCubeFontCase.LOWERCASE,
+                        DataCubeFontCase.UPPERCASE,
+                        DataCubeFontCase.CAPITALIZE,
+                      ].map((fontCase) => (
+                        <FormDropdownMenuItem
+                          key={fontCase}
+                          onClick={() => {
+                            selectedColumn.setFontCase(fontCase);
+                            closeFontCaseDropdown();
+                          }}
+                          autoFocus={
+                            fontCase ===
+                            (selectedColumn.fontCase ??
+                              gridConfiguration.fontCase)
+                          }
+                        >
+                          <div
+                            className={cn({
+                              lowercase:
+                                fontCase === DataCubeFontCase.LOWERCASE,
+                              uppercase:
+                                fontCase === DataCubeFontCase.UPPERCASE,
+                              capitalize:
+                                fontCase === DataCubeFontCase.CAPITALIZE,
+                            })}
+                          >
+                            {fontCase}
+                          </div>
+                        </FormDropdownMenuItem>
+                      ))}
+                    </FormDropdownMenu>
                   </div>
-                  <div className="flex h-6">
-                    <div className="flex h-full w-16 flex-shrink-0 items-center text-sm">
-                      Background:
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.normalBackgroundColor ??
-                          gridConfiguration.normalBackgroundColor
-                        }
-                        defaultColor={gridConfiguration.normalBackgroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setNormalBackgroundColor(value)
-                        }
-                      />
-                    </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.negativeBackgroundColor ??
-                          gridConfiguration.negativeBackgroundColor
-                        }
-                        defaultColor={gridConfiguration.negativeBackgroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setNegativeBackgroundColor(value)
-                        }
-                      />
+
+                  <div className="relative ml-2 flex h-5">
+                    <button
+                      title="Align Left"
+                      className={cn(
+                        'relative flex h-5 w-5 items-center justify-center rounded-bl-sm rounded-tl-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            (selectedColumn.textAlign ??
+                              gridConfiguration.textAlign) ===
+                            DataCubeFontTextAlignment.LEFT,
+                        },
+                      )}
+                      onClick={() =>
+                        selectedColumn.setTextAlign(
+                          DataCubeFontTextAlignment.LEFT,
+                        )
+                      }
+                    >
+                      <DataCubeIcon.TextAlignLeft />
+                    </button>
+                    <button
+                      title="Align Center"
+                      className={cn(
+                        'relative -ml-[1px] flex h-5 w-5 items-center justify-center border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            (selectedColumn.textAlign ??
+                              gridConfiguration.textAlign) ===
+                            DataCubeFontTextAlignment.CENTER,
+                        },
+                      )}
+                      onClick={() =>
+                        selectedColumn.setTextAlign(
+                          DataCubeFontTextAlignment.CENTER,
+                        )
+                      }
+                    >
+                      <DataCubeIcon.TextAlignCenter />
+                    </button>
+                    <button
+                      title="Align Right"
+                      className={cn(
+                        'relative -ml-[1px] flex h-5 w-5 items-center justify-center rounded-br-sm rounded-tr-sm border border-neutral-400 bg-neutral-50 p-0 text-neutral-700 focus:z-[1]',
+                        {
+                          'bg-neutral-200':
+                            (selectedColumn.textAlign ??
+                              gridConfiguration.textAlign) ===
+                            DataCubeFontTextAlignment.RIGHT,
+                        },
+                      )}
+                      onClick={() =>
+                        selectedColumn.setTextAlign(
+                          DataCubeFontTextAlignment.RIGHT,
+                        )
+                      }
+                    >
+                      <DataCubeIcon.TextAlignRight />
+                    </button>
+                  </div>
+                </div>
+
+                <div className="mt-2 flex w-full">
+                  <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm">
+                    Colors:
+                  </div>
+                  <div className="h-18">
+                    <div className="flex h-6">
+                      <div className="w-16 flex-shrink-0" />
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
+                        Normal
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
+                        Negative
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
+                        Zero
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center text-sm">
+                        Error
+                      </div>
                     </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.zeroBackgroundColor ??
-                          gridConfiguration.zeroBackgroundColor
-                        }
-                        defaultColor={gridConfiguration.zeroBackgroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setZeroBackgroundColor(value)
-                        }
-                      />
+                    <div className="flex h-6">
+                      <div className="flex h-full w-16 flex-shrink-0 items-center text-sm">
+                        Foreground:
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.normalForegroundColor ??
+                            gridConfiguration.normalForegroundColor
+                          }
+                          defaultColor={gridConfiguration.normalForegroundColor}
+                          onChange={(value) =>
+                            selectedColumn.setNormalForegroundColor(value)
+                          }
+                        />
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.negativeForegroundColor ??
+                            gridConfiguration.negativeForegroundColor
+                          }
+                          defaultColor={
+                            gridConfiguration.negativeForegroundColor
+                          }
+                          onChange={(value) =>
+                            selectedColumn.setNegativeForegroundColor(value)
+                          }
+                        />
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.zeroForegroundColor ??
+                            gridConfiguration.zeroForegroundColor
+                          }
+                          defaultColor={gridConfiguration.zeroForegroundColor}
+                          onChange={(value) =>
+                            selectedColumn.setZeroForegroundColor(value)
+                          }
+                        />
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.errorForegroundColor ??
+                            gridConfiguration.errorForegroundColor
+                          }
+                          defaultColor={gridConfiguration.errorForegroundColor}
+                          onChange={(value) =>
+                            selectedColumn.setErrorForegroundColor(value)
+                          }
+                        />
+                      </div>
                     </div>
-                    <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
-                      <FormColorPickerButton
-                        color={
-                          selectedColumn.errorBackgroundColor ??
-                          gridConfiguration.errorBackgroundColor
-                        }
-                        defaultColor={gridConfiguration.errorBackgroundColor}
-                        onChange={(value) =>
-                          selectedColumn.setErrorBackgroundColor(value)
-                        }
-                      />
+                    <div className="flex h-6">
+                      <div className="flex h-full w-16 flex-shrink-0 items-center text-sm">
+                        Background:
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.normalBackgroundColor ??
+                            gridConfiguration.normalBackgroundColor
+                          }
+                          defaultColor={gridConfiguration.normalBackgroundColor}
+                          onChange={(value) =>
+                            selectedColumn.setNormalBackgroundColor(value)
+                          }
+                        />
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.negativeBackgroundColor ??
+                            gridConfiguration.negativeBackgroundColor
+                          }
+                          defaultColor={
+                            gridConfiguration.negativeBackgroundColor
+                          }
+                          onChange={(value) =>
+                            selectedColumn.setNegativeBackgroundColor(value)
+                          }
+                        />
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.zeroBackgroundColor ??
+                            gridConfiguration.zeroBackgroundColor
+                          }
+                          defaultColor={gridConfiguration.zeroBackgroundColor}
+                          onChange={(value) =>
+                            selectedColumn.setZeroBackgroundColor(value)
+                          }
+                        />
+                      </div>
+                      <div className="flex h-full w-12 flex-shrink-0 items-center justify-center">
+                        <FormColorPickerButton
+                          color={
+                            selectedColumn.errorBackgroundColor ??
+                            gridConfiguration.errorBackgroundColor
+                          }
+                          defaultColor={gridConfiguration.errorBackgroundColor}
+                          onChange={(value) =>
+                            selectedColumn.setErrorBackgroundColor(value)
+                          }
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-              <div className="mt-2 flex w-full">
-                <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm" />
-                <div className="w-80">
-                  <div className="mb-2 h-[1px] w-full bg-neutral-200" />
-                  <button
-                    className="flex h-5 items-center justify-center rounded-sm border border-neutral-400 bg-neutral-200 p-0 px-1 text-sm text-neutral-700 disabled:text-neutral-400"
-                    disabled={selectedColumn.isUsingDefaultStyling}
-                    onClick={() => selectedColumn.useDefaultStyling()}
-                  >
-                    Use Default Styling
-                  </button>
+                <div className="mt-2 flex w-full">
+                  <div className="flex h-6 w-32 flex-shrink-0 items-center text-sm" />
+                  <div className="w-80">
+                    <div className="mb-2 h-[1px] w-full bg-neutral-200" />
+                    <button
+                      className="flex h-5 items-center justify-center rounded-sm border border-neutral-400 bg-neutral-200 p-0 px-1 text-sm text-neutral-700 disabled:text-neutral-400"
+                      disabled={selectedColumn.isUsingDefaultStyling}
+                      onClick={() => selectedColumn.useDefaultStyling()}
+                    >
+                      Use Default Styling
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </>
-          )}
+              </>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);