diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
index 0641b19c6e22a..1ac49381c7ad0 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
@@ -52,7 +52,7 @@ export function InfoTooltipWithTrigger({
       onClick={onClick}
       onKeyPress={
         onClick &&
-        ((event: React.KeyboardEvent) => {
+        (event => {
           if (event.key === 'Enter' || event.key === ' ') {
             onClick();
           }
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Select.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Select.tsx
index 845d54e981fbc..0176dfe993762 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Select.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Select.tsx
@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, ReactNode, ReactElement } from 'react';
-import AntdSelect, { SelectProps as AntdSelectProps, OptionProps } from 'antd/lib/select';
+import React, { useState, ReactNode } from 'react';
+import AntdSelect, { SelectProps as AntdSelectProps } from 'antd/lib/select';
 
 export const { Option } = AntdSelect;
 
@@ -34,12 +34,14 @@ export type SelectProps<VT> = Omit<AntdSelectProps<VT>, 'options'> & {
  */
 export default function Select<VT extends string | number>({
   creatable,
-  children,
   onSearch,
   dropdownMatchSelectWidth = false,
   minWidth = '100%',
   showSearch: showSearch_ = true,
+  onChange,
   options,
+  children,
+  value,
   ...props
 }: SelectProps<VT>) {
   const [searchValue, setSearchValue] = useState<string>();
@@ -56,15 +58,26 @@ export default function Select<VT extends string | number>({
       }
     : undefined;
 
-  const searchValueNotFound = React.Children.toArray(children).every(
-    node => node && (node as ReactElement<OptionProps>).props.value !== searchValue,
-  );
+  const optionsHasSearchValue = options?.some(([val]) => val === searchValue);
+  const optionsHasValue = options?.some(([val]) => val === value);
+
+  const handleChange: SelectProps<VT>['onChange'] = showSearch
+    ? (val, opt) => {
+        // reset input value once selected
+        setSearchValue('');
+        if (onChange) {
+          onChange(val, opt);
+        }
+      }
+    : onChange;
 
   return (
     <AntdSelect<VT>
       dropdownMatchSelectWidth={dropdownMatchSelectWidth}
       showSearch={showSearch}
       onSearch={handleSearch}
+      onChange={handleChange}
+      value={value}
       {...props}
       css={{
         minWidth,
@@ -74,7 +87,12 @@ export default function Select<VT extends string | number>({
         <Option value={val}>{label}</Option>
       ))}
       {children}
-      {searchValue && searchValueNotFound && (
+      {value && !optionsHasValue && (
+        <Option key={value} value={value}>
+          {value}
+        </Option>
+      )}
+      {searchValue && !optionsHasSearchValue && (
         <Option key={searchValue} value={searchValue}>
           {/* Unfortunately AntD select does not support displaying different
           label for option vs select value, so we can't use
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
index 7669977f5d613..497526dc36429 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
@@ -34,98 +34,116 @@ export type SharedColumnConfigProp =
   | 'columnWidth'
   | 'fractionDigits'
   | 'd3NumberFormat'
+  | 'd3SmallNumberFormat'
   | 'd3TimeFormat'
   | 'horizontalAlign'
   | 'showCellBars';
 
-/**
- * All configurable column formatting properties.
- */
-export const SHARED_COLUMN_CONFIG_PROPS = {
-  d3NumberFormat: {
-    controlType: 'Select',
-    label: t('D3 format'),
-    description: D3_FORMAT_DOCS,
-    options: D3_FORMAT_OPTIONS,
-    defaultValue: D3_FORMAT_OPTIONS[0][0],
-    creatable: true,
-    minWidth: '10em',
-    debounceDelay: 400,
-  } as ControlFormItemSpec<'Select'>,
+const d3NumberFormat: ControlFormItemSpec<'Select'> = {
+  controlType: 'Select',
+  label: t('D3 format'),
+  description: D3_FORMAT_DOCS,
+  options: D3_FORMAT_OPTIONS,
+  defaultValue: D3_FORMAT_OPTIONS[0][0],
+  creatable: true,
+  minWidth: '14em',
+  debounceDelay: 500,
+};
 
-  d3TimeFormat: {
-    controlType: 'Select',
-    label: t('D3 format'),
-    description: D3_TIME_FORMAT_DOCS,
-    options: D3_TIME_FORMAT_OPTIONS,
-    defaultValue: D3_TIME_FORMAT_OPTIONS[0][0],
-    creatable: true,
-    minWidth: '10em',
-    debounceDelay: 400,
-  } as ControlFormItemSpec<'Select'>,
+const d3TimeFormat: ControlFormItemSpec<'Select'> = {
+  controlType: 'Select',
+  label: t('D3 format'),
+  description: D3_TIME_FORMAT_DOCS,
+  options: D3_TIME_FORMAT_OPTIONS,
+  defaultValue: D3_TIME_FORMAT_OPTIONS[0][0],
+  creatable: true,
+  minWidth: '10em',
+  debounceDelay: 500,
+};
 
-  fractionDigits: {
-    controlType: 'Slider',
-    label: t('Fraction digits'),
-    description: t('Number of decimal digits to round numbers to'),
-    min: 0,
-    step: 1,
-    max: 100,
-    defaultValue: 100,
-  } as ControlFormItemSpec<'Slider'>,
+const fractionDigits: ControlFormItemSpec<'Slider'> = {
+  controlType: 'Slider',
+  label: t('Fraction digits'),
+  description: t('Number of decimal digits to round numbers to'),
+  min: 0,
+  step: 1,
+  max: 100,
+  defaultValue: 100,
+};
 
-  columnWidth: {
-    controlType: 'InputNumber',
-    label: t('Width'),
-    description: t(
-      'Default column width in pixels, may still be restricted by the shortest/longest word in the column',
-    ),
-    width: 120,
-    placeholder: 'auto',
-    debounceDelay: 400,
-    validators: [validateNumber],
-  } as ControlFormItemSpec<'InputNumber'>,
+const columnWidth: ControlFormItemSpec<'InputNumber'> = {
+  controlType: 'InputNumber',
+  label: t('Width'),
+  description: t(
+    'Default column width in pixels, may still be restricted by the shortest/longest word in the column',
+  ),
+  width: 120,
+  placeholder: 'auto',
+  debounceDelay: 400,
+  validators: [validateNumber],
+};
 
-  horizontalAlign: {
-    controlType: 'RadioButtonControl',
-    label: t('Text align'),
-    description: t('Horizontal alignment'),
-    width: 130,
-    debounceDelay: 50,
-    defaultValue: 'left',
-    options: [
-      ['left', <FaAlignLeft title={t('Left')} />],
-      ['center', <FaAlignCenter title={t('Center')} />],
-      ['right', <FaAlignRight title={t('Right')} />],
-    ],
-  } as ControlFormItemSpec<'RadioButtonControl'> & {
-    value: 'left' | 'right' | 'center';
-    defaultValue: 'left' | 'right' | 'center';
-  },
+const horizontalAlign: ControlFormItemSpec<'RadioButtonControl'> & {
+  value?: 'left' | 'right' | 'center';
+  defaultValue?: 'left' | 'right' | 'center';
+} = {
+  controlType: 'RadioButtonControl',
+  label: t('Text align'),
+  description: t('Horizontal alignment'),
+  width: 130,
+  debounceDelay: 50,
+  defaultValue: 'left',
+  options: [
+    ['left', <FaAlignLeft title={t('Left')} />],
+    ['center', <FaAlignCenter title={t('Center')} />],
+    ['right', <FaAlignRight title={t('Right')} />],
+  ],
+};
+
+const showCellBars: ControlFormItemSpec<'Checkbox'> = {
+  controlType: 'Checkbox',
+  label: t('Show cell bars'),
+  description: t('Whether to display a bar chart background in table columns'),
+  defaultValue: true,
+  debounceDelay: 200,
+};
 
-  showCellBars: {
-    controlType: 'Checkbox',
-    label: t('Show cell bars'),
-    description: t('Whether to display a bar chart background in table columns'),
-    defaultValue: true,
-    debounceDelay: 200,
-  } as ControlFormItemSpec<'Checkbox'>,
+const alignPositiveNegative: ControlFormItemSpec<'Checkbox'> = {
+  controlType: 'Checkbox',
+  label: t('Align +/-'),
+  description: t('Whether to align positive and negative values in cell bar chart at 0'),
+  defaultValue: false,
+  debounceDelay: 200,
+};
 
-  alignPositiveNegative: {
-    controlType: 'Checkbox',
-    label: t('Align +/-'),
-    description: t('Whether to align positive and negative values in cell bar chart at 0'),
-    defaultValue: false,
-    debounceDelay: 200,
-  } as ControlFormItemSpec<'Checkbox'>,
+const colorPositiveNegative: ControlFormItemSpec<'Checkbox'> = {
+  controlType: 'Checkbox',
+  label: t('Color +/-'),
+  description: t('Whether to colorize numeric values by if they are positive or negative'),
+  defaultValue: false,
+  debounceDelay: 200,
+};
 
-  colorPositiveNegative: {
-    controlType: 'Checkbox',
-    label: t('Color +/-'),
-    description: t('Whether to colorize numeric values by if they are positive or negative'),
-    defaultValue: false,
-    debounceDelay: 200,
-  } as ControlFormItemSpec<'Checkbox'>,
+/**
+ * All configurable column formatting properties.
+ */
+export const SHARED_COLUMN_CONFIG_PROPS = {
+  d3NumberFormat,
+  d3SmallNumberFormat: {
+    ...d3NumberFormat,
+    label: t('Small number format'),
+    description: t(
+      'D3 number format for numbers between -1.0 and 1.0, ' +
+        'useful when you want to have different siginificant digits for small and large numbers',
+    ),
+  },
+  d3TimeFormat,
+  fractionDigits,
+  columnWidth,
+  horizontalAlign,
+  showCellBars,
+  alignPositiveNegative,
+  colorPositiveNegative,
 };
 
 export type SharedColumnConfig = {
@@ -139,7 +157,7 @@ export const DEFAULT_CONFIG_FORM_LAYOUT: ColumnConfigFormLayout = {
   [GenericDataType.NUMERIC]: [
     ['columnWidth', { name: 'horizontalAlign', override: { defaultValue: 'right' } }],
     ['d3NumberFormat'],
-    ['fractionDigits'],
+    ['d3SmallNumberFormat'],
     ['alignPositiveNegative', 'colorPositiveNegative'],
     ['showCellBars'],
   ],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/TableStories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/TableStories.tsx
index cfca83577b616..c980f61dfc2b9 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/TableStories.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/TableStories.tsx
@@ -78,7 +78,7 @@ export const basic = ({ width, height }) => (
     }}
     width={width}
     height={height}
-    queriesData={[{ data: basicData }]}
+    queriesData={[basicData]}
     formData={basicFormData}
   />
 );
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
index 2c3582ae6190c..c02ce8c2161f2 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
@@ -16,28 +16,38 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { TableChartProps } from '@superset-ui/plugin-chart-table/src';
+import { ChartDataResponseResult, GenericDataType } from '@superset-ui/core/src';
+import { TableChartFormData, TableChartProps } from '@superset-ui/plugin-chart-table/src';
 // @ts-ignore
 // eslint-disable-next-line import/extensions
 import birthNamesJson from './birthNames.json';
 
 export const birthNames = (birthNamesJson as unknown) as TableChartProps;
-export const basicFormData = {
-  alignPn: false,
-  colorPn: false,
-  includeSearch: false,
+
+export const basicFormData: TableChartFormData = {
+  datasource: '1__table',
+  viz_type: 'table',
+  align_pn: false,
+  color_pn: false,
+  include_search: true,
   metrics: ['sum__num', 'MAX(ds)'],
-  orderDesc: true,
-  pageLength: 0,
-  percentMetrics: null,
-  showCellBars: true,
-  tableFilter: false,
-  tableTimestampFormat: 'smart_date',
-  timeseriesLimitMetric: null,
+  order_desc: true,
+  page_length: 0,
+  percent_metrics: null,
+  show_cell_bars: true,
+  table_filter: false,
+  table_timestamp_format: 'smart_date',
 };
-export const basicData = {
-  columns: ['name', 'sum__num', 'MAX(ds)', 'Abc.com'],
-  records: [
+
+export const basicData: Partial<ChartDataResponseResult> = {
+  colnames: ['name', 'sum__num', 'MAX(ds)', 'Abc.com'],
+  coltypes: [
+    GenericDataType.STRING,
+    GenericDataType.NUMERIC,
+    GenericDataType.TEMPORAL,
+    GenericDataType.STRING,
+  ],
+  data: [
     {
       name: 'Michael',
       sum__num: 2467063,
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx
index fc1e6d302fe58..09414d291a428 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx
@@ -20,7 +20,14 @@ import React, { useState, useMemo, useCallback, CSSProperties } from 'react';
 import { ColumnInstance, DefaultSortTypes, ColumnWithLooseAccessor } from 'react-table';
 import { extent as d3Extent, max as d3Max } from 'd3-array';
 import { FaSort, FaSortUp as FaSortAsc, FaSortDown as FaSortDesc } from 'react-icons/fa';
-import { t, tn, DataRecordValue, DataRecord, GenericDataType } from '@superset-ui/core';
+import {
+  t,
+  tn,
+  DataRecordValue,
+  DataRecord,
+  GenericDataType,
+  getNumberFormatter,
+} from '@superset-ui/core';
 
 import { TableChartTransformedProps, DataColumnMeta } from './types';
 import DataTable, {
@@ -213,7 +220,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
   const getColumnConfigs = useCallback(
     (column: DataColumnMeta, i: number): ColumnWithLooseAccessor<D> => {
-      const { key, label, dataType, isMetric, config = {} } = column;
+      const { key, label, dataType, isMetric, formatter, config = {} } = column;
       const isNumber = dataType === GenericDataType.NUMERIC;
       const isFilter = !isNumber && emitFilter;
       const textAlign = config.horizontalAlign
@@ -228,7 +235,10 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         config.alignPositiveNegative === undefined ? defaultAlignPN : config.alignPositiveNegative;
       const colorPositiveNegative =
         config.colorPositiveNegative === undefined ? defaultColorPN : config.colorPositiveNegative;
-      const fractionDigits = isNumber ? config.fractionDigits : undefined;
+      const smallNumberFormatter =
+        config.d3SmallNumberFormat === undefined
+          ? formatter
+          : getNumberFormatter(config.d3SmallNumberFormat);
 
       const valueRange =
         (config.showCellBars === undefined ? showCellBars : config.showCellBars) &&
@@ -247,11 +257,12 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         // so we ask TS not to check.
         accessor: ((datum: D) => datum[key]) as never,
         Cell: ({ value }: { column: ColumnInstance<D>; value: DataRecordValue }) => {
-          let rounded = value;
-          if (fractionDigits !== undefined && typeof value === 'number') {
-            rounded = Number(value.toFixed(fractionDigits));
-          }
-          const [isHtml, text] = formatValue(column, rounded);
+          const [isHtml, text] = formatValue(
+            isNumber && typeof value === 'number' && Math.abs(value) < 1
+              ? smallNumberFormatter
+              : formatter,
+            value,
+          );
           const html = isHtml ? { __html: text } : undefined;
           const style: CSSProperties = {
             background: valueRange
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts
index 9ffb3cab73579..a227e0c458a7f 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts
@@ -43,12 +43,11 @@ export default class DateWithFormatter extends Date {
 
     this.input = input;
     this.formatter = formatter;
-  }
-
-  toString(): string {
-    if (this.formatter === String) {
-      return String(this.input);
-    }
-    return this.formatter ? this.formatter(this) : Date.toString.call(this);
+    this.toString = (): string => {
+      if (this.formatter === String) {
+        return String(this.input);
+      }
+      return this.formatter ? this.formatter(this) : Date.toString.call(this);
+    };
   }
 }
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/formatValue.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/formatValue.ts
index 23386841a9ff4..c35d1f3a0bf14 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/formatValue.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/formatValue.ts
@@ -39,7 +39,7 @@ function isProbablyHTML(text: string) {
  * Format text for cell value.
  */
 export default function formatValue(
-  { formatter }: DataColumnMeta,
+  formatter: DataColumnMeta['formatter'],
   value: DataRecordValue,
 ): [boolean, string] {
   if (value === null) {