@linzjs/step-ag-grid 26.0.0 → 26.1.0

package/package.json

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

package/src/components/Grid.tsx

@@ -50,6 +50,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   readOnly?: boolean; // set all editables to false when read only, make all styles black, otherwise style is gray for not editable
   defaultPostSort?: boolean; // Retain sort order after edit, Defaults to true.
   selectable?: boolean;
+  hideSelectColumn?: boolean;
   theme?: string; // should have prefix ag-theme-
   ['data-testid']?: string;
   domLayout?: GridOptions['domLayout'];
@@ -591,6 +592,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     });
   }, []);
 
+  const gridElementRef = useRef<Element>();
   const onRowDragMove = useCallback(
     (event: RowDragMoveEvent) => {
       if (startDragYRef.current === null) {
@@ -601,7 +603,16 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       const data = event.overNode?.data;
       if (data) {
         clearHighlightRowClasses();
-        document.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
+        // Find the grid element, this can only be found on start drag.
+        // Once dragging is no progress the event target is the drag element not the start drag column.
+        const targetEl = event.event.target as Element | undefined;
+        if (targetEl) {
+          const gridElement = targetEl.closest('.ag-body');
+          if (gridElement) {
+            gridElementRef.current = gridElement;
+          }
+        }
+        gridElementRef.current?.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
           el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
         });
       }
@@ -612,6 +623,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const onRowDragEnd = useCallback(
     (event: RowDragEndEvent<TData>) => {
       clearHighlightRowClasses();
+      gridElementRef.current = undefined;
       if (!params.onRowDragEnd || startDragYRef.current === null) {
         return;
       }
@@ -632,6 +644,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   // This is setting a ref in the GridContext so won't be triggering an update loop
   setOnCellEditingComplete(params.onCellEditingComplete);
 
+  const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
   const headerRowCount = columnDefs.some((c) => (c as any).children) ? 2 : 1;
   return (
     <div
@@ -708,9 +721,10 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           pinnedTopRowData={params.pinnedTopRowData}
           pinnedBottomRowData={params.pinnedBottomRowData}
           selectionColumnDef={{
+            suppressNavigable: params.hideSelectColumn,
             rowDrag: !!params.onRowDragEnd,
-            minWidth: selectable && params.onRowDragEnd ? 76 : 48,
-            maxWidth: selectable && params.onRowDragEnd ? 76 : 48,
+            minWidth: selectWidth,
+            maxWidth: selectWidth,
             pinned: selectColumnPinned,
             headerComponentParams: {
               exportable: false,