@cdc/core 4.24.3 → 4.24.5

package/assets/icon-command.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false" role="img" fill="currentColor">
+    <path d="M404.83356,297.97872H354.67715V214.177h50.15641a107.08854,107.08854,0,1,0,0-214.177C345.64284,0,297.51145,47.97571,297.82294,107.01074v50.46778H214.33287V107.01074A107.09452,107.09452,0,0,0,107.32225,0C47.97572,0,0,47.97571,0,107.01074c0,59.3464,48.28721,107.6336,107.32225,107.16629h50.15628v83.80169H107.32225C47.97572,297.97872,0,345.79862,0,404.83352a107.16644,107.16644,0,1,0,214.33287,0V354.83291h83.49007v50.00061a107.08879,107.08879,0,1,0,107.01062-106.8548ZM354.67715,106.85493a50.2348,50.2348,0,1,1,50.0006,50.46791h-50.0006ZM157.47853,404.83352a50.2348,50.2348,0,1,1-50.0006-50.00061h50.0006Zm0-247.51068h-50.0006a50.2348,50.2348,0,1,1,50.0006-50.46791ZM297.97862,297.97872H214.33287V214.33285h83.64575Zm106.69913,157.3227a50.15888,50.15888,0,0,1-50.0006-50.4679V354.83291h50.0006a50.2348,50.2348,0,1,1,0,100.46851Z"/>
+</svg>

package/assets/icon-rotate-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false" role="img" fill="currentColor">
+    <path d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"/>
+</svg>

package/components/AdvancedEditor.jsx

@@ -51,6 +51,15 @@ export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
             <p className='pb-2'>
               This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
             </p>
+            <button
+              className='btn'
+              onClick={() => {
+                navigator.clipboard.writeText(configTextboxValue)
+                alert('Copied!')
+              }}
+            >
+              Copy to Clipboard
+            </button>
             <textarea value={configTextboxValue} onChange={event => setConfigTextbox(event.target.value)} />
             <button className='btn full-width' onClick={() => loadConfig(JSON.parse(configTextboxValue))}>
               Apply

package/components/DataTable/DataTable.tsx

@@ -16,7 +16,7 @@ import Table from '../Table'
 import chartCellMatrix from './helpers/chartCellMatrix'
 import regionCellMatrix from './helpers/regionCellMatrix'
 import boxplotCellMatrix from './helpers/boxplotCellMatrix'
-import customColumns from './helpers/customColumns'
+import removeNullColumns from './helpers/removeNullColumns'
 import { TableConfig } from './types/TableConfig'
 import { Column } from '../../types/Column'
 
@@ -44,7 +44,7 @@ export type DataTableProps = {
   showDownloadButton?: boolean
   tabbingId: string
   tableTitle: string
-  viewport: string
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   vizTitle?: string
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
@@ -52,7 +52,8 @@ export type DataTableProps = {
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
-  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
+  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData: parentRuntimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
+  const runtimeData = removeNullColumns(parentRuntimeData)
   const [expanded, setExpanded] = useState(expandDataTable)
 
   const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
@@ -98,25 +99,23 @@ const DataTable = (props: DataTableProps) => {
       break
   }
 
-  const _runtimeData = config.table.customTableConfig ? customColumns(rawData, config.table.excludeColumns) : runtimeData
-
-  const rawRows = Object.keys(_runtimeData).filter(column => column != 'columns')
+  const rawRows = Object.keys(runtimeData).filter(column => column != 'columns')
   const rows = isVertical
     ? rawRows.sort((a, b) => {
         let dataA
         let dataB
         if (config.type === 'map' && config.columns) {
           const sortByColName = config.columns[sortBy.column].name
-          dataA = _runtimeData[a][sortByColName]
-          dataB = _runtimeData[b][sortByColName]
+          dataA = runtimeData[a][sortByColName]
+          dataB = runtimeData[b][sortByColName]
         }
         if (config.type === 'chart' || config.type === 'dashboard') {
-          dataA = _runtimeData[a][sortBy.column]
-          dataB = _runtimeData[b][sortBy.column]
+          dataA = runtimeData[a][sortBy.column]
+          dataB = runtimeData[b][sortBy.column]
         }
         if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
-          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(_runtimeData[a][config.xAxis.dataKey])
-          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(_runtimeData[b][config.xAxis.dataKey])
+          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
+          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
         }
         return dataA && dataB ? customSort(dataA, dataB, sortBy, config) : 0
       })
@@ -185,22 +184,25 @@ const DataTable = (props: DataTableProps) => {
         </MediaControls.Section>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          {config.table.collapsible !== false && <ExpandCollapse expanded={expanded} setExpanded={setExpanded} fontSize={config.fontSize} tableTitle={tableTitle} viewport={viewport} />}
           <div className='table-container' style={limitHeight}>
             <Table
+              viewport={viewport}
               wrapColumns={wrapColumns}
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData }) : chartCellMatrix({ rows, ...props, runtimeData: _runtimeData, isVertical, sortBy, hasRowType })}
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport }) : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })}
               tableName={config.type}
               caption={caption}
               stickyHeader
               hasRowType={hasRowType}
-              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={_runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
+              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
               tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${isVertical ? '' : ' horizontal'}`, 'aria-live': 'assertive', 'aria-rowcount': config?.data?.length ? config.data.length : -1, hidden: !expanded }}
+              fontSize={config.fontSize}
             />
 
             {/* REGION Data Table */}
             {noRelativeRegions && config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
               <Table
+                viewport={viewport}
                 wrapColumns={wrapColumns}
                 childrenMatrix={regionCellMatrix({ config })}
                 tableName={config.visualizationType}
@@ -213,6 +215,7 @@ const DataTable = (props: DataTableProps) => {
                   </tr>
                 }
                 tableOptions={{ className: 'region-table data-table' }}
+                fontSize={config.fontSize}
               />
             )}
           </div>
@@ -231,6 +234,7 @@ const DataTable = (props: DataTableProps) => {
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
+              viewport={viewport}
               wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
               tableName={config.visualizationType}
@@ -238,6 +242,7 @@ const DataTable = (props: DataTableProps) => {
               stickyHeader
               headContent={<BoxplotHeader categories={config.boxplot.categories} />}
               tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`, 'aria-live': 'assertive', 'aria-rowcount': 11, hidden: !expanded }}
+              fontSize={config.fontSize}
             />
           </div>
         </section>

package/components/DataTable/DataTableStandAlone.tsx

@@ -1,15 +1,62 @@
+import { useEffect, useState } from 'react'
 import { ViewPort } from '../../types/ViewPort'
-import { Visualization } from '../../types/Visualization'
+import EditorWrapper from '../EditorWrapper/EditorWrapper'
 import DataTable from './DataTable'
+import DataTableEditorPanel from './components/DataTableEditorPanel'
+import Filters from '../Filters'
+import { TableConfig } from './types/TableConfig'
 
 type StandAloneProps = {
   visualizationKey: string
-  config: Visualization
+  config: TableConfig
   viewport?: ViewPort
+  isEditor?: boolean
+  updateConfig?: (Visualization) => void
 }
 
-const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport }) => {
-  return <DataTable expandDataTable={true} config={config} rawData={config.data} runtimeData={config.formattedData} tabbingId={visualizationKey} tableTitle={config.table.label} viewport={viewport || 'lg'} />
+// filterData is copied from ./packages/chart/src/helpers/filterData.ts
+// consider moving this to a shared location
+const filterData = (filters, data) => {
+  if (!filters) return data
+  const filteredData: any[] = []
+
+  data.forEach(row => {
+    let add = true
+    filters
+      .filter(filter => filter.type !== 'url')
+      .forEach(filter => {
+        if (row[filter.columnName] != filter.active) {
+          add = false
+        }
+      })
+
+    if (add) filteredData.push(row)
+  })
+
+  return filteredData
+}
+
+const DataTableStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, updateConfig, viewport, isEditor }) => {
+  const [filteredData, setFilteredData] = useState<Record<string, any>[]>(filterData(config.filters, config.formattedData))
+
+  useEffect(() => {
+    // when using editor changes to filter should update the data
+    setFilteredData(filterData(config.filters, config.formattedData))
+  }, [config.filters])
+
+  if (isEditor)
+    return (
+      <EditorWrapper component={DataTableStandAlone} visualizationKey={visualizationKey} visualizationConfig={config} updateConfig={updateConfig} type={'Table'} viewport={viewport}>
+        <DataTableEditorPanel key={visualizationKey} config={config} updateConfig={updateConfig} />
+      </EditorWrapper>
+    )
+
+  return (
+    <>
+      <Filters config={config} setConfig={updateConfig} setFilteredData={setFilteredData} filterData={filterData} filteredData={filteredData} excludedData={config.formattedData} />
+      <DataTable expandDataTable={true} config={config} rawData={config.data} runtimeData={filteredData} tabbingId={visualizationKey} tableTitle={config.table.label} viewport={viewport || 'lg'} />
+    </>
+  )
 }
 
 export default DataTableStandAlone

package/components/DataTable/components/ChartHeader.tsx

@@ -4,9 +4,10 @@ import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
 import { DownIcon, UpIcon } from './Icons'
 import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 
-type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; groupBy?; hasRowType? }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType? }
 
-const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, hasRowType }: ChartHeaderProps) => {
+const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }: ChartHeaderProps) => {
+  const groupBy = config.table?.groupBy
   if (!data) return
   let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
   if (groupBy) {

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -4,6 +4,8 @@ import { Visualization } from '@cdc/core/types/Visualization'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { useMemo } from 'react'
 import ColumnsEditor from '../../EditorPanel/ColumnsEditor'
+import VizFilterEditor from '../../EditorPanel/VizFilterEditor'
+import _ from 'lodash'
 
 type DataTableEditorProps = {
   config: Visualization
@@ -13,7 +15,7 @@ type DataTableEditorProps = {
 const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateConfig }) => {
   const updateField = useMemo(() => updateFieldFactory(config, updateConfig), [JSON.stringify(config)])
   const deleteColumn = columnName => {
-    const newColumns = config.columns
+    const newColumns = _.cloneDeep(config.columns)
 
     delete newColumns[columnName]
 
@@ -23,10 +25,25 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
     })
   }
 
-  const columns = Object.keys(config.columns || {})
+  const columns = Object.keys(config.originalFormattedData[0] || {})
   return (
     <>
-      <ColumnsEditor config={config} updateField={updateField} deleteColumn={deleteColumn} />
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Filters</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <VizFilterEditor config={config} updateField={updateField} rawData={config.originalFormattedData} />
+        </AccordionItemPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Columns</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <ColumnsEditor config={config} updateField={updateField} deleteColumn={deleteColumn} />
+        </AccordionItemPanel>
+      </AccordionItem>
       <AccordionItem>
         <AccordionItemHeading>
           <AccordionItemButton>Data Table</AccordionItemButton>

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,21 +1,27 @@
 import Icon from '../../ui/Icon'
 
-const ExpandCollapse = ({ expanded, setExpanded, tableTitle }) => (
-  <div
-    className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-    onClick={() => {
-      setExpanded(!expanded)
-    }}
-    tabIndex={0}
-    onKeyDown={e => {
-      if (e.keyCode === 13) {
+const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
+  const fontSizes = { small: 16, medium: 18, large: 20 }
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
+  return (
+    <div
+      style={{ fontSize: titleFontSize }}
+      role='button'
+      className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+      onClick={() => {
         setExpanded(!expanded)
-      }
-    }}
-  >
-    <Icon display={expanded ? 'minus' : 'plus'} base />
-    {tableTitle}
-  </div>
-)
+      }}
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.keyCode === 13) {
+          setExpanded(!expanded)
+        }
+      }}
+    >
+      <Icon display={expanded ? 'minus' : 'plus'} base />
+      {tableTitle}
+    </div>
+  )
+}
 
 export default ExpandCollapse

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -15,7 +15,8 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType, viewport }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+  const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
   const dataSeriesColumnsSorted = () => {
@@ -79,7 +80,7 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
         config.visualizationType !== 'Pie'
           ? [
               <>
-                {colorScale && colorScale(seriesName) && <LegendCircle fill={colorScale(seriesName)} />}
+                {colorScale && colorScale(seriesName) && <LegendCircle viewport={viewport} fill={colorScale(seriesName)} />}
                 {seriesName}
               </>
             ]

package/components/DataTable/helpers/getChartCellValue.ts

@@ -25,7 +25,7 @@ const isAdditionalColumn = (column, config) => {
 }
 
 export const getChartCellValue = (row: string, column: string, config: TableConfig, runtimeData: Object[]) => {
-  if (config.table.customTableConfig || config.visualizationType === 'Sankey' || runtimeData?.[0]?.tableData) return runtimeData[row][column]
+  if (config.visualizationType === 'Sankey' || runtimeData?.[0]?.tableData) return runtimeData[row][column]
 
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
@@ -54,5 +54,25 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     }
   }
 
+  // suppress cell value
+  config.preliminaryData?.forEach(pd => {
+    // check entered suppression value against cell value
+    const isValueMatch = String(pd.value) === String(labelValue)
+    // check entered suppression column against table key
+    const isColumnMatch = !pd.column || pd.column === column
+    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression') {
+      switch (config.visualizationType) {
+        case 'Combo':
+          cellValue = config.runtime.barSeriesKeys.includes(column) ? pd.iconCode : config.runtime.lineSeriesKeys.includes(column) ? pd.lineCode : ''
+          break
+        case 'Bar':
+          cellValue = pd.iconCode
+          break
+        case 'Line':
+          cellValue = pd.lineCode
+          break
+      }
+    }
+  })
   return cellValue
 }

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -1,14 +1,13 @@
 import { TableConfig } from '../types/TableConfig'
+import _ from 'lodash'
+import { Column } from '../../../types/Column'
 
 export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, runtimeData: Object[]): string[] => {
-  if (config.table.customTableConfig) return runtimeData[0] ? Object.keys(runtimeData[0]) : []
-  if (config.type === 'table') {
-    const excludeColumns = Object.values(config.columns)
-      .filter(column => column.dataTable === false)
-      .map(column => column.name)
-    return Object.keys(runtimeData[0]).filter(columnName => !excludeColumns.includes(columnName))
-  }
-  let tmpSeriesColumns
+  const configColumns: Record<string, Column> = _.cloneDeep(config.columns) || {}
+  const excludeColumns = Object.values(configColumns)
+    .filter(column => column.dataTable === false)
+    .map(column => column.name)
+  let tmpSeriesColumns: string[] = []
   if (config.visualizationType !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll
     if (config.series) {
@@ -23,15 +22,37 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
   }
 
   // then add the additional Columns
-  if (config.columns && Object.keys(config.columns).length > 0) {
-    Object.keys(config.columns).forEach(function (key) {
-      var value = config.columns[key]
-      // add if not the index AND it is enabled to be added to data table
-      if (value.name !== config.xAxis?.dataKey && value.dataTable === true) {
-        tmpSeriesColumns.push(value.name)
+  Object.keys(configColumns).forEach(function (key) {
+    var value = configColumns[key]
+    // add if not the index AND it is enabled to be added to data table
+    const alreadyAdded = tmpSeriesColumns.includes(value.name)
+    if (value.name !== config.xAxis?.dataKey && value.dataTable === true && !alreadyAdded) {
+      tmpSeriesColumns.push(value.name)
+    }
+  })
+
+  const columnOrderingHash = Object.values(configColumns).reduce((acc, column) => {
+    // subtract 1 to switch from cardinal positioning to index
+    if (column.order !== undefined) {
+      acc[column.name] = column.order - 1
+    }
+    return acc
+  }, {})
+
+  tmpSeriesColumns = tmpSeriesColumns.filter(columnName => !excludeColumns.includes(columnName))
+
+  tmpSeriesColumns.forEach((columnName, index) => {
+    if (columnOrderingHash[columnName] === undefined) {
+      if (Object.values(columnOrderingHash).includes(index)) {
+        // add 1 to place unsorted columns behind sorted columns
+        columnOrderingHash[columnName] = index + 1
+      } else {
+        columnOrderingHash[columnName] = index
       }
-    })
-  }
+    }
+  })
+
+  tmpSeriesColumns.sort((a, b) => columnOrderingHash[a] - columnOrderingHash[b])
 
   return tmpSeriesColumns
 }

package/components/DataTable/helpers/getSeriesName.ts

@@ -17,5 +17,6 @@ export const getSeriesName = (column: string, config: TableConfig) => {
   }
   if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
   const columnIsDataKey = column === config.xAxis?.dataKey
-  return columnIsDataKey ? config.table.indexLabel : getLabel(column, config)
+  const indexLabel = config.table?.indexLabel
+  return columnIsDataKey && indexLabel ? indexLabel : getLabel(column, config)
 }

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -7,7 +7,7 @@ type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
+const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode, viewport }: MapRowsProps): ReactNode[][] => {
   return rows.map(row =>
     Object.keys(columns)
       .filter(column => columns[column].dataTable === true && columns[column].name)
@@ -31,7 +31,7 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           }
           cellValue = (
             <div className='col-12'>
-              <LegendCircle fill={legendColor[0]} />
+              <LegendCircle viewport={viewport} fill={legendColor[0]} />
               <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
             </div>
           )

package/components/DataTable/helpers/{customColumns.ts → removeNullColumns.ts}

@@ -1,7 +1,7 @@
 type RuntimeData = Object[] & Record<string, Object>
 
 // removes null and excluded columns
-const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: string[] = []): RuntimeData => {
+const removeNullColumns = (runtimeData: Object[] | RuntimeData): RuntimeData => {
   if (!Array.isArray(runtimeData)) {
     // currently we don't support Record types
     return runtimeData
@@ -10,7 +10,7 @@ const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: stri
     runtimeData.forEach(row => {
       Object.keys(row).forEach(key => {
         if (runtimeDataMemo[key] === undefined) runtimeDataMemo[key] = null
-        if (row[key] !== null && !excludeColumns.includes(key)) runtimeDataMemo[key] = true
+        if (row[key] !== null) runtimeDataMemo[key] = true
       })
     })
     return runtimeData.map(d => {
@@ -24,4 +24,4 @@ const customColumns = (runtimeData: Object[] | RuntimeData, excludeColumns: stri
   }
 }
 
-export default customColumns
+export default removeNullColumns

package/components/DataTable/types/TableConfig.ts

@@ -1,27 +1,17 @@
-import { Axis } from '@cdc/core/types/Axis'
-import { Series } from '@cdc/core/types/Series'
-import { Runtime } from '@cdc/core/types/Runtime'
-import { Table } from '@cdc/core/types/Table'
-import { Region } from '@cdc/core/types/Region'
+import { Axis } from '../../../types/Axis'
+import { Runtime } from '../../../types/Runtime'
+import { Region } from '../../../types/Region'
 import { BoxPlot } from '../../../types/BoxPlot'
-import { General } from '../../../types/General'
-import { Column } from '../../../types/Column'
-import { Legend } from '@cdc/core/types/Legend'
+import { PreliminaryDataItem } from '@cdc/chart/src/components/LineChart/LineChartProps'
+import { Visualization } from '../../../types/Visualization'
 
-export type TableConfig = {
-  type?: string
-  table: Table
-  xAxis?: Axis
-  yAxis?: Axis
+export type TableConfig = Visualization & {
   boxplot?: BoxPlot
-  visualizationType: string
-  general?: General
-  columns?: Record<string, Column>
-  legend?: Legend
-  series?: Series
+  fontSize: 'small' | 'medium' | 'large'
   regions?: Region[]
-  runtimeSeriesLabels?: Object
-  dataFormat?: Object
   runtime?: Runtime
-  data: Object[]
+  runtimeSeriesLabels?: Object
+  xAxis?: Axis
+  yAxis?: Axis
+  preliminaryData: PreliminaryDataItem[]
 }