add basic Step3

www/src/components/Wizards/ImportWizard/Column.tsx

@@ -45,6 +45,10 @@ const useStyles = makeStyles((theme) =>
       "&:hover": { color: theme.palette.primary.dark },
     },
 
+    columnNameContainer: {
+      flexShrink: 1,
+      overflow: "hidden",
+    },
     columnName: {
       lineHeight: "44px",
       display: "block",
@@ -52,7 +56,6 @@ const useStyles = makeStyles((theme) =>
       userSelect: "none",
 
       marginLeft: theme.spacing(0.5),
-      marginTop: -1,
     },
   })
 );
@@ -79,12 +82,13 @@ export default function Column({
     <Grid
       container
       alignItems="center"
+      wrap="nowrap"
       className={clsx(classes.root, active && classes.active)}
       {...props}
     >
       {type && <Grid item>{getFieldIcon(type)}</Grid>}
 
-      <Grid item xs>
+      <Grid item xs className={classes.columnNameContainer}>
         <Typography
           component={Grid}
           item

www/src/components/Wizards/ImportWizard/Step2Rename.tsx

@@ -20,6 +20,8 @@ import Column from "./Column";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
+    divider: { marginBottom: theme.spacing(0.5) },
+
     buttonBase: {
       width: "100%",
       textAlign: "left",
@@ -70,7 +72,7 @@ export default function Step2Rename({ config, updateConfig }: IStepProps) {
         </Grid>
       </Grid>
 
-      <Divider />
+      <Divider className={classes.divider} />
 
       <FadeList>
         {Object.entries(config).map(([field, { name }]) => (

www/src/components/Wizards/ImportWizard/Step3Types.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+
+import {
+  makeStyles,
+  createStyles,
+  Grid,
+  Typography,
+  Divider,
+  ButtonBase,
+  IconButton,
+  TextField,
+  InputAdornment,
+} from "@material-ui/core";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+
+import { IStepProps } from ".";
+import FadeList from "./FadeList";
+import Column from "./Column";
+import FieldsDropdown from "components/Table/ColumnMenu/FieldsDropdown";
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    buttonBase: {
+      width: "100%",
+      textAlign: "left",
+    },
+  })
+);
+
+export default function Step3Types({ config, updateConfig }: IStepProps) {
+  const classes = useStyles();
+
+  const [fieldToEdit, setFieldToEdit] = useState(Object.keys(config)[0]);
+
+  const handleChange = (e) =>
+    updateConfig({ [fieldToEdit]: { type: e.target.value } });
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Firetable Columns
+          </Typography>
+          <Divider />
+
+          <FadeList>
+            {Object.entries(config).map(([field, { name, type }]) => (
+              <li key={field}>
+                <ButtonBase
+                  className={classes.buttonBase}
+                  onClick={() => setFieldToEdit(field)}
+                  aria-label={`Edit column ${field}`}
+                  focusRipple
+                >
+                  <Column
+                    label={name}
+                    type={type}
+                    active={field === fieldToEdit}
+                    secondaryItem={
+                      field === fieldToEdit && <ChevronRightIcon />
+                    }
+                  />
+                </ButtonBase>
+              </li>
+            ))}
+          </FadeList>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Column Type: {config[fieldToEdit].name}
+          </Typography>
+
+          <FieldsDropdown
+            value={config[fieldToEdit].type}
+            onChange={handleChange}
+          />
+        </Grid>
+      </Grid>
+
+      {/* <Grid container spacing={2}>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Field Names
+          </Typography>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="overline" gutterBottom component="h2">
+            Set Column Names
+          </Typography>
+        </Grid>
+      </Grid>
+
+      <Divider />
+
+      <FadeList>
+        
+      </FadeList> */}
+    </>
+  );
+}

www/src/components/Wizards/ImportWizard/index.tsx

@@ -6,6 +6,7 @@ import { Typography } from "@material-ui/core";
 import WizardDialog from "../WizardDialog";
 import Step1Columns from "./Step1Columns";
 import Step2Rename from "./Step2Rename";
+import Step3Types from "./Step3Types";
 
 import { ColumnConfig } from "hooks/useFiretable/useTableConfig";
 import { useFiretableContext } from "contexts/firetableContext";
@@ -86,7 +87,7 @@ export default function ImportWizard() {
     },
   });
   const updateConfig: IStepProps["updateConfig"] = (value) => {
-    setConfig((prev) => _merge(prev, value));
+    setConfig((prev) => ({ ..._merge(prev, value) }));
   };
 
   const { tableState } = useFiretableContext();
@@ -131,6 +132,18 @@ export default function ImportWizard() {
             />
           ),
         },
+        {
+          title: "set column types",
+          description:
+            "Set the type of each column to display your data correctly. Some column types have been suggested based off your data.",
+          content: (
+            <Step3Types
+              config={config}
+              setConfig={setConfig}
+              updateConfig={updateConfig}
+            />
+          ),
+        },
       ]}
       onFinish={() => alert("FINISHED")}
     />