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/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 [currentDirection, setCurrentDirection] = useState<"asc" | "desc">("asc");
+  //const [selectedObjects, setSelectedObjects] = useState<any[]>([]);
+  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 [isNumerical, setIsNumerical] = useState<boolean | undefined>();
+  //const [currentOrder, setCurrentOrder] = useState<string | 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,
-            currentOrder,
+            "asc",
+            "name",
             search,
             selectedUser,
-            undefined,
-            isNumerical
+            undefined
           )
           .then(resp => {
-            setLoadedData(resp.data.bins.map(b => Bin.create(b)))
-            //setTableData(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)));
             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,
-    currentOrder,
+    //currentDirection,
+    //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) => {
-          //when a row is selected add it to the map for the page
-          // 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)
-        }}
+        customElement={bulkEditForm(currentType)}
+        rowSelect={rowSelected}
         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>
   );