From e9896def2f1b1912d888c5d046e58a49dc0c772e Mon Sep 17 00:00:00 2001
From: Igor Dykhta <igorDykhta@users.noreply.github.com>
Date: Wed, 12 Apr 2023 15:22:38 +0300
Subject: [PATCH] [Feat] add table config with custom number format (#2192)

---
 src/actions/src/action-types.ts               |   1 +
 src/actions/src/vis-state-actions.ts          |  30 +++++
 .../src/common/data-table/header-cell.tsx     |  52 ++++++++-
 .../src/common/data-table/index.tsx           |  34 ++----
 .../src/common/data-table/option-dropdown.tsx | 106 ++++++++++++++++--
 src/components/src/index.ts                   |   3 +-
 src/components/src/modal-container.tsx        |   3 +
 .../src/modals/data-table-modal.tsx           |  33 +++++-
 .../tooltip-config/tooltip-chicklet.tsx       |  48 ++------
 .../layer-panel/layer-config-group.tsx        |   2 +-
 src/constants/src/default-settings.ts         |   6 +-
 src/constants/src/tooltip.ts                  |  30 +++++
 src/reducers/src/vis-state-updaters.ts        |  28 ++++-
 src/reducers/src/vis-state.ts                 |   2 +
 src/table/src/kepler-table.ts                 |  10 ++
 src/types/components.d.ts                     |  28 +++++
 src/types/index.d.ts                          |   1 +
 src/types/layers.d.ts                         |   1 +
 src/utils/src/data-utils.ts                   |  26 ++++-
 src/utils/src/dataset-utils.ts                |  47 +++++++-
 src/utils/src/format.ts                       |  23 ++++
 src/utils/src/index.ts                        |   8 +-
 .../modals/data-table-modal-test.js           |  45 ++++++--
 23 files changed, 467 insertions(+), 100 deletions(-)
 create mode 100644 src/types/components.d.ts
 create mode 100644 src/utils/src/format.ts

diff --git a/src/actions/src/action-types.ts b/src/actions/src/action-types.ts
index 16ea4f1d9d..b62ba7b5ac 100644
--- a/src/actions/src/action-types.ts
+++ b/src/actions/src/action-types.ts
@@ -112,6 +112,7 @@ export const ActionTypes = {
   SORT_TABLE_COLUMN: `${ACTION_PREFIX}SORT_TABLE_COLUMN`,
   PIN_TABLE_COLUMN: `${ACTION_PREFIX}PIN_TABLE_COLUMN`,
   COPY_TABLE_COLUMN: `${ACTION_PREFIX}COPY_TABLE_COLUMN`,
+  SET_COLUMN_DISPLAY_FORMAT: `${ACTION_PREFIX}SET_COLUMN_DISPLAY_FORMAT`,
   NEXT_FILE_BATCH: `${ACTION_PREFIX}NEXT_FILE_BATCH`,
   PROCESS_FILE_CONTENT: `${ACTION_PREFIX}PROCESS_FILE_CONTENT`,
   UPDATE_TABLE_COLOR: `${ACTION_PREFIX}UPDATE_TABLE_COLOR`,
diff --git a/src/actions/src/vis-state-actions.ts b/src/actions/src/vis-state-actions.ts
index 58b82bc242..632527df64 100644
--- a/src/actions/src/vis-state-actions.ts
+++ b/src/actions/src/vis-state-actions.ts
@@ -620,6 +620,36 @@ export function copyTableColumn(
   };
 }
 
+export type SetColumnDisplayFormatUpdaterAction = {
+  dataId: string;
+  column: string;
+  displayFormat: string;
+};
+
+/**
+ * Set column display format
+ * @param dataId
+ * @param column
+ * @param displayFormat
+ * @returns action
+ * @public
+ */
+export function setColumnDisplayFormat(
+  dataId: string,
+  column: string,
+  displayFormat: string
+): Merge<
+  SetColumnDisplayFormatUpdaterAction,
+  {type: typeof ActionTypes.SET_COLUMN_DISPLAY_FORMAT}
+> {
+  return {
+    type: ActionTypes.SET_COLUMN_DISPLAY_FORMAT,
+    dataId,
+    column,
+    displayFormat
+  };
+}
+
 export type AddDataToMapUpdaterOptions = {
   centrMap?: boolean;
   readOnly?: boolean;
diff --git a/src/components/src/common/data-table/header-cell.tsx b/src/components/src/common/data-table/header-cell.tsx
index 254e1a4d54..1326afae78 100644
--- a/src/components/src/common/data-table/header-cell.tsx
+++ b/src/components/src/common/data-table/header-cell.tsx
@@ -1,10 +1,12 @@
-import React, {CSSProperties, useCallback} from 'react';
+import React, {CSSProperties, useState, useCallback} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import Button from './button';
-import {ArrowUp, ArrowDown, VertThreeDots} from '../../common/icons';
-import OptionDropdown from './option-dropdown';
+import {ArrowUp, ArrowDown, VertThreeDots, Hash} from '../../common/icons';
 import {SORT_ORDER} from '@kepler.gl/constants';
+import OptionDropdown, {FormatterDropdown} from './option-dropdown';
+import {getFieldFormatLabels} from '@kepler.gl/utils';
+import {ColMeta} from '@kepler.gl/types';
 import FieldTokenFactory, {FieldTokenProps} from '../../common/field-token';
 import {DataTableProps} from './index';
 
@@ -58,6 +60,12 @@ const StyledHeaderCell = styled.div`
   .more {
     margin-left: 5px;
   }
+
+  .col-name__format svg {
+    width: 10px;
+    height: 10px;
+    stroke-width: 1;
+  }
 `;
 
 type CellInfo = {
@@ -74,6 +82,7 @@ type HeaderCellProps = {
   // passed down from react virtualized Grid
   cellInfo: CellInfo;
   columns: DataTableProps['columns'];
+  colMeta?: ColMeta;
   isPinned?: boolean;
   showStats?: boolean;
   props: DataTableProps;
@@ -91,12 +100,22 @@ const HeaderCellFactory = (FieldToken: React.FC<FieldTokenProps>) => {
     moreOptionsColumn
   }: HeaderCellProps) => {
     const {columnIndex, key, style} = cellInfo;
-    const {colMeta, sortColumn = {}, sortTableColumn, pinTableColumn, copyTableColumn} = props;
+    const {
+      colMeta,
+      sortColumn,
+      sortTableColumn,
+      pinTableColumn,
+      copyTableColumn,
+      setDisplayFormat
+    } = props;
+    const [showFormatter, setShowFormatter] = useState(false);
     const column = columns[columnIndex];
 
     const isGhost = column.ghost;
     const isSorted = sortColumn[column];
     const firstCell = columnIndex === 0;
+    const isFormatted = Boolean(colMeta[column]?.displayFormat);
+    const formatLabels = isFormatted ? getFieldFormatLabels(colMeta[column].type) : [];
     const onSortTable = useCallback(() => sortTableColumn(column), [sortTableColumn, column]);
     const onToggleOptionMenu = useCallback(() => toggleMoreOptions(column), [
       toggleMoreOptions,
@@ -104,6 +123,17 @@ const HeaderCellFactory = (FieldToken: React.FC<FieldTokenProps>) => {
     ]);
     const onPin = useCallback(() => pinTableColumn(column), [pinTableColumn, column]);
     const onCopy = useCallback(() => copyTableColumn(column), [copyTableColumn, column]);
+    const onSetDisplayFormat = useCallback(
+      displayFormat => {
+        setDisplayFormat(column, displayFormat.format);
+      },
+      [column, setDisplayFormat]
+    );
+
+    const onToggleDisplayFormat = useCallback(() => {
+      setShowFormatter(!showFormatter);
+    }, [showFormatter]);
+
     return (
       <StyledHeaderCell
         className={classnames('header-cell', {
@@ -136,6 +166,18 @@ const HeaderCellFactory = (FieldToken: React.FC<FieldTokenProps>) => {
                       )
                     ) : null}
                   </Button>
+                  <Button className="col-name__format" onClick={onToggleDisplayFormat}>
+                    {isFormatted ? <Hash height="14px" /> : null}
+                    <FormatterDropdown
+                      left={0}
+                      top={0}
+                      isOpened={isFormatted && showFormatter}
+                      column={colMeta[column]}
+                      setDisplayFormat={onSetDisplayFormat}
+                      onClose={() => setShowFormatter(false)}
+                      formatLabels={formatLabels}
+                    />
+                  </Button>
                 </div>
                 <Button className="more" onClick={onToggleOptionMenu}>
                   <VertThreeDots height="14px" />
@@ -148,10 +190,12 @@ const HeaderCellFactory = (FieldToken: React.FC<FieldTokenProps>) => {
               <OptionDropdown
                 isOpened={moreOptionsColumn === column}
                 column={column}
+                colMeta={colMeta}
                 toggleMoreOptions={toggleMoreOptions}
                 sortTableColumn={mode => sortTableColumn(column, mode)}
                 pinTableColumn={onPin}
                 copyTableColumn={onCopy}
+                setDisplayFormat={onSetDisplayFormat}
               />
             </section>
           </>
diff --git a/src/components/src/common/data-table/index.tsx b/src/components/src/common/data-table/index.tsx
index 0e52fd7c4d..19dbafe592 100644
--- a/src/components/src/common/data-table/index.tsx
+++ b/src/components/src/common/data-table/index.tsx
@@ -32,7 +32,8 @@ import {CellSizeCache} from './cell-size';
 import Grid from './grid';
 import HeaderCellFactory from './header-cell';
 
-import {parseFieldValue, DataContainerInterface} from '@kepler.gl/utils';
+import {ColMeta} from '@kepler.gl/types';
+import {parseFieldValue, getColumnFormatter, DataContainerInterface} from '@kepler.gl/utils';
 import {adjustCellsToContainer} from './cell-size';
 
 import {ALL_FIELD_TYPES} from '@kepler.gl/constants';
@@ -189,17 +190,6 @@ export const Container = styled.div`
 
 const defaultColumnWidth = 200;
 
-export type ColMeta = {
-  [key: string]: {
-    colIdx: number;
-    name: string;
-    displayName: string;
-    type: string;
-    format?: string;
-    columnStats?: any;
-  };
-};
-
 export type SortColumn = {
   column?: string;
   mode?: string;
@@ -221,20 +211,16 @@ interface GetRowCellProps {
 /*
  * This is an accessor method used to generalize getting a cell from a data row
  */
-const getRowCell = ({
-  dataContainer,
-  columns,
-  column,
-  colMeta,
-  rowIndex,
-  sortOrder
-}: GetRowCellProps) => {
+const getRowCell = (
+  {dataContainer, columns, column, colMeta, rowIndex, sortOrder}: GetRowCellProps,
+  formatter
+) => {
   const rowIdx = sortOrder && sortOrder.length ? get(sortOrder, rowIndex) : rowIndex;
   const {type} = colMeta[column];
 
   let value = dataContainer.valueAt(rowIdx, columns.indexOf(column));
   if (value === undefined) value = 'Err';
-  return parseFieldValue(value, type);
+  return formatter ? formatter(value) : parseFieldValue(value, type);
 };
 
 type StatsControlProps = {
@@ -401,9 +387,10 @@ export interface DataTableProps {
   dataContainer: DataContainerInterface;
   fixedHeight?: number;
   colMeta: ColMeta;
-  sortColumn?: SortColumn;
+  sortColumn: SortColumn;
   sortTableColumn: (column: string, mode?: string) => void;
   pinTableColumn: (column: string) => void;
+  setDisplayFormat: (column: string, displayFormat: string) => void;
   copyTableColumn: (column: string) => void;
   sortOrder?: number[] | null;
   showStats?: boolean;
@@ -509,7 +496,8 @@ function DataTableFactory(HeaderCell: ReturnType<typeof HeaderCellFactory>) {
         const column = columns[columnIndex];
         const isGhost = column.ghost;
 
-        const rowCell = isGhost ? '' : getRowCell({...props, column, rowIndex});
+        const formatter = isGhost ? null : getColumnFormatter(colMeta[column]);
+        const rowCell = isGhost ? '' : getRowCell({...props, column, rowIndex}, formatter);
         const type = isGhost ? null : colMeta[column].type;
 
         const lastRowIndex = dataContainer ? dataContainer.numRows() - 1 : 0;
diff --git a/src/components/src/common/data-table/option-dropdown.tsx b/src/components/src/common/data-table/option-dropdown.tsx
index be34bde296..f76b8d8c0e 100644
--- a/src/components/src/common/data-table/option-dropdown.tsx
+++ b/src/components/src/common/data-table/option-dropdown.tsx
@@ -18,12 +18,14 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 import styled from 'styled-components';
 import Portaled from '../portaled';
 import DropdownList from '../item-selector/dropdown-list';
-import {SORT_ORDER, TABLE_OPTION, TABLE_OPTION_LIST} from '@kepler.gl/constants';
-import {ArrowDown, ArrowUp, Clipboard, Pin, Cancel} from '../icons';
+import {SORT_ORDER, TABLE_OPTION, TABLE_OPTION_LIST, TooltipFormat} from '@kepler.gl/constants';
+import {getFieldFormatLabels} from '@kepler.gl/utils';
+import {ColMeta, ColMetaProps} from '@kepler.gl/types';
+import {ArrowDown, ArrowUp, Clipboard, Pin, Cancel, Hash} from '../icons';
 
 const ListItem = ({value}) => (
   <div>
@@ -32,6 +34,7 @@ const ListItem = ({value}) => (
   </div>
 );
 
+// make hash icon smaller
 const StyledOptionsDropdown = styled.div`
   .list-selector {
     border-top: 0;
@@ -49,16 +52,78 @@ const StyledOptionsDropdown = styled.div`
     svg {
       margin-right: 5px;
     }
+
+    .data-ex-icons-hash {
+      width: 10px;
+      height: 10px;
+      stroke-width: 1px;
+      margin-left: 2px;
+      margin-right: 6px;
+    }
+  }
+`;
+
+const StyledPopover = styled.div`
+  width: 184px;
+  height: 160px;
+  z-index: 101;
+  .list-selector {
+    max-height: 160px;
+  }
+  .hover:after {
+    content: '\\2713';
+    margin-left: 5px;
   }
 `;
 
+export type FormatterDropdownProps = {
+  left: number;
+  top: number;
+  isOpened: boolean;
+  column: ColMetaProps;
+  setDisplayFormat: (displayFormat: string) => void;
+  onClose: () => void;
+  formatLabels: TooltipFormat[];
+};
+
+export const FormatterDropdown: React.FC<FormatterDropdownProps> = (
+  props: FormatterDropdownProps
+) => {
+  const {left, top, isOpened, column, setDisplayFormat, onClose, formatLabels} = props;
+  const selectionIndex = formatLabels.findIndex(label => label.format === column.displayFormat);
+
+  const onSelectDisplayFormat = useCallback(
+    (result, e) => {
+      setDisplayFormat(result);
+      onClose();
+    },
+    [setDisplayFormat, onClose]
+  );
+
+  return (
+    <Portaled left={left} top={top} isOpened={isOpened} onClose={onClose}>
+      <StyledPopover className="formatter-popover">
+        <DropdownList
+          options={formatLabels}
+          selectionIndex={selectionIndex}
+          displayOption={({label}) => label}
+          onOptionSelected={onSelectDisplayFormat}
+          light
+        />
+      </StyledPopover>
+    </Portaled>
+  );
+};
+
 interface OptionDropdownProps {
   isOpened?: boolean;
   column: string;
+  colMeta: ColMeta;
   toggleMoreOptions: (column: string) => void;
   sortTableColumn: (sort: string) => void;
   pinTableColumn: () => void;
   copyTableColumn: () => void;
+  setDisplayFormat: (displayFormat: string) => void;
   sortMode?: string;
   isSorted?: string;
   isPinned?: boolean;
@@ -68,11 +133,14 @@ const OptionDropdown = (props: OptionDropdownProps) => {
   const {
     isOpened,
     column,
+    colMeta,
     toggleMoreOptions,
     sortTableColumn,
     pinTableColumn,
-    copyTableColumn
+    copyTableColumn,
+    setDisplayFormat
   } = props;
+  const [showFormatter, setShowFormatter] = useState(false);
   const onOptionSelected = useCallback(
     ({value}) => {
       switch (value) {
@@ -94,6 +162,9 @@ const OptionDropdown = (props: OptionDropdownProps) => {
         case TABLE_OPTION.COPY:
           copyTableColumn();
           break;
+        case TABLE_OPTION.FORMAT_COLUMN:
+          setShowFormatter(true);
+          return;
         default:
           break;
       }
@@ -108,16 +179,28 @@ const OptionDropdown = (props: OptionDropdownProps) => {
     ArrowDown,
     ArrowUp,
     Clipboard,
-    Cancel
+    Cancel,
+    Hash
   };
 
-  const options = TABLE_OPTION_LIST.filter(op => !op.condition || op.condition(props)).map(op => ({
+  const formatLabels = getFieldFormatLabels(colMeta[column].type);
+  const options = TABLE_OPTION_LIST.filter(op => {
+    // cant use conditions because it creates a circular dependency
+    // TODO: move condition clause out of default-settings TABLE_OPTION_LIST
+    const validToFormat = op.value !== TABLE_OPTION.FORMAT_COLUMN || formatLabels.length;
+    return (!op.condition || op.condition(props)) && validToFormat;
+  }).map(op => ({
     ...op,
     icon: TABLE_OPTION_LIST_ICONS[op.icon]
   }));
 
+  const onClose = useCallback(() => {
+    setShowFormatter(false);
+    toggleMoreOptions(column);
+  }, [column, toggleMoreOptions]);
+
   return (
-    <Portaled right={120} top={20} isOpened={isOpened} onClose={() => toggleMoreOptions(column)}>
+    <Portaled right={120} top={20} isOpened={isOpened} onClose={onClose}>
       <StyledOptionsDropdown className="more-options">
         <DropdownList
           displayOption={d => d.display}
@@ -126,6 +209,15 @@ const OptionDropdown = (props: OptionDropdownProps) => {
           onOptionSelected={onOptionSelected}
           light
         />
+        <FormatterDropdown
+          left={120}
+          top={-10}
+          isOpened={Boolean(isOpened && showFormatter)}
+          formatLabels={formatLabels}
+          column={colMeta[column]}
+          setDisplayFormat={setDisplayFormat}
+          onClose={onClose}
+        />
       </StyledOptionsDropdown>
     </Portaled>
   );
diff --git a/src/components/src/index.ts b/src/components/src/index.ts
index 9c569cbbff..f7dc6b915c 100644
--- a/src/components/src/index.ts
+++ b/src/components/src/index.ts
@@ -224,7 +224,7 @@ export {default as ActionPanel, ActionPanelItem} from './common/action-panel';
 export {default as HeaderCellFactory} from './common/data-table/header-cell';
 export {default as DataTableFactory} from './common/data-table';
 export {default as CanvasHack} from './common/data-table/canvas';
-export {default as OptionDropdown} from './common/data-table/option-dropdown';
+export {default as OptionDropdown, FormatterDropdown} from './common/data-table/option-dropdown';
 export {default as MapLayerSelector} from './common/map-layer-selector';
 export {default as VerticalToolbar} from './common/vertical-toolbar';
 export {default as ToolbarItem} from './common/toolbar-item';
@@ -265,6 +265,7 @@ export type {CustomPanelsProps} from './side-panel/custom-panel';
 export type {LayerTypeListItemType} from './side-panel/layer-panel/layer-type-list-item';
 export type {LayerGroupColorPickerProps} from './side-panel/map-style-panel/map-layer-group-color-picker';
 export type {MapLegendPanelProps, MapLegendPanelFactoryDeps} from './map/map-legend-panel';
+export type {FormatterDropdownProps} from './common/data-table/option-dropdown';
 
 export {
   Icons,
diff --git a/src/components/src/modal-container.tsx b/src/components/src/modal-container.tsx
index 6f8d7522a5..fa6250a8c7 100644
--- a/src/components/src/modal-container.tsx
+++ b/src/components/src/modal-container.tsx
@@ -314,6 +314,9 @@ export default function ModalContainerFactory(
                 sortTableColumn={visStateActions.sortTableColumn}
                 pinTableColumn={visStateActions.pinTableColumn}
                 copyTableColumn={visStateActions.copyTableColumn}
+                setColumnDisplayFormat={visStateActions.setColumnDisplayFormat}
+                uiStateActions={uiStateActions}
+                uiState={uiState}
               />
             );
 
diff --git a/src/components/src/modals/data-table-modal.tsx b/src/components/src/modals/data-table-modal.tsx
index 938700d89d..b992946ccb 100644
--- a/src/components/src/modals/data-table-modal.tsx
+++ b/src/components/src/modals/data-table-modal.tsx
@@ -26,11 +26,14 @@ import {createSelector} from 'reselect';
 import {renderedSize} from '../common/data-table/cell-size';
 import CanvasHack from '../common/data-table/canvas';
 import KeplerTable, {Datasets} from '@kepler.gl/table';
+import {UIStateActions} from '@kepler.gl/actions';
+import {UiState} from '@kepler.gl/types';
 
 const MIN_STATS_CELL_SIZE = 122;
 
+// sidePadding changes from 38 to 68, 30px for configuration button
 const dgSettings = {
-  sidePadding: '38px',
+  sidePadding: '68px',
   verticalPadding: '16px',
   height: '36px'
 };
@@ -113,25 +116,33 @@ interface DataTableModalProps {
   datasets: Datasets;
   showDatasetTable: (id: string) => void;
   showTab?: boolean;
+  setColumnDisplayFormat: (dataId: string, column: string, displayFormat: string) => void;
+  uiStateActions: typeof UIStateActions;
+  uiState: UiState;
 }
 
 function DataTableModalFactory(
   DataTable: ReturnType<typeof DataTableFactory>
 ): React.ComponentType<Omit<DataTableModalProps, 'theme'>> {
   class DataTableModal extends React.Component<DataTableModalProps> {
+    state = {
+      showConfig: false
+    };
+
     datasetCellSizeCache = {};
     dataId = ({dataId = ''}: DataTableModalProps) => dataId;
     datasets = (props: DataTableModalProps) => props.datasets;
     fields = ({datasets, dataId = ''}: DataTableModalProps) => (datasets[dataId] || {}).fields;
     columns = createSelector(this.fields, fields => fields.map(f => f.name));
-    colMeta = createSelector(this.fields, fields =>
+    colMeta = createSelector([this.fields, this.datasets], fields =>
       fields.reduce(
-        (acc, {name, displayName, type, filterProps, format}) => ({
+        (acc, {name, displayName, type, filterProps, format, displayFormat}) => ({
           ...acc,
           [name]: {
             name: displayName || name,
             type,
             ...(format ? {format} : {}),
+            ...(displayFormat ? {displayFormat} : {}),
             ...(filterProps?.columnStats ? {columnStats: filterProps.columnStats} : {})
           }
         }),
@@ -200,6 +211,19 @@ function DataTableModalFactory(
       sortTableColumn(dataId, column, mode);
     };
 
+    setDisplayFormat = (column, displayFormat) => {
+      const {dataId, setColumnDisplayFormat} = this.props;
+      if (dataId) setColumnDisplayFormat(dataId, column, displayFormat);
+    };
+
+    onOpenConfig = () => {
+      this.setState({showConfig: true});
+    };
+
+    onCloseConfig = () => {
+      this.setState({showConfig: false});
+    };
+
     render() {
       const {datasets, dataId, showDatasetTable, showTab = true} = this.props;
       if (!datasets || !dataId) {
@@ -235,7 +259,8 @@ function DataTableModalFactory(
                 copyTableColumn={this.copyTableColumn}
                 pinTableColumn={this.pinTableColumn}
                 sortTableColumn={this.sortTableColumn}
-                hasStats
+                setDisplayFormat={this.setDisplayFormat}
+                hasStats={false}
               />
             ) : null}
           </TableContainer>
diff --git a/src/components/src/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.tsx b/src/components/src/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.tsx
index 370b36e474..8ba0b38b94 100644
--- a/src/components/src/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.tsx
+++ b/src/components/src/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.tsx
@@ -24,9 +24,9 @@ import {ChickletButton, ChickletTag} from '../../../common/item-selector/chickle
 import {Hash, Delete} from '../../../common/icons';
 import DropdownList from '../../../common/item-selector/dropdown-list';
 import {FormattedMessage} from '@kepler.gl/localization';
+import {TimeLabelFormat, TooltipFields} from '@kepler.gl/types';
+import {getFormatValue, getFormatLabels} from '@kepler.gl/utils';
 import onClickOutside from 'react-onclickoutside';
-import {FIELD_OPTS, TOOLTIP_FORMATS, TOOLTIP_FORMAT_TYPES, TOOLTIP_KEY} from '@kepler.gl/constants';
-import {getFormatter} from '@kepler.gl/utils';
 import TippyTooltip from '../../../common/tippy-tooltip';
 
 interface TooltipChickletProps {
@@ -44,46 +44,10 @@ type TooltipConfig = {
   compareType: string[];
 };
 
-type TooltipFields = {
-  format?: string;
-  id?: string;
-  name?: string;
-  fieldIdx?: number;
-  type?: number;
-};
-
-type TimeLabelFormat = {
-  id: string;
-  format: string | null;
-  type: string;
-  label: string;
-};
-
 type IconDivProps = {
   status: string | null;
 };
 
-const TIME_DISPLAY = '2020-05-11 14:00';
-const getValue = fmt => fmt[TOOLTIP_KEY];
-
-const addDTimeLabel = (formats: TimeLabelFormat[]) =>
-  formats.map(f => ({
-    ...f,
-    label:
-      f.type === TOOLTIP_FORMAT_TYPES.DATE_TIME || f.type === TOOLTIP_FORMAT_TYPES.DATE
-        ? getFormatter(getValue(f))(TIME_DISPLAY)
-        : f.label
-  }));
-
-function getFormatLabels(fields: any, fieldName: string) {
-  const fieldType = fields.find((f: TooltipFields) => f.name === fieldName).type;
-  const tooltipTypes = (fieldType && FIELD_OPTS[fieldType].format.tooltip) || [];
-  const formatLabels: TimeLabelFormat[] = Object.values(TOOLTIP_FORMATS).filter(t =>
-    tooltipTypes.includes(t.type)
-  );
-  return addDTimeLabel(formatLabels);
-}
-
 const ChickletAddonWrapper = styled.div`
   position: relative;
 `;
@@ -120,7 +84,7 @@ function getFormatTooltip(formatLabels: TimeLabelFormat[], format: string | null
   if (!format) {
     return null;
   }
-  const formatLabel = formatLabels.find(fl => getValue(fl) === format);
+  const formatLabel = formatLabels.find(fl => getFormatValue(fl) === format);
   if (formatLabel) {
     return formatLabel.label;
   }
@@ -164,7 +128,9 @@ function TooltipChickletFactory(
       }
       const formatLabels = getFormatLabels(fields, tooltipField.name);
       const hasFormat = Boolean(tooltipField.format);
-      const selectionIndex = formatLabels.findIndex(fl => getValue(fl) === tooltipField.format);
+      const selectionIndex = formatLabels.findIndex(
+        fl => getFormatValue(fl) === tooltipField.format
+      );
       const hashStyle = show ? hashStyles.SHOW : hasFormat ? hashStyles.ACTIVE : null;
 
       return (
@@ -213,7 +179,7 @@ function TooltipChickletFactory(
                         return fieldToShow.name === tooltipField.name
                           ? {
                               name: tooltipField.name,
-                              format: getValue(result)
+                              format: getFormatValue(result)
                             }
                           : fieldToShow;
                       });
diff --git a/src/components/src/side-panel/layer-panel/layer-config-group.tsx b/src/components/src/side-panel/layer-panel/layer-config-group.tsx
index 0e8524bebc..50efc3fccb 100644
--- a/src/components/src/side-panel/layer-panel/layer-config-group.tsx
+++ b/src/components/src/side-panel/layer-panel/layer-config-group.tsx
@@ -89,7 +89,7 @@ export const StyledLayerConfigGroup = styled.div`
   }
 `;
 
-const StyledConfigGroupHeader = styled.div.attrs({
+export const StyledConfigGroupHeader = styled.div.attrs({
   className: 'layer-config-group__header'
 })`
   display: flex;
diff --git a/src/constants/src/default-settings.ts b/src/constants/src/default-settings.ts
index 07ed648579..3e99912a30 100644
--- a/src/constants/src/default-settings.ts
+++ b/src/constants/src/default-settings.ts
@@ -431,7 +431,8 @@ export const TABLE_OPTION = keyMirror({
   UNSORT: null,
   PIN: null,
   UNPIN: null,
-  COPY: null
+  COPY: null,
+  FORMAT_COLUMN: null
 });
 
 export const TABLE_OPTION_LIST = [
@@ -465,7 +466,8 @@ export const TABLE_OPTION_LIST = [
     icon: 'Cancel',
     condition: props => props.isPinned
   },
-  {value: TABLE_OPTION.COPY, display: 'Copy Column', icon: 'Clipboard'}
+  {value: TABLE_OPTION.COPY, display: 'Copy Column', icon: 'Clipboard'},
+  {value: TABLE_OPTION.FORMAT_COLUMN, display: 'Format Column', icon: 'Hash'}
 ];
 
 const YELLOW = '248, 194, 28';
diff --git a/src/constants/src/tooltip.ts b/src/constants/src/tooltip.ts
index 17dc72eaca..6528eb2348 100644
--- a/src/constants/src/tooltip.ts
+++ b/src/constants/src/tooltip.ts
@@ -93,6 +93,30 @@ export const TOOLTIP_FORMATS = {
     format: '.3~f',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
+  DECIMAL_DECIMAL_FIXED_4: {
+    id: 'DECIMAL_DECIMAL_FIXED_4',
+    label: '1.23456 → 1.2346',
+    format: '.4~f',
+    type: TOOLTIP_FORMAT_TYPES.DECIMAL
+  },
+  DECIMAL_SCIENTIFIC_FIXED_2: {
+    id: 'DECIMAL_SCIENTIFIC_FIXED_2',
+    label: '0.12345 → 1.23e-1',
+    format: '.2~e',
+    type: TOOLTIP_FORMAT_TYPES.DECIMAL
+  },
+  DECIMAL_SCIENTIFIC_FIXED_3: {
+    id: 'DECIMAL_SCIENTIFIC_FIXED_3',
+    label: '0.12345 → 1.235e-1',
+    format: '.3~e',
+    type: TOOLTIP_FORMAT_TYPES.DECIMAL
+  },
+  DECIMAL_SCIENTIFIC_FIXED_4: {
+    id: 'DECIMAL_SCIENTIFIC_FIXED_4',
+    label: '0.123456 → 1.2346e-1',
+    format: '.4~e',
+    type: TOOLTIP_FORMAT_TYPES.DECIMAL
+  },
   DECIMAL_INT: {
     id: 'DECIMAL_INT',
     label: '12345 → 12350',
@@ -105,6 +129,12 @@ export const TOOLTIP_FORMATS = {
     format: ',.3~f',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
+  DECIMAL_FOUR: {
+    id: 'DECIMAL_FOUR',
+    label: '12345.54321 → 12,345.5432',
+    format: ',.4~f',
+    type: TOOLTIP_FORMAT_TYPES.DECIMAL
+  },
   DECIMAL_DELTA: {
     id: 'DECIMAL_DELTA',
     label: '12345.4321 → +12,345.432',
diff --git a/src/reducers/src/vis-state-updaters.ts b/src/reducers/src/vis-state-updaters.ts
index 2030a0c1e2..8c0ff2ffee 100644
--- a/src/reducers/src/vis-state-updaters.ts
+++ b/src/reducers/src/vis-state-updaters.ts
@@ -92,7 +92,7 @@ import {pick_, merge_, swap_} from './composer-helpers';
 
 import KeplerGLSchema, {VisState, Merger, PostMergerPayload} from '@kepler.gl/schemas';
 
-import {Filter, InteractionConfig, AnimationConfig, Editor} from '@kepler.gl/types';
+import {Filter, InteractionConfig, AnimationConfig, Editor, Field} from '@kepler.gl/types';
 import {Loader} from '@loaders.gl/loader-utils';
 
 import {calculateLayerData, findDefaultLayer} from './layer-utils';
@@ -2498,6 +2498,32 @@ export function copyTableColumnUpdater(
   return state;
 }
 
+/**
+ * Set column display format from user selection
+ * @memberof visStateUpdaters
+ * @public
+ */
+export function setColumnDisplayFormatUpdater(
+  state: VisState,
+  {dataId, column, displayFormat}: VisStateActions.SetColumnDisplayFormatUpdaterAction
+): VisState {
+  const dataset = state.datasets[dataId];
+  if (!dataset) {
+    return state;
+  }
+  const fieldIdx = dataset.fields.findIndex(f => f.name === column);
+  if (fieldIdx < 0) {
+    return state;
+  }
+  const field = dataset.fields[fieldIdx];
+
+  const newFields = swap_(merge_({displayFormat})(field) as {id: string})(
+    dataset.fields as {id: string}[]
+  );
+  const newDataset = copyTableAndUpdate(dataset, {fields: newFields as Field[]});
+  return pick_('datasets')(merge_({[dataId]: newDataset}))(state);
+}
+
 /**
  * Update editor
  */
diff --git a/src/reducers/src/vis-state.ts b/src/reducers/src/vis-state.ts
index b14166e07d..be17544481 100644
--- a/src/reducers/src/vis-state.ts
+++ b/src/reducers/src/vis-state.ts
@@ -144,6 +144,8 @@ const actionHandler = {
 
   [ActionTypes.COPY_TABLE_COLUMN]: visStateUpdaters.copyTableColumnUpdater,
 
+  [ActionTypes.SET_COLUMN_DISPLAY_FORMAT]: visStateUpdaters.setColumnDisplayFormatUpdater,
+
   [ActionTypes.NEXT_FILE_BATCH]: visStateUpdaters.nextFileBatchUpdater,
 
   [ActionTypes.PROCESS_FILE_CONTENT]: visStateUpdaters.processFileContentUpdater,
diff --git a/src/table/src/kepler-table.ts b/src/table/src/kepler-table.ts
index f22af35f7c..f0083f6603 100644
--- a/src/table/src/kepler-table.ts
+++ b/src/table/src/kepler-table.ts
@@ -218,6 +218,16 @@ class KeplerTable {
     return fieldIdx;
   }
 
+  /**
+   * Get displayFormat
+   * @param columnName
+   */
+  getColumnDisplayFormat(columnName) {
+    const field = this.fields.find(fd => fd[FID_KEY] === columnName);
+    this._assetField(columnName, field);
+    return field?.displayFormat;
+  }
+
   /**
    * Get the value of a cell
    */
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
new file mode 100644
index 0000000000..8d935dc615
--- /dev/null
+++ b/src/types/components.d.ts
@@ -0,0 +1,28 @@
+export type TimeLabelFormat = {
+  id: string;
+  format: string | null;
+  type: string;
+  label: string;
+};
+
+type TooltipFields = {
+  format?: string;
+  id?: string;
+  name?: string;
+  fieldIdx?: number;
+  type?: string;
+};
+
+export type ColMetaProps = {
+  colIdx: number;
+  name: string;
+  displayName: string;
+  type: string;
+  format?: string;
+  columnStats?: any;
+  displayFormat?: string;
+};
+
+export type ColMeta = {
+  [key: string]: ColMetaProps;
+};
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index ecd3d04e89..7d1716dce3 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -3,3 +3,4 @@ export * from './reducers';
 export * from './actions';
 export * from './schemas';
 export * from './types';
+export * from './components';
diff --git a/src/types/layers.d.ts b/src/types/layers.d.ts
index 818af69db5..4c29ff9bab 100644
--- a/src/types/layers.d.ts
+++ b/src/types/layers.d.ts
@@ -68,6 +68,7 @@ export type Field = {
   valueAccessor(v: {index: number}): any;
   filterProps?: any;
   metadata?: any;
+  displayFormat?: string;
 };
 
 export type FieldPair = {
diff --git a/src/utils/src/data-utils.ts b/src/utils/src/data-utils.ts
index 3fa94dd47e..e90bbb71af 100644
--- a/src/utils/src/data-utils.ts
+++ b/src/utils/src/data-utils.ts
@@ -30,7 +30,7 @@ import {format as d3Format} from 'd3-format';
 import {bisectLeft} from 'd3-array';
 import moment from 'moment-timezone';
 
-import {Millisecond, Field} from '@kepler.gl/types';
+import {Millisecond, Field, ColMetaProps} from '@kepler.gl/types';
 
 export type FieldFormatter = (value: any) => string;
 
@@ -296,7 +296,6 @@ export const parseFieldValue = (value: any, type: string): string => {
   if (!notNullorUndefined(value)) {
     return '';
   }
-
   return FIELD_DISPLAY_FORMAT[type] ? FIELD_DISPLAY_FORMAT[type](value) : String(value);
 };
 
@@ -340,6 +339,29 @@ export function getFormatter(
   return defaultFormatter;
 }
 
+export function getColumnFormatter(colMeta: ColMetaProps): FieldFormatter {
+  const {format, displayFormat} = colMeta;
+
+  if (!format && !displayFormat) {
+    return FIELD_DISPLAY_FORMAT[colMeta.type];
+  }
+  const tooltipFormat = Object.values(TOOLTIP_FORMATS).find(f => f[TOOLTIP_KEY] === displayFormat);
+
+  if (tooltipFormat) {
+    return applyDefaultFormat(tooltipFormat);
+  } else if (typeof displayFormat === 'string' && colMeta) {
+    return applyCustomFormat(displayFormat, colMeta);
+  } else if (typeof displayFormat === 'object') {
+    return applyValueMap(displayFormat);
+  }
+
+  return defaultFormatter;
+}
+
+export function applyValueMap(format) {
+  return v => format[v];
+}
+
 export function applyDefaultFormat(tooltipFormat: TooltipFormat): (v: any) => string {
   if (!tooltipFormat || !tooltipFormat.format) {
     return defaultFormatter;
diff --git a/src/utils/src/dataset-utils.ts b/src/utils/src/dataset-utils.ts
index 304f1241e6..c805c6d65f 100644
--- a/src/utils/src/dataset-utils.ts
+++ b/src/utils/src/dataset-utils.ts
@@ -19,13 +19,28 @@
 // THE SOFTWARE.
 
 import {console as globalConsole} from 'global/window';
-import {ALL_FIELD_TYPES} from '@kepler.gl/constants';
+import {
+  ALL_FIELD_TYPES,
+  FIELD_OPTS,
+  TOOLTIP_FORMATS,
+  TOOLTIP_FORMAT_TYPES
+} from '@kepler.gl/constants';
 import {Analyzer, DATA_TYPES as AnalyzerDATA_TYPES} from 'type-analyzer';
 import assert from 'assert';
 
-import {ProcessorResult, RGBColor, RowData, Field, FieldPair} from '@kepler.gl/types';
-
-import {notNullorUndefined, isPlainObject} from './data-utils';
+import {
+  ProcessorResult,
+  RGBColor,
+  RowData,
+  Field,
+  FieldPair,
+  TimeLabelFormat,
+  TooltipFields
+} from '@kepler.gl/types';
+import {TooltipFormat} from '@kepler.gl/constants';
+
+import {notNullorUndefined, isPlainObject, getFormatter} from './data-utils';
+import {getFormatValue} from './format';
 import {range} from 'd3-array';
 import {hexToRgb} from './color-utils';
 
@@ -538,3 +553,27 @@ export function analyzerTypeToFieldType(aType: string): string {
       return ALL_FIELD_TYPES.string;
   }
 }
+
+const TIME_DISPLAY = '2020-05-11 14:00';
+
+const addTimeLabel = (formats: TimeLabelFormat[]) =>
+  formats.map(f => ({
+    ...f,
+    label:
+      f.type === TOOLTIP_FORMAT_TYPES.DATE_TIME || f.type === TOOLTIP_FORMAT_TYPES.DATE
+        ? getFormatter(getFormatValue(f))(TIME_DISPLAY)
+        : f.label
+  }));
+
+export function getFieldFormatLabels(fieldType?: string): TooltipFormat[] {
+  const tooltipTypes = (fieldType && FIELD_OPTS[fieldType].format.tooltip) || [];
+  const formatLabels: TimeLabelFormat[] = Object.values(TOOLTIP_FORMATS).filter(t =>
+    tooltipTypes.includes(t.type)
+  );
+  return addTimeLabel(formatLabels);
+}
+
+export function getFormatLabels(fields: TooltipFields[], fieldName: string) {
+  const fieldType = fields.find(f => f.name === fieldName)?.type;
+  return getFieldFormatLabels(fieldType);
+}
diff --git a/src/utils/src/format.ts b/src/utils/src/format.ts
new file mode 100644
index 0000000000..1655950067
--- /dev/null
+++ b/src/utils/src/format.ts
@@ -0,0 +1,23 @@
+// Copyright (c) 2023 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {TOOLTIP_KEY} from '@kepler.gl/constants';
+
+export const getFormatValue = fmt => fmt[TOOLTIP_KEY];
diff --git a/src/utils/src/index.ts b/src/utils/src/index.ts
index d6e15e932d..3c283718b0 100644
--- a/src/utils/src/index.ts
+++ b/src/utils/src/index.ts
@@ -65,7 +65,8 @@ export {
   getBooleanFormatter,
   applyCustomFormat,
   datetimeFormatter,
-  formatNumber
+  formatNumber,
+  getColumnFormatter
 } from './data-utils';
 export {getTimelineFromAnimationConfig, getTimelineFromFilter} from './time';
 
@@ -77,8 +78,11 @@ export {
   getSampleForTypeAnalyze,
   getFieldsFromData,
   renameDuplicateFields,
-  analyzerTypeToFieldType
+  analyzerTypeToFieldType,
+  getFormatLabels,
+  getFieldFormatLabels
 } from './dataset-utils';
+export {getFormatValue} from './format';
 export {exportMapToHTML} from './export-map-html';
 export {
   DEFAULT_IMAGE_NAME,
diff --git a/test/browser/components/modals/data-table-modal-test.js b/test/browser/components/modals/data-table-modal-test.js
index 96d5cd2b9d..134c93e6ee 100644
--- a/test/browser/components/modals/data-table-modal-test.js
+++ b/test/browser/components/modals/data-table-modal-test.js
@@ -28,6 +28,7 @@ import CloneDeep from 'lodash.clonedeep';
 import {VisStateActions} from '@kepler.gl/actions';
 import {visStateReducer} from '@kepler.gl/reducers';
 
+import {TOOLTIP_FORMATS} from '@kepler.gl/constants';
 import {
   FieldTokenFactory,
   Icons,
@@ -372,12 +373,22 @@ test('Components -> DataTableModal -> render DataTable: csv 1', t => {
   t.end();
 });
 
-test('Components -> DataTableModal -> render DataTable: sort and pin', t => {
+test('Components -> DataTableModal -> render DataTable: sort, pin and display format', t => {
   const initialState = CloneDeep(StateWFiles.visState);
 
+  // set display format
+  const nextState = visStateReducer(
+    initialState,
+    VisStateActions.setColumnDisplayFormat(
+      testCsvDataId,
+      'gps_data.lat',
+      TOOLTIP_FORMATS.DECIMAL_DECIMAL_FIXED_2.format
+    )
+  );
+
   // sort column
   const nextState1 = visStateReducer(
-    initialState,
+    nextState,
     VisStateActions.sortTableColumn(testCsvDataId, 'gps_data.lat')
   );
 
@@ -463,11 +474,12 @@ test('Components -> DataTableModal -> render DataTable: sort and pin', t => {
   t.end();
 });
 
-test('Components -> DatableModal -> sort/pin and copy should be called with the right params', t => {
+test('Components -> DatableModal -> sort/pin/copy and display format should be called with the right params', t => {
   const initialState = CloneDeep(StateWFiles.visState);
   const copyTableColumn = sinon.spy();
   const pinTableColumn = sinon.spy();
   const sortTableColumn = sinon.spy();
+  const setColumnDisplayFormat = sinon.spy();
   const column = 'gps_data.lat';
 
   const wrapper = mountWithTheme(
@@ -477,18 +489,21 @@ test('Components -> DatableModal -> sort/pin and copy should be called with the
       copyTableColumn={copyTableColumn}
       pinTableColumn={pinTableColumn}
       sortTableColumn={sortTableColumn}
+      setColumnDisplayFormat={setColumnDisplayFormat}
     />
   );
 
   const {
     sortTableColumn: testSortColumn,
     pinTableColumn: testPinColumn,
-    copyTableColumn: testCopyColumn
+    copyTableColumn: testCopyColumn,
+    setDisplayFormat: testSetDisplayFormat
   } = wrapper.find('DataTable').props();
 
   testSortColumn(column);
   testPinColumn(column);
   testCopyColumn(column);
+  testSetDisplayFormat(column, TOOLTIP_FORMATS.DECIMAL_DECIMAL_FIXED_2.format);
 
   t.equal(
     sortTableColumn.calledWith(testCsvDataId, column),
@@ -508,6 +523,16 @@ test('Components -> DatableModal -> sort/pin and copy should be called with the
     'should call copyTableColumn with dataId and column gps_data.lat'
   );
 
+  t.equal(
+    setColumnDisplayFormat.calledWith(
+      testCsvDataId,
+      column,
+      TOOLTIP_FORMATS.DECIMAL_DECIMAL_FIXED_2.format
+    ),
+    true,
+    'should call setDisplayFormat with dataId, column gps_data.lat, and format'
+  );
+
   t.end();
 });
 
@@ -563,13 +588,17 @@ test('Components -> cellSize -> renderedSize', t => {
 test('Components -> DataTableModal.render: csv 2', t => {
   const dataContainer = createDataContainer(geoStyleRows, {fields: geoStyleFields});
 
+  // manually set display format on the 5th field: radius (.2~e)
+  const fieldsWithDisplayFormat = geoStyleFields;
+  fieldsWithDisplayFormat[5].displayFormat = TOOLTIP_FORMATS.DECIMAL_SCIENTIFIC_FIXED_2.format;
+
   const wrapper = mountWithTheme(
     <DataTableModal
       datasets={{
         smoothie: {
           id: 'smoothie',
           dataContainer,
-          fields: geoStyleFields,
+          fields: fieldsWithDisplayFormat,
           color: [113, 113, 113],
           data: geoStyleRows
         }
@@ -656,7 +685,7 @@ test('Components -> DataTableModal.render: csv 2', t => {
       '[4,5,6]\t',
       '1\t',
       '10\t',
-      '5\t',
+      '5e+0\t',
       '\n'
     ],
     1: [
@@ -665,7 +694,7 @@ test('Components -> DataTableModal.render: csv 2', t => {
       '[4,5,6]\t',
       '3\t',
       '10\t',
-      '5\t',
+      '5e+0\t',
       '\n'
     ],
     2: [
@@ -674,7 +703,7 @@ test('Components -> DataTableModal.render: csv 2', t => {
       '[4,5,6]\t',
       '4\t',
       '10\t',
-      '5\t',
+      '5e+0\t',
       '\n'
     ]
   };