@linzjs/step-ag-grid 14.3.3 → 14.5.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "14.3.3",
+  "version": "14.5.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -83,7 +83,6 @@ export const Grid = ({
   const {
     gridReady,
     setApis,
-    prePopupOps,
     ensureRowVisible,
     getFirstRowId,
     selectRowsById,
@@ -98,7 +97,8 @@ export const Grid = ({
     setOnCellEditingComplete,
     getColDef,
   } = useContext(GridContext);
-  const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  const gridContext = useContext(GridContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
 
@@ -387,23 +387,13 @@ export const Grid = ({
    */
   const startCellEditing = useCallback(
     (event: CellEvent) => {
-      prePopupOps();
-      if (!event.node.isSelected()) {
-        event.node.setSelected(true, true);
-      }
-      // Cell already being edited, so don't re-edit until finished
-      if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
-        return;
-      }
-
-      if (event.rowIndex !== null) {
-        event.api.startEditingCell({
-          rowIndex: event.rowIndex,
-          colKey: event.column.getColId(),
+      event.data.id &&
+        gridContext.startCellEditing({
+          rowId: event.data.id,
+          colId: event.column.getColId(),
         });
-      }
     },
-    [checkUpdating, prePopupOps],
+    [gridContext],
   );
 
   /**
@@ -466,8 +456,9 @@ export const Grid = ({
       columnDefs.map((colDef) => ({
         ...colDef,
         suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex,
+        sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
       })),
-    [columnDefs, sizeColumns],
+    [columnDefs, params.defaultColDef?.sortable, sizeColumns],
   );
 
   /**

package/src/contexts/GridContext.tsx

@@ -39,6 +39,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
   sizeColumnsToFit: () => void;
   cancelEdit: () => void;
+  startCellEditing: ({ rowId, colId }: { rowId: number; colId: string }) => void;
   stopEditing: () => void;
   updatingCells: (
     props: { selectedRows: GridBaseRow[]; field?: string },
@@ -147,6 +148,9 @@ export const GridContext = createContext<GridContextType<any>>({
   cancelEdit: () => {
     console.error("no context provider for cancelEdit");
   },
+  startCellEditing: () => {
+    console.error("no context provider for startCellEditing");
+  },
   stopEditing: () => {
     console.error("no context provider for stopEditing");
   },

package/src/contexts/GridContextProvider.tsx

@@ -21,7 +21,7 @@ interface GridContextProps {
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 export const GridContextProvider = <RowType extends GridBaseRow>(props: GridContextProps): ReactElement => {
-  const { modifyUpdating } = useContext(GridUpdatingContext);
+  const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
   const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
@@ -377,6 +377,42 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     gridApi.stopEditing();
   }, [gridApi]);
 
+  const startCellEditing = useCallback(
+    async ({ rowId, colId }: { rowId: number; colId: string }) => {
+      if (!gridApi) return;
+
+      const colDef = gridApi.getColumnDef(colId);
+      if (!colDef) return;
+
+      prePopupOps();
+      const rowNode = gridApi.getRowNode(`${rowId}`);
+      if (!rowNode) {
+        return;
+      }
+
+      if (!rowNode.isSelected()) {
+        rowNode.setSelected(true, false);
+      }
+
+      // Cell already being edited, so don't re-edit until finished
+      if (checkUpdating([colDef.field ?? ""], rowId)) {
+        return;
+      }
+
+      const rowIndex = rowNode.rowIndex;
+      if (rowIndex != null) {
+        const focusAndEdit = () => {
+          gridApi.startEditingCell({
+            rowIndex,
+            colKey: colId,
+          });
+        };
+        defer(focusAndEdit);
+      }
+    },
+    [checkUpdating, gridApi, prePopupOps],
+  );
+
   /**
    * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
    */
@@ -618,6 +654,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         ensureSelectedRowIsVisible,
         sizeColumnsToFit,
         autoSizeColumns,
+        startCellEditing,
         stopEditing,
         cancelEdit,
         updatingCells,