updated the object table on the bins page and added a custom elemnt to the responsive table component between the actions/title and the column headers

src/common/ResponsiveTable.tsx

@@ -90,6 +90,7 @@ interface Props<T> {
   actions?: string | JSX.Element;
   rowSelect?: (row: T, index: number, checked: boolean) => void; //row select function that passes the the row back up, when this function is passed in render a column of checkboxes
   selectedRows?: number[]; //which rows are selected will need to be controlled by the parent in order to keep track between page changes
+  customElement?: JSX.Element //element that will be placed in the table head between the table actions and the column header rows
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -114,7 +115,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     onRowClick,
     actions,
     rowSelect,
-    selectedRows
+    selectedRows,
+    customElement
   } = props
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
@@ -371,6 +373,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     <TableContainer className={classes.tableContainer} component={Paper}>
       <Table>
         <TableHead>
+          {/* table actions */}
           <TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
             <TableCell colSpan={10000} sx={{ border: "none" }}>
               <Grid2 container justifyContent="space-between">
@@ -402,6 +405,16 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
               </Grid2>
             </TableCell>
           </TableRow>
+          {/* custom element */}
+          {customElement && 
+            <TableRow>
+              <TableCell colSpan={10000} sx={{ border: "none" }}>
+                {customElement}
+              </TableCell>
+            </TableRow>
+          }
+
+          {/* column headers */}
           <TableRow sx={ hideKeys ? { display: "none" } : undefined } >
             { rowSelect && <TableCell></TableCell> }
             { renderGutter && <TableCell></TableCell>}

src/objects/ObjectDescriber.tsx

@@ -114,7 +114,7 @@ export const ObjectExtensions: Map<pond.ObjectType, ObjectExtension> = new Map([
           title: "Grain Bushels",
           cellStyle: {padding: "16px"},
           render: row => {
-            return row.settings.inventory?.grainBushels;
+            return (<div>{row.settings.inventory ? isNaN(row.settings.inventory.grainBushels) ? 0 : row.settings.inventory.grainBushels : 0}</div>);
           }
         },
         {

src/objects/ObjectTable.tsx

@@ -24,7 +24,7 @@ import TeamSearch from "teams/TeamSearch";
 import BulkBinSettings from "./bulkEditForms/bulkBinSettings";
 import BulkGrainBagSettings from "./bulkEditForms/bulkGrainBagSettings";
 import ResponsiveTable from "common/ResponsiveTable";
-import { cloneDeep } from "lodash";
+import { cloneDeep, indexOf } from "lodash";
 //import BulkGateSettings from "./bulkEditForms/bulkGateSettings";
 
 interface customButton {
@@ -51,11 +51,12 @@ export default function ObjectTable(props: Props) {
   const [tablePage, setTablePage] = useState(0);
   const [tableData, setTableData] = useState<any[]>([]);
   const [loadedData, setLoadedData] = useState<any[]>([]);
-  const [selectedObjects, setSelectedObjects] = useState<any[]>([]);
+  //const [selectedObjects, setSelectedObjects] = useState<any[]>([]);
-  const [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc");
+  const [selectedObjects, setSelectedObjects] = useState<Map<string, any>>(new Map());
+  //const [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc");
   const [currentSearchText, setCurrentSearchText] = useState<string>("");
-  const [currentOrder, setCurrentOrder] = useState<string | undefined>();
+  //const [currentOrder, setCurrentOrder] = useState<string | undefined>();
-  const [isNumerical, setIsNumerical] = useState<boolean | undefined>();
+  //const [isNumerical, setIsNumerical] = useState<boolean | undefined>();
   const [{ user, as }] = useGlobalState();
   const [selectedUser, setSelectedUser] = useState<string>(as ?? user.id());
   const [selectedPageRows, setSelectedPageRows] = useState<Map<number, number[]>>(new Map())//key is the page value is an array of row indexes for that page
@@ -89,16 +90,15 @@ export default function ObjectTable(props: Props) {
           .listBins(
             pageSize,
             pageSize * tablePage,
-            currentDirection,
+            "asc",
-            currentOrder,
+            "name",
             search,
             selectedUser,
-            undefined,
+            undefined
-            isNumerical
           )
           .then(resp => {
-            setLoadedData(resp.data.bins.map(b => Bin.create(b)))
+            //setLoadedData(resp.data.bins.map(b => Bin.create(b)))
-            //setTableData(resp.data.bins.map(b => Bin.create(b)));
+            setTableData(resp.data.bins.map(b => Bin.create(b)));
             setObjectTotal(resp.data.total);
             setTableLoading(false);
           });
@@ -198,11 +198,11 @@ export default function ObjectTable(props: Props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    currentDirection,
+    //currentDirection,
-    currentOrder,
+    //currentOrder,
     currentType,
     selectedUser,
-    isNumerical,
+    //isNumerical,
     pageSize,
     tablePage,
     currentSearchText,
@@ -240,8 +240,14 @@ export default function ObjectTable(props: Props) {
       case pond.ObjectType.OBJECT_TYPE_BIN:
         return (
           <BulkBinSettings
-            selectedBins={selectedObjects as pond.Bin[]}
+            selectedBins={Array.from(selectedObjects.values()) as pond.Bin[]}
+            extraButtons={customButtons?.map(b => (
+              <Button variant="contained" onClick={() => {b.function(Array.from(selectedObjects.values()))}}>{b.label}</Button>
+            ))}
             refreshCallback={reLoad => {
+              //setSelectedObjects([])
+              setSelectedObjects(new Map())
+              setSelectedPageRows(new Map())
               if (reLoad) {
                 load();
               }
@@ -258,7 +264,7 @@ export default function ObjectTable(props: Props) {
           //     }
           //   }}
           // />
-          null
+          undefined
         );
       default:
     }
@@ -299,6 +305,30 @@ export default function ObjectTable(props: Props) {
     setTablePage(0)
   }
 
+  const rowSelected = (row: any, index: number, checked: boolean) => {
+    //when a row is selected add it to the map for the page
+    let selected = cloneDeep(selectedObjects)
+    let pageMap = cloneDeep(selectedPageRows)
+    let pageSelect = pageMap.get(tablePage)
+    if(checked){ //add the page/index to the map
+      if(pageSelect){
+        pageSelect.push(index)
+      }else{
+        pageMap.set(tablePage, [index])
+      }
+      //handle the row data to add it to a list of objects that are selected
+      selected.set(tablePage + ":" + index, row)
+    }else{ //remove the page/index from the map
+      if(pageSelect){
+        pageSelect.splice(pageSelect.indexOf(index))
+      }
+      //remove the selected object from the array
+      selected.delete(tablePage + ":" + index)
+    }
+    setSelectedObjects(selected)
+    setSelectedPageRows(pageMap)
+  }
+
   return (
     <Box padding={2}>
       {showControls && (
@@ -310,7 +340,8 @@ export default function ObjectTable(props: Props) {
               selected={selectedType}
               options={SearchableObjects()}
               changeSelection={op => {
-                setSelectedObjects([]);
+                //setSelectedObjects([]);
+                setSelectedObjects(new Map());
                 setSelectedType(op);
                 if (op?.value) {
                   setCurrentType(op.value);
@@ -343,29 +374,8 @@ export default function ObjectTable(props: Props) {
         setPage={setTablePage}
         handleRowsPerPageChange={handleRowsPerPageChange}
         setSearchText={setCurrentSearchText}
-        rowSelect={(row, index, checked) => {
+        customElement={bulkEditForm(currentType)}
-          //when a row is selected add it to the map for the page
+        rowSelect={rowSelected}
-          // console.log(row)
-          // console.log(checked)
-          // console.log(index)
-          let pageMap = cloneDeep(selectedPageRows)
-          let pageSelect = pageMap.get(tablePage)
-          if(checked){ //add the page/index to the map
-            if(pageSelect){
-              pageSelect.push(index)
-            }else{
-              pageMap.set(tablePage, [index])
-            }
-            //handle the row data to add it to a list of objects that are selected
-
-          }else{ //remove the page/index from the map
-            if(pageSelect){
-              pageSelect.splice(pageSelect.indexOf(index))
-            }
-          }
-          console.log(pageMap)
-          setSelectedPageRows(pageMap)
-        }}
         selectedRows={selectedPageRows.get(tablePage)}
       />
       {/* <MaterialTable

src/objects/bulkEditForms/bulkBinSettings.tsx

@@ -9,10 +9,11 @@ import { fahrenheitToCelsius, getDistanceUnit, getTemperatureUnit } from "utils"
 interface Props {
   selectedBins: pond.Bin[];
   refreshCallback: (reLoad: boolean) => void;
+  extraButtons?: JSX.Element[]
 }
 
 export default function BulkBinSettings(props: Props) {
-  const { selectedBins, refreshCallback } = props;
+  const { selectedBins, refreshCallback, extraButtons } = props;
   const binAPI = useBinAPI();
   const { openSnack } = useSnackbar();
   const gridItemWidth = 3;
@@ -83,7 +84,7 @@ export default function BulkBinSettings(props: Props) {
 
   return (
     <React.Fragment>
-      <Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
+      <Grid width={"100%"} container direction="row" spacing={2} alignContent="center" alignItems="center">
         {/* first row */}
         <Grid size={{ xs: gridItemWidth }}>
           <TextField
@@ -240,6 +241,11 @@ export default function BulkBinSettings(props: Props) {
             Update selected Bins
           </Button>
         </Grid>
+        {extraButtons?.map((button, index) => (
+          <Grid key={"exButton" + index} size={{ xs: gridItemWidth }}>
+            {button}
+          </Grid>
+        ))}
       </Grid>
     </React.Fragment>
   );