@cdc/editor 4.24.2 → 4.24.4

package/src/components/DataImport.tsx

@@ -48,8 +48,6 @@ export default function DataImport() {
 
   const [editingDataset, setEditingDataset] = useState<string>(undefined)
 
-  const [asyncPreviewData, setAsyncPreviewData] = useState<any[]>()
-
   const dispatch = useContext(EditorDispatchContext)
 
   const supportedDataTypes = {
@@ -89,6 +87,10 @@ export default function DataImport() {
     return true
   }
 
+  const getFileExtension = (url: URL) => {
+    return isSolrCsv(externalURL) ? '.csv' : isSolrJson(externalURL) ? '.json' : Object.keys(supportedDataTypes).find(extension => url.pathname.endsWith(extension))
+  }
+
   const loadExternal = async () => {
     let dataURL: URL
     // Is URL valid?
@@ -98,9 +100,9 @@ export default function DataImport() {
     } catch {
       throw errorMessages.urlInvalid
     }
-    let responseBlob = null
+    let responseBlob: Blob = null
 
-    const fileExtension = isSolrCsv(externalURL) ? '.csv' : isSolrJson(externalURL) ? '.json' : Object?.keys(supportedDataTypes).find(extension => dataURL.pathname.endsWith(extension))
+    const fileExtension = getFileExtension(dataURL)
     try {
       // eslint-disable-next-line no-unused-vars
       await axios
@@ -111,9 +113,10 @@ export default function DataImport() {
           responseBlob = response.data
 
           // Sometimes the files are coming in as plain text types... Maybe when saved from Macs
-          if ((fileExtension === '.csv' && responseBlob.type === 'text/plain') || isSolrCsv(externalURL)) {
+          const csvTypes = ['text/csv', 'text/plain']
+          if ((fileExtension === '.csv' && csvTypes.includes(responseBlob.type)) || isSolrCsv(externalURL)) {
             responseBlob = responseBlob.slice(0, responseBlob.size, 'text/csv')
-          } else if ((fileExtension === '.json' && responseBlob.type === 'text/plain') || isSolrJson(externalURL)) {
+          } else if (responseBlob.type === 'application/json' || (fileExtension === '.json' && responseBlob.type === 'text/plain') || isSolrJson(externalURL)) {
             responseBlob = responseBlob.slice(0, responseBlob.size, 'application/json')
           }
         })
@@ -139,22 +142,20 @@ export default function DataImport() {
    */
   const loadData = async (fileBlob = null, fileName, editingDatasetKey) => {
     let fileData = fileBlob
-    let fileSource = fileData?.path ?? fileName ?? null
-    let fileSourceType = 'file'
+    const fileSource = fileData?.path ?? fileName ?? externalURL
+    const fileSourceType = fileBlob ? 'file' : 'url'
 
     // Get the raw data as text from the file
-    if (null === fileData) {
-      fileSourceType = 'url'
+    if (fileSourceType === 'url') {
       try {
         fileData = await loadExternal()
-        fileSource = externalURL
       } catch (error) {
         setErrors([error])
         return
       }
     }
 
-    let fileSize = fileData.size
+    const fileSize = fileData.size
 
     // Check if file is too big
     if (fileSize > maxFileSize * 1048576) {
@@ -162,105 +163,92 @@ export default function DataImport() {
       return
     }
 
-    let path = fileBlob?.name || externalURL || fileName
-
     // checking the file source type allows us to handle real urls better
     // For example, query parameters in API's and cache busting strings
     // file matching can handle .csv and .json, but doesn't handle
     // .csv?version=1 or .json?version=1
-    const handleFileExtension = fileSourceType => {
-      let fileExtension
+    const getMimeType = () => {
+      const path = fileBlob?.name || externalURL || fileName
       if (fileSourceType === 'file') {
-        fileExtension = path.match(/(?:\.([^.]+))?$/g)
-
-        if (fileExtension.length === 0) {
-          fileExtension = '.csv'
-        } else {
-          fileExtension = fileExtension[0]
-        }
+        const pathMatch = path.match(/(?:\.([^.]+))?$/g)
+        const ext = pathMatch.length === 0 ? '.csv' : pathMatch[0]
+        return supportedDataTypes[ext]
       }
 
       if (fileSourceType === 'url') {
-        let urlData = new URL(path, window.location.origin)
-        fileExtension = isSolrCsv(externalURL) ? '.csv' : isSolrJson(externalURL) ? '.json' : Object.keys(supportedDataTypes).find(extension => urlData.pathname.endsWith(extension))
+        return fileData.type
       }
-
-      return fileExtension
     }
 
-    let fileExtension = handleFileExtension(fileSourceType)
-    let mimeType = supportedDataTypes[fileExtension]
+    const mimeType = getMimeType()
 
     // Convert from blob into raw text
     // Have to use FileReader instead of just .text because IE11 and the polyfills for this are bugged
-    let filereader = new FileReader()
-
-    // Set encoding for CSV files - needed to render special characters properly
-    let encoding = mimeType === 'text/csv' ? 'utf-8' : ''
-
-    filereader.onload = function () {
-      let text = this.result
+    const filereader = new FileReader()
 
+    const getText = resultText => {
       switch (mimeType) {
         case 'text/csv':
-          text = csvParse(text)
-          break
+          return csvParse(resultText)
         case 'text/plain':
         case 'application/json':
           try {
-            text = isSolrJson(externalURL) ? JSON.parse(text).response.docs : JSON.parse(text)
+            return isSolrJson(externalURL) ? JSON.parse(resultText).response.docs : JSON.parse(resultText)
           } catch (errors) {
             setErrors([errorMessages.formatting])
             return
           }
-          break
         default:
           setErrors([errorMessages.fileType])
           return
       }
+    }
+
+    filereader.onload = function () {
+      const handleSetConfig = (text: string, useTempConfig = false) => {
+        if (config.type === 'dashboard') {
+          let newDatasets = { ...config.datasets }
+
+          Object.keys(newDatasets).forEach(datasetKey => (newDatasets[datasetKey].preview = false))
+          const dataFileFormat = mimeType.split('/')[1].toUpperCase()
+          newDatasets[editingDatasetKey || fileSource] = {
+            data: text, // new data
+            dataFileSize: fileSize,
+            dataFileName: fileSource, // new file source
+            dataFileSourceType: fileSourceType, // new file source type
+            dataFileFormat,
+            preview: true
+          }
+
+          if (keepURL) {
+            newDatasets[editingDatasetKey || fileSource].dataUrl = fileSource
+          }
+
+          const conf = useTempConfig ? { ...config, ...tempConfig } : config
+          setConfig({ ...conf, datasets: newDatasets })
+        } else {
+          let newConfig = {
+            ...config,
+            ...tempConfig,
+            data: text, // new data
+            dataFileName: fileSource, // new file source
+            dataFileSourceType: fileSourceType, // new file source type
+            formattedData: transform.developerStandardize(text, config.dataDescription)
+          }
+          if (keepURL) {
+            newConfig.dataUrl = fileSource
+          }
+          setConfig(newConfig)
+        }
+      }
 
       // Validate parsed data and set if no issues.
       try {
-        text = transform.autoStandardize(text)
+        const result = getText(this.result.toString())
+        const text = transform.autoStandardize(result)
         if (config.data && config.series) {
           if (dataExists(text, config.series, config?.xAxis.dataKey)) {
-            if (config.type === 'dashboard') {
-              let newDatasets = { ...config.datasets }
-
-              Object.keys(newDatasets).forEach(datasetKey => (newDatasets[datasetKey].preview = false))
-
-              newDatasets[editingDatasetKey || fileSource] = {
-                data: text, // new data
-                dataFileSize: fileSize,
-                dataFileName: fileSource, // new file source
-                dataFileSourceType: fileSourceType, // new file source type
-                dataFileFormat: fileExtension.replace('.', '').toUpperCase(),
-                preview: true
-              }
-
-              if (keepURL) {
-                newDatasets[editingDatasetKey || fileSource].dataUrl = fileSource
-              }
-
-              setConfig({
-                ...config,
-                ...tempConfig,
-                dataset: newDatasets
-              })
-            } else {
-              let newConfig = {
-                ...config,
-                ...tempConfig,
-                data: text, // new data
-                dataFileName: fileSource, // new file source
-                dataFileSourceType: fileSourceType, // new file source type
-                formattedData: transform.developerStandardize(text, config.dataDescription)
-              }
-              if (keepURL) {
-                newConfig.dataUrl = fileSource
-              }
-              setConfig(newConfig)
-            }
+            handleSetConfig(text, true)
           } else {
             resetEditor(
               {
@@ -272,38 +260,7 @@ export default function DataImport() {
             )
           }
         } else {
-          if (config.type === 'dashboard') {
-            let newDatasets = { ...config.datasets }
-            Object.keys(newDatasets).forEach(datasetKey => (newDatasets[datasetKey].preview = false))
-
-            newDatasets[editingDatasetKey || fileSource] = {
-              data: text, // new data
-              dataFileSize: fileSize,
-              dataFileName: fileSource, // new file source
-              dataFileSourceType: fileSourceType, // new file source type
-              dataFileFormat: fileExtension.replace('.', '').toUpperCase(),
-              preview: true
-            }
-
-            if (keepURL) {
-              newDatasets[editingDatasetKey || fileSource].dataUrl = fileSource
-            }
-
-            setConfig({ ...config, datasets: newDatasets })
-          } else {
-            let newConfig = {
-              ...config,
-              ...tempConfig,
-              data: text, // new data
-              dataFileName: fileSource, // new file source
-              dataFileSourceType: fileSourceType, // new file source type
-              formattedData: transform.developerStandardize(text, config.dataDescription) // new file source type
-            }
-            if (keepURL) {
-              newConfig.dataUrl = fileSource
-            }
-            setConfig(newConfig)
-          }
+          handleSetConfig(text)
         }
 
         if (editingDataset) {
@@ -314,6 +271,8 @@ export default function DataImport() {
         setErrors(err)
       }
     }
+    // Set encoding for CSV files - needed to render special characters properly
+    const encoding = mimeType === 'text/csv' ? 'utf-8' : ''
     filereader.readAsText(fileData, encoding)
   }
 
@@ -329,36 +288,8 @@ export default function DataImport() {
     dispatch({ type: 'EDITOR_SAVE', payload: newConfig })
   }, []) // eslint-disable-line
 
-  useEffect(() => {
-    const asyncWrapper = async () => {
-      if (config.type === 'dashboard') {
-        Object.keys(config.datasets).forEach(async datasetKey => {
-          if (config.datasets[datasetKey].preview) {
-            if (config.datasets[datasetKey].dataUrl) {
-              const remoteData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
-              if (Array.isArray(remoteData)) {
-                setAsyncPreviewData(remoteData)
-              }
-            } else if (Array.isArray(config.datasets[datasetKey].data)) {
-              setAsyncPreviewData(config.datasets[datasetKey].data)
-            }
-          }
-        })
-      } else {
-        if (config.dataUrl) {
-          const remoteData = await fetchRemoteData(config.dataUrl)
-          if (Array.isArray(remoteData)) {
-            setAsyncPreviewData(remoteData)
-          }
-        }
-      }
-    }
-
-    asyncWrapper()
-  }, [config.datasets]) // eslint-disable-line
-
   // todo: code repetition in Widget.jsx?
-  const updateDescriptionProp = (visualizationKey, datasetKey, key, value) => {
+  const updateDescriptionProp = (datasetKey, key, value) => {
     if (config.type === 'dashboard') {
       let dataDescription = { ...config.datasets[datasetKey].dataDescription, [key]: value }
       let formattedData = transform.developerStandardize(config.datasets[datasetKey].data, dataDescription)
@@ -399,19 +330,17 @@ export default function DataImport() {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
   const { getRootProps: getRootProps2, getInputProps: getInputProps2, isDragActive: isDragActive2 } = useDropzone({ onDrop })
 
-  const loadFileFromUrl = (url, editingDatasetKey) => {
-    // const extUrl = (url) ? url : config.dataFileName // set url to what is saved in config unless the user has entered something
-
+  const loadDataFromUrl = () => {
     return (
       <>
         <form className='input-group d-flex' onSubmit={e => e.preventDefault()}>
           <input id='external-data' type='text' className='form-control flex-grow-1 border-right-0' placeholder='e.g., https://data.cdc.gov/resources/file.json' aria-label='Load data from external URL' aria-describedby='load-data' value={externalURL} onChange={e => setExternalURL(e.target.value)} />
-          <button className='input-group-text btn btn-primary px-4' type='submit' id='load-data' onClick={() => loadData(null, externalURL, editingDatasetKey)}>
+          <button className='input-group-text btn btn-primary px-4' type='submit' id='load-data' onClick={() => loadData(null, externalURL, editingDataset)}>
             Load
           </button>
         </form>
         <label htmlFor='keep-url' className='mt-1 d-flex keep-url'>
-          <input type='checkbox' id='keep-url' checked={keepURL} onChange={() => changeKeepURL(!keepURL, editingDatasetKey)} /> Always load from URL (normally will only pull once)
+          <input type='checkbox' id='keep-url' checked={keepURL} onChange={() => changeKeepURL(!keepURL, editingDataset)} /> Always load from URL (normally will only pull once)
         </label>
       </>
     )
@@ -453,12 +382,9 @@ export default function DataImport() {
     let newDatasets = { ...config.datasets }
 
     if (value === true) {
-      Object.keys(newDatasets).forEach(datasetKeyIter => {
-        if (datasetKeyIter !== datasetKey) {
-          newDatasets[datasetKeyIter][prop] = false
-        } else {
-          newDatasets[datasetKeyIter][prop] = true
-        }
+      Object.keys(newDatasets).forEach(key => {
+        const match = key === datasetKey
+        newDatasets[key][prop] = match
       })
     } else {
       newDatasets[datasetKey][prop] = value
@@ -507,18 +433,11 @@ export default function DataImport() {
     setConfig({ ...config, datasets: newDatasets, visualizations: newVisualizations })
   }
 
-  let previewData,
-    configureData,
+  let configureData,
     readyToConfigure = false
   if (config.type === 'dashboard') {
     readyToConfigure = Object.keys(config.datasets).length > 0
-    Object.keys(config.datasets).forEach(datasetKey => {
-      if (config.datasets[datasetKey].preview && Array.isArray(config.datasets[datasetKey].data)) {
-        previewData = config.datasets[datasetKey].data
-      }
-    })
   } else {
-    previewData = config.data
     configureData = config
     readyToConfigure = !!config.formattedData || (config.data && config.dataDescription && transform.autoStandardize(config.data))
   }
@@ -725,7 +644,7 @@ export default function DataImport() {
           </>
         )}
 
-        {configureData && configureData.data && (
+        {configureData?.data && (
           <>
             {config.type !== 'dashboard' && (
               <>
@@ -750,7 +669,7 @@ export default function DataImport() {
                   {config.dataFileSourceType === 'url' && (
                     <>
                       <div className='url-source-options'>
-                        <div>{loadFileFromUrl(externalURL, editingDataset)}</div>
+                        <div>{loadDataFromUrl()}</div>
                         <div>{resetButton()}</div>
                       </div>
                       {config.dataUrl && (config.type === 'chart' || config.type === 'map') && urlFilters}
@@ -760,7 +679,7 @@ export default function DataImport() {
               </>
             )}
 
-            {showDataDesigner && <DataDesigner visualizationKey={null} dataKey={configureData.dataFileName} configureData={configureData} updateDescriptionProp={updateDescriptionProp} config={config} setConfig={setConfig} />}
+            {showDataDesigner && <DataDesigner visualizationKey={null} configureData={configureData} updateDescriptionProp={(key, value) => updateDescriptionProp(configureData.dataFileName, key, value)} config={config} setConfig={setConfig} />}
           </>
         )}
 
@@ -780,9 +699,12 @@ export default function DataImport() {
                     </p>
                   )}
                 </div>
+                <p className='footnote'>
+                  Supported file types: {Object.keys(supportedDataTypes).join(', ')}. Maximum file size {maxFileSize}MB.
+                </p>
               </TabPane>
               <TabPane title='Load from URL' icon={<LinkIcon className='inline-icon' />}>
-                {loadFileFromUrl(editingDataset && config.datasets[editingDataset].dataFileSourceType === 'url' ? config.datasets[editingDataset].dataFileName : externalURL, editingDataset)}
+                {loadDataFromUrl()}
               </TabPane>
             </Tabs>
             {errors &&
@@ -793,9 +715,6 @@ export default function DataImport() {
                     </div>
                   ))
                 : errors.message)}
-            <p className='footnote'>
-              Supported file types: {Object.keys(supportedDataTypes).join(', ')}. Maximum file size {maxFileSize}MB.
-            </p>
 
             {/* prettier-ignore */}
             <SampleDataContext.Provider value={{ loadData, editingDataset, config }}>
@@ -828,7 +747,7 @@ export default function DataImport() {
         </a>
       </div>
       <div className='right-col'>
-        <PreviewDataTable data={asyncPreviewData || previewData} />
+        <PreviewDataTable />
       </div>
     </>
   )

package/src/components/PreviewDataTable.tsx

@@ -2,10 +2,12 @@ import React, { useState, useContext, useMemo, useCallback, useEffect, memo } fr
 import { useTable, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination } from 'react-table'
 import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
 import { useDebounce } from 'use-debounce'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 
 // Core
 import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength'
 import { errorMessages } from '../helpers/errorMessages'
+import { DataSet } from '@cdc/dashboard/src/types/DataSet'
 
 const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }: any) => {
   const [filterValue, setFilterValue] = useState(globalFilter)
@@ -48,11 +50,61 @@ const Footer = memo(({ previousPage, nextPage, canPreviousPage, canNextPage, pag
   </footer>
 ))
 
-const PreviewDataTable = ({ data }) => {
-  const [tableData, setTableData] = useState(data ?? [])
+const PreviewDataTable = () => {
+  const { config } = useContext(ConfigContext)
+  const previewData = useMemo(() => {
+    if (config.type === 'dashboard') {
+      return Object.values(config.datasets).find((dataset: DataSet) => {
+        return dataset.preview && Array.isArray(dataset.data)
+      })
+    }
+    return config.data
+  }, [config.type, config.data, config.datasets])
+  const [tableData, _setTableData] = useState(previewData)
+  const runSideEffects = (td: any[]) => {
+    const isSankey = Object.keys(td[0]).includes('tableData')
+    const newData = generateColumns(isSankey ? td[0].tableData : td)
+    validateFipsCodeLength(newData)
+    return newData
+  }
+  const setTableData = td => _setTableData(runSideEffects(td))
+
   const dispatch = useContext(EditorDispatchContext)
 
+  const fetchAsyncData = async () => {
+    if (config.type === 'dashboard') {
+      Object.keys(config.datasets).forEach(async datasetKey => {
+        if (config.datasets[datasetKey].preview) {
+          if (config.datasets[datasetKey].dataUrl) {
+            const remoteData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
+            if (Array.isArray(remoteData)) {
+              setTableData(remoteData)
+            }
+          } else if (Array.isArray(config.datasets[datasetKey].data)) {
+            setTableData(config.datasets[datasetKey].data)
+          }
+        }
+      })
+    } else {
+      if (config.dataUrl) {
+        const remoteData = await fetchRemoteData(config.dataUrl)
+        if (Array.isArray(remoteData)) {
+          setTableData(remoteData)
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!config.data) {
+      fetchAsyncData()
+    } else {
+      setTableData(previewData)
+    }
+  }, [config.data]) // eslint-disable-line
+
   const tableColumns = useMemo(() => {
+    if (!tableData) return []
     const columns = tableData.columns ?? []
     if (columns.length > 0 && columns.includes('')) {
       // todo find a way to call the errors. Currently they are in DataImport.js
@@ -60,7 +112,7 @@ const PreviewDataTable = ({ data }) => {
       dispatch({ type: 'EDITOR_SET_ERRORS', payload: [errorMessages.emptyCols] })
     }
 
-    return columns.map((columnName, idx) => {
+    return columns.map(columnName => {
       const columnConfig = {
         id: `column-${columnName}`,
         accessor: row => row[columnName],
@@ -73,7 +125,7 @@ const PreviewDataTable = ({ data }) => {
   }, [tableData])
 
   // This adds a columns property just like the D3 function for JSON parsing.
-  const generateColumns = useCallback(data => {
+  const generateColumns = data => {
     let columns = []
 
     data.forEach(rowObj => {
@@ -92,19 +144,7 @@ const PreviewDataTable = ({ data }) => {
       newData.columns = columns
       return newData
     }
-  }, [])
-
-  useEffect(() => {
-    if (!data) {
-      return
-    }
-
-    let newData = [...data]
-
-    newData = generateColumns(newData)
-    validateFipsCodeLength(newData)
-    setTableData(newData)
-  }, [data, generateColumns])
+  }
 
   const {
     getTableProps,
@@ -121,79 +161,34 @@ const PreviewDataTable = ({ data }) => {
     previousPage
   } = useTable({ columns: tableColumns, data: tableData, initialState: { pageSize: 25 } }, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination)
 
-  const NoData = () => (
-    <section className='no-data-message'>
-      <section>
-        <h3>No Data</h3>
-        <p>Import data to preview</p>
-      </section>
-    </section>
-  )
-
   const PlaceholderTable = () => {
     return (
       <section className='no-data'>
-        <NoData />
+        <section className='no-data-message'>
+          <section>
+            <h3>No Data</h3>
+            <p>Import data to preview</p>
+          </section>
+        </section>
         <div className='table-container'>
           <table className='editor data-table' role='table'>
             <thead>
-              <tr role='row'>
+              <tr>
                 <th scope='col' colSpan={1} role='columnheader'></th>
                 <th scope='col' colSpan={1} role='columnheader'></th>
                 <th scope='col' colSpan={1} role='columnheader'></th>
               </tr>
             </thead>
             <tbody>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
-              <tr role='row'>
-                <td role='cell'></td>
-                <td role='cell'></td>
-                <td role='cell'></td>
-              </tr>
+              <>
+                {[...Array(10)].map((_, i) => (
+                  <tr key={i}>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                ))}
+              </>
             </tbody>
           </table>
         </div>
@@ -201,7 +196,7 @@ const PreviewDataTable = ({ data }) => {
     )
   }
 
-  if (!data) return [<Header key='header' />, <PlaceholderTable key='table' />]
+  if (!tableData) return [<Header key='header' />, <PlaceholderTable key='table' />]
 
   const footerProps = { previousPage, nextPage, canPreviousPage, canNextPage, pageNumber: pageIndex + 1, totalPages: pageOptions.length }
 
@@ -243,7 +238,7 @@ const PreviewDataTable = ({ data }) => {
     </>
   )
 
-  return [<Header key='header' data={data} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key='table' />]
+  return [<Header key='header' data={tableData} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key='table' />]
 }
 
 export default PreviewDataTable