diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts index 777d5f2a4e434..586b5b7a55931 100644 --- a/superset-frontend/src/constants.ts +++ b/superset-frontend/src/constants.ts @@ -98,3 +98,8 @@ export const FAST_DEBOUNCE = 250; * Slower debounce delay for inputs with expensive API calls. */ export const SLOW_DEBOUNCE = 500; + +/** + * Display null as `N/A` + */ +export const NULL_DISPLAY = 'N/A'; diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index d2befa7b0bae1..c94c07cb74fd9 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -36,6 +36,7 @@ import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY, SLOW_DEBOUNCE, + NULL_DISPLAY, } from 'src/constants'; import { Radio } from 'src/components/Radio'; import Icons from 'src/components/Icons'; @@ -49,6 +50,10 @@ import { unsetTimeFormattedColumn, } from 'src/explore/actions/exploreActions'; +export const CellNull = styled('span')` + color: ${({ theme }) => theme.colors.grayscale.light1}; +`; + export const CopyButton = styled(Button)` font-size: ${({ theme }) => theme.typography.sizes.s}px; @@ -303,6 +308,9 @@ export const useTableColumns = ( if (value === false) { return BOOL_FALSE_DISPLAY; } + if (value === null) { + return {NULL_DISPLAY}; + } if (timeFormattedColumnIndex > -1) { return timeFormatter(value); }