@cdc/core 4.23.11 → 4.24.2

package/components/DataTable/DataTable.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useMemo } from 'react'
+import { timeParse } from 'd3-time-format'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -15,12 +16,14 @@ 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 { TableConfig } from './types/TableConfig'
+import { Column } from '../../types/Column'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
   colorScale?: Function
-  columns?: { navigate: { name: string } }
+  columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
   displayDataAsText?: Function
@@ -29,20 +32,27 @@ export type DataTableProps = {
   formatLegendLocation?: Function
   groupBy?: string
   headerColor?: string
+  imageRef?: string
   indexTitle?: string
+  isDebug?: boolean
+  isEditor?: boolean
   navigationHandler?: Function
+  outerContainerRef?: Function
   rawData: Object[]
   runtimeData: Object[] | Record<string, Object> // UNSAFE
   setFilteredCountryCode?: Function // used for Maps only
+  showDownloadButton?: boolean
   tabbingId: string
   tableTitle: string
   viewport: string
   vizTitle?: string
+  // determines if columns should be wrapped in the table
+  wrapColumns?: boolean
 }
 
 /* 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 } = props
+  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
 
   const [expanded, setExpanded] = useState(expandDataTable)
 
@@ -89,19 +99,25 @@ const DataTable = (props: DataTableProps) => {
       break
   }
 
-  const rawRows = Object.keys(runtimeData)
+  const _runtimeData = config.table.customTableConfig ? customColumns(rawData, config.table.excludeColumns) : runtimeData
+
+  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' && config.xAxis.sortDates) {
+          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
       })
@@ -112,6 +128,8 @@ const DataTable = (props: DataTableProps) => {
     OverflowY: 'scroll'
   }
 
+  const hasRowType = !!Object.keys(rawData?.[0] || {}).find((v: string) => v.match(/row[_-]?type/i))
+
   const caption = useMemo(() => {
     if (config.type === 'map') {
       return config.table.caption ? config.table.caption : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
@@ -120,6 +138,13 @@ const DataTable = (props: DataTableProps) => {
     }
   }, [config.table.caption])
 
+  // Determines if a relative region is being shown to the user.
+  // If a relative region is found we don't want to display the data table.
+  // Takes backwards compatibility into consideration, ie !region.toType || !region.fromType
+  const noRelativeRegions = config?.regions?.every(region => {
+    return (region.toType === 'Fixed' && region.fromType === 'Fixed') || (!region.toType && !region.fromType) || (!region.toType && region.fromType === 'Fixed') || (!region.fromType && region.toType === 'Fixed')
+  })
+
   // prettier-ignore
   const tableData = useMemo(() => (
     config.visualizationType === 'Pie'
@@ -151,17 +176,20 @@ const DataTable = (props: DataTableProps) => {
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, ...props }) : chartCellMatrix({ rows, ...props, isVertical, sortBy })}
+              wrapColumns={wrapColumns}
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData }) : chartCellMatrix({ rows, ...props, runtimeData: _runtimeData, isVertical, sortBy, hasRowType })}
               tableName={config.type}
               caption={caption}
               stickyHeader
-              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
+              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} />}
               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 }}
             />
 
             {/* REGION Data Table */}
-            {config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
+            {noRelativeRegions && config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
               <Table
+                wrapColumns={wrapColumns}
                 childrenMatrix={regionCellMatrix({ config })}
                 tableName={config.visualizationType}
                 caption='Table of the highlighted regions in the visualization'
@@ -188,6 +216,7 @@ const DataTable = (props: DataTableProps) => {
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
+              wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
               tableName={config.visualizationType}
               caption={caption}

package/components/DataTable/components/ChartHeader.tsx

@@ -3,11 +3,11 @@ import { getSeriesName } from '../helpers/getSeriesName'
 import { getDataSeriesColumns } from '../helpers/getDataSeriesColumns'
 import { DownIcon, UpIcon } from './Icons'
 
-type ChartHeaderProps = { data; isVertical; config; runtimeData; setSortBy; sortBy; groupBy? }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; groupBy?; hasRowType? }
 
-const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy, groupBy }: ChartHeaderProps) => {
+const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, groupBy, hasRowType }: ChartHeaderProps) => {
   if (!data) return
-  let dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+  let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
   if (groupBy) {
     let groupHeaderRemoved = dataSeriesColumns.filter(col => col !== groupBy)
     if (groupHeaderRemoved.length != dataSeriesColumns.length) {
@@ -17,6 +17,14 @@ const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy,
     }
   }
   if (isVertical) {
+    if (hasRowType) {
+      // find the row type column and place it at the beginning of the array
+      const rowTypeRegex = /row[_-]?type/i
+      const rowTypeIndex = dataSeriesColumns.findIndex(column => rowTypeRegex.test(column))
+      if (rowTypeIndex > -1) {
+        dataSeriesColumns.splice(rowTypeIndex, 1)
+      }
+    }
     return (
       <tr>
         {dataSeriesColumns.map((column, index) => {
@@ -24,15 +32,18 @@ const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy,
 
           return (
             <th
+              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${column}__${index}`}
               tabIndex={0}
               title={text}
               role='columnheader'
               scope='col'
               onClick={() => {
+                if (hasRowType) return
                 setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
               }}
               onKeyDown={e => {
+                if (hasRowType) return
                 if (e.keyCode === 13) {
                   setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false, colIndex: index })
                 }
@@ -54,11 +65,12 @@ const ChartHeader = ({ data, isVertical, config, runtimeData, setSortBy, sortBy,
     const sliceVal = config.visualizationType === 'Pie' ? 1 : 0
     return (
       <tr>
-        {['__series__', ...Object.keys(runtimeData)].slice(sliceVal).map((row, index) => {
+        {['__series__', ...Object.keys(data)].slice(sliceVal).map((row, index) => {
           let column = config.xAxis?.dataKey
-          let text = row !== '__series__' ? getChartCellValue(row, column, config, runtimeData) : '__series__'
+          let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
           return (
             <th
+              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
               key={`col-header-${text}__${index}`}
               tabIndex={0}
               title={text}

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,4 +1,4 @@
-import Icon from '@cdc/core/components/ui/Icon'
+import Icon from '../../ui/Icon'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle }) => (
   <div

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -12,9 +12,10 @@ type ChartRowsProps = DataTableProps & {
   isVertical: boolean
   sortBy: { colIndex; column }
   groupBy?: string
+  hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
   const dataSeriesColumnsSorted = () => {
@@ -55,7 +56,20 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
       return cellMatrix
     } else {
       return rows.map(row => {
-        return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))
+        if (hasRowType) {
+          let rowType
+          let rowValues = []
+          dataSeriesColumns.forEach((column, j) => {
+            if (column.match(/row[_-]?type/i)) {
+              rowType = getChartCellValue(row, column, config, runtimeData)
+            } else {
+              rowValues.push(getChartCellValue(row, column, config, runtimeData))
+            }
+          })
+          return [rowType, ...rowValues]
+        } else {
+          return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData))
+        }
       })
     }
   } else {

package/components/DataTable/helpers/customColumns.ts

@@ -0,0 +1,25 @@
+// removes null and excluded columns
+const customColumns = (runtimeData: Object[] | Record<string, Object>, excludeColumns: string[] = []): Object[] | Record<string, Object> => {
+  if (!Array.isArray(runtimeData)) {
+    // currently we don't support Record types
+    return runtimeData
+  } else {
+    const runtimeDataMemo = {}
+    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
+      })
+    })
+    return runtimeData.map(d => {
+      const row = {}
+      Object.keys(d).forEach(key => {
+        if (key.match(/row[_-]?type/i)) row['row_type'] = d[key]
+        if (runtimeDataMemo[key] === true) row[key] = d[key]
+      })
+      return row
+    })
+  }
+}
+
+export default customColumns

package/components/DataTable/helpers/customSort.ts

@@ -8,7 +8,16 @@ export const customSort = (a, b, sortBy, config) => {
   if (config.type === 'map') {
     valueA = standardizeStateName(a)
     valueB = standardizeStateName(b)
+    // sort for Regions table for Map
+    if (String(valueA).toLowerCase().includes('region') && String(valueB).toLowerCase().includes('region')) {
+      const numberA = parseInt(a.match(/\d+$/)[0], 10)
+      const numberB = parseInt(b.match(/\d+$/)[0], 10)
+
+      // Compare the numeric parts
+      return !sortBy.asc ? Number(numberA) - Number(numberB) : Number(numberB) - Number(numberA)
+    }
   }
+
   // Treat booleans and nulls as an empty string
   valueA = valueA === false || valueA === true || valueA === null ? '' : valueA
   valueB = valueB === false || valueB === true || valueB === null ? '' : valueB

package/components/DataTable/helpers/getChartCellValue.ts

@@ -24,12 +24,13 @@ const isAdditionalColumn = (column, config) => {
 }
 
 export const getChartCellValue = (row, column, config, runtimeData) => {
+  if (config.table.customTableConfig) return runtimeData[row][column]
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
   let labelValue = rowObj[column] // just raw X axis string
   if (column === config.xAxis?.dataKey) {
     // not the prettiest, but helper functions work nicely here.
-    cellValue = config.xAxis?.type === 'date' ? formatDate(config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
+    cellValue = config.xAxis?.type === 'date' ? formatDate(config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat, parseDate(config.xAxis?.dateParseFormat, labelValue)) : labelValue
   } else {
     let resolvedAxis = 'left'
     let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -1,4 +1,5 @@
 export const getDataSeriesColumns = (config, isVertical, runtimeData): string[] => {
+  if (config.table.customTableConfig) return runtimeData[0] ? Object.keys(runtimeData[0]) : []
   let tmpSeriesColumns
   if (config.visualizationType !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll
@@ -10,7 +11,7 @@ export const getDataSeriesColumns = (config, isVertical, runtimeData): string[]
       tmpSeriesColumns = Object.keys(runtimeData[0])
     }
   } else {
-    tmpSeriesColumns = [config.xAxis?.dataKey, config.yAxis?.dataKey] //Object.keys(runtimeData[0])
+    tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey, config.yAxis?.dataKey] : [config.yAxis?.dataKey]
   }
 
   // then add the additional Columns

package/components/DataTable/helpers/getSeriesName.ts

@@ -1,26 +1,21 @@
-const getLabel = (name, config) => {
-  let custLabel = ''
-  if (config.columns && Object.keys(config.columns).length > 0) {
-    Object.keys(config.columns).forEach(function (key) {
-      var tmpColumn = config.columns[key]
-      // add if not the index AND it is enabled to be added to data table
-      if (tmpColumn.name === name) {
-        custLabel = tmpColumn.label
-      }
-    })
-    return custLabel
+import { TableConfig } from '../types/TableConfig'
+
+const getLabel = (name: string, config: TableConfig) => {
+  const columns = Object.values(config.columns || {})
+  const matchingConfiguredColumn = columns.find(col => col.name === name)
+  if (matchingConfiguredColumn?.label) {
+    return matchingConfiguredColumn.label
   }
+  return name
 }
 
-export const getSeriesName = (column, config) => {
+export const getSeriesName = (column: string, config: TableConfig) => {
   // If a user sets the name on a series use that.
-  let userUpdatedSeriesName = config.series ? config.series.filter(series => series.dataKey === column)?.[0]?.name : ''
-  if (userUpdatedSeriesName) return userUpdatedSeriesName
-
+  const userDefinedSeries = config.series?.find(series => series.dataKey === column)
+  if (userDefinedSeries?.name) {
+    return userDefinedSeries.name
+  }
   if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
-
-  let custLabel = getLabel(column, config) ? getLabel(column, config) : column
-  let text = column === config.xAxis?.dataKey ? config.table.indexLabel : custLabel
-
-  return text
+  const columnIsDataKey = column === config.xAxis?.dataKey
+  return columnIsDataKey ? config.table.indexLabel : getLabel(column, config)
 }

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -21,7 +21,11 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           let labelValue
           const mapZoomHandler = config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
           if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
+            const capitalize = str => {
+              return str.charAt(0).toUpperCase() + str.slice(1)
+            }
             labelValue = displayGeoName(row)
+            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
           } else {
             labelValue = formatLegendLocation(row)
           }

package/components/DataTable/types/TableConfig.ts

@@ -1,55 +1,26 @@
 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 { BoxPlot } from '../../../types/BoxPlot'
+import { General } from '../../../types/General'
+import { Column } from '../../../types/Column'
 
 export type TableConfig = {
   type?: string
-  table: {
-    showVertical?: boolean
-    indexLabel: string
-    limitHeight: boolean
-    height: string | number
-    caption: string
-    download: boolean
-  }
+  table: Table
   xAxis?: Axis
   yAxis?: Axis
-  boxplot?: {
-    tableData: Object[]
-    labels: {
-      mean: string
-      maximum: string
-      minimum: string
-      iqr: string
-      median: string
-      q1: string
-      q3: string
-      outliers: string
-      values: string
-      total: string
-      lowerBounds: string
-      upperBounds: string
-    }
-    plots: []
-    categories: string[]
-  }
+  boxplot?: BoxPlot
   visualizationType?: string
-  general?: {
-    geoType: string
-    type: string
-    showDownloadButton: boolean
-    allowMapZoom?: boolean
-  }
-  columns?: {
-    geo: {
-      name: string
-    }
-  }
+  general?: General
+  columns?: Record<string, Column>
   legend?: {
-    specialClasses: { key: string; label: string; value: string }[]
+    specialClasses?: { key: string; label: string; value: string }[]
+    hide?: boolean
   }
   series?: Series
-  regions?: { label: string; from: string; to: string }[]
+  regions?: { label: string; from: string; to: string; fromType: 'Fixed' | 'Previous Days'; toType: 'Fixed' | 'Last Date' }[]
   runtimeSeriesLabels?: Object
   dataFormat?: Object
   runtime: Runtime

package/components/EditorPanel/DataTableEditor.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '../ui/Icon'
+import { CheckBox, TextField } from './Inputs'
+import type { Table } from '@cdc/core/types/Table'
+import MultiSelect from '../MultiSelect'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+
+interface DataTableProps {
+  config: {
+    table: Table
+    visualizationType: string
+  }
+  updateField: UpdateFieldFunc<string | boolean | string[] | number>
+  isDashboard: boolean
+  isLoadedFromUrl: boolean
+  columns: string[]
+}
+
+const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard, isLoadedFromUrl, columns }) => {
+  return (
+    <>
+      <TextField
+        value={config.table.label}
+        updateField={updateField}
+        section='table'
+        fieldName='table-label'
+        id='tableLabel'
+        label='Data Table Title'
+        placeholder='Data Table'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Label is required for Data Table for 508 Compliance</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      <CheckBox
+        value={config.table.show}
+        fieldName='show'
+        label='Show Data Table'
+        section='table'
+        updateField={updateField}
+        className='column-heading'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      {config.visualizationType !== 'Box Plot' && (
+        <CheckBox
+          value={config.table.showVertical}
+          fieldName='showVertical'
+          label='Show Vertical Data'
+          section='table'
+          updateField={updateField}
+          className='column-heading'
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>This will draw the data table with vertical data instead of horizontal.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
+      <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />
+      <TextField
+        value={config.table.caption}
+        updateField={updateField}
+        section='table'
+        type='textarea'
+        fieldName='caption'
+        label='Screen Reader Description'
+        placeholder=' Data table'
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Enter a description of the data table to be read by screen readers.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label='Limit Table Height' updateField={updateField} />
+      <CheckBox
+        value={config.table.customTableConfig}
+        fieldName='customTableConfig'
+        label='Customize Table Config'
+        section='table'
+        updateField={updateField}
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>This will display all available columns in the data set. It will not show any columns where all of the column cells are null.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
+      {config.table.customTableConfig && <MultiSelect options={columns.map(c => ({ label: c, value: c }))} fieldName='excludeColumns' label='Exclude Columns' section='table' updateField={updateField} />}
+      {config.table.limitHeight && <TextField value={config.table.height} fieldName='height' label='Data Table Height' type='number' min={0} max={500} placeholder='Height(px)' updateField={updateField} />}
+      <CheckBox value={config.table.expanded} fieldName='expanded' label='Expanded by Default' section='table' updateField={updateField} />
+      {isDashboard && <CheckBox value={config.table.showDataTableLink} fieldName='showDataTableLink' label='Show Data Table Name & Link' section='table' updateField={updateField} />}
+      {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' section='table' updateField={updateField} />}
+      <CheckBox value={config.table.download} fieldName='download' label='Show Download CSV Link' section='table' updateField={updateField} />
+      <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />
+      <label>
+        <span className='edit-label column-heading'>Table Cell Min Width</span>
+        <input type='number' value={config.table.cellMinWidth ? config.table.cellMinWidth : 0} onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)} />
+      </label>
+    </>
+  )
+}
+
+export default DataTable