feature: row height control

src/components/Table/index.tsx

@@ -31,6 +31,10 @@ import useWindowSize from "../../hooks/useWindowSize";
 import { DraggableHeader } from "react-data-grid-addons";
 import Confirmation from "components/Confirmation";
 import DeleteIcon from "@material-ui/icons/Delete";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
 const { DraggableContainer } = DraggableHeader;
 const deleteAlgoliaRecord = functions.httpsCallable(
   CLOUD_FUNCTIONS.deleteAlgoliaRecord
@@ -70,6 +74,10 @@ const useStyles = makeStyles(Theme => {
       alignContent: "center",
       // background: Theme.palette.primary.main,
     },
+    formControl: {
+      margin: 2,
+      minWidth: 120,
+    },
   });
 });
 
@@ -90,7 +98,7 @@ function Table(props: Props) {
   const size = useWindowSize();
 
   useEffect(() => {
-    tableActions.set(collection, filters);
+    tableActions.table.set(collection, filters);
   }, [collection, filters]);
 
   const classes = useStyles();
@@ -215,13 +223,37 @@ function Table(props: Props) {
         </Confirmation>
       ),
     });
-    const rowHeight = 40;
+    const rowHeight = tableState.config.rowHeight;
     const rows = tableState.rows.map((row: any) => ({ rowHeight, ...row }));
 
     return (
       <>
         <div className={classes.tableHeader}>
-          <Typography variant="button">{collection}</Typography>
+          <div>
+            <Typography variant="button">{collection}</Typography>
+            <FormControl variant="outlined" className={classes.formControl}>
+              <InputLabel htmlFor="outlined-age-simple">Row Height</InputLabel>
+              <Select
+                value={rowHeight}
+                onChange={(event: any, child: any) => {
+                  tableActions.table.updateConfig(
+                    "rowHeight",
+                    event.target.value
+                  );
+                }}
+                labelWidth={90}
+                inputProps={{
+                  name: "rowHeight",
+                  id: "outlined-rowHeight-simple",
+                }}
+              >
+                <MenuItem value={35}>Tall</MenuItem>
+                <MenuItem value={60}>Grande</MenuItem>
+                <MenuItem value={100}>Venti</MenuItem>
+                <MenuItem value={150}>Trenta</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
           <div className={classes.tableActions}>
             <ImportCSV
               columns={tableState.columns}

src/hooks/useFiretable/index.ts

@@ -11,11 +11,15 @@ export type FiretableActions = {
     reorder: Function;
   };
   row: { add: any; delete: Function };
-  set: Function;
-  filter: Function;
+  table: {
+    set: Function;
+    filter: Function;
+    updateConfig: Function;
+  };
 };
 
 export type FiretableState = {
+  config: { rowHeight: number };
   columns: any;
   rows: any;
 };
@@ -39,6 +43,7 @@ const useFiretable = (collectionName: string) => {
 
   const state: FiretableState = {
     columns: tableConfig.columns,
+    config: { rowHeight: tableConfig.rowHeight },
     rows: tableState.rows,
   };
   const actions: FiretableActions = {
@@ -46,7 +51,7 @@ const useFiretable = (collectionName: string) => {
       add: configActions.add,
       resize: configActions.resize,
       rename: configActions.rename,
-      update: configActions.update,
+      update: configActions.updateColumn,
       remove: configActions.remove,
       reorder: configActions.reorder,
     },
@@ -54,8 +59,11 @@ const useFiretable = (collectionName: string) => {
       add: tableActions.addRow,
       delete: tableActions.deleteRow,
     },
-    set: setTable,
-    filter: filterTable,
+    table: {
+      updateConfig: configActions.updateConfig,
+      set: setTable,
+      filter: filterTable,
+    },
   };
 
   return { tableState: state, tableActions: actions };

src/hooks/useFiretable/useTableConfig.ts

@@ -12,7 +12,7 @@ const useTableConfig = (tablePath: string) => {
   useEffect(() => {
     const { doc, columns } = tableConfigState;
     if (doc && columns !== doc.columns) {
-      documentDispatch({ columns: doc.columns });
+      documentDispatch({ columns: doc.columns, rowHeight: doc.rowHeight });
     }
   }, [tableConfigState.doc]);
 
@@ -33,7 +33,7 @@ const useTableConfig = (tablePath: string) => {
     columns[index].width = width;
     documentDispatch({ action: DocActions.update, data: { columns } });
   };
-  const update = (index: number, updatables: any) => {
+  const updateColumn = (index: number, updatables: any) => {
     const { columns } = tableConfigState;
     updatables.forEach((updatable: any) => {
       columns[index][updatable.field] = updatable.value;
@@ -57,8 +57,15 @@ const useTableConfig = (tablePath: string) => {
       data: { columns: reorderedColumns },
     });
   };
+  const updateConfig = (key: string, value: any) => {
+    documentDispatch({
+      action: DocActions.update,
+      data: { [key]: value },
+    });
+  };
   const actions = {
-    update,
+    updateColumn,
+    updateConfig,
     add,
     resize,
     setTable,