@linzjs/step-ag-grid 29.2.3 → 29.2.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.2.3",
+  "version": "29.2.4",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -83,7 +83,7 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@linzjs/lui": "^23.11.1",
     "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^5.5.1",
+    "@linzjs/windows": "^5.6.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",

package/src/components/Grid.tsx

@@ -27,7 +27,7 @@ import {
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import clsx from 'clsx';
-import { defer, difference, isEmpty, last, omit, xorBy } from 'lodash-es';
+import { defer, difference, isEmpty, last, omit, sum, xorBy } from 'lodash-es';
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 
@@ -35,6 +35,7 @@ import { useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
 import { fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
+import { ColDefT } from './GridCell';
 import { GridHeaderSelect } from './gridHeader';
 import { GridContextMenuComponent, useGridContextMenu } from './gridHook';
 import { GridNoRowsOverlay } from './GridNoRowsOverlay';
@@ -99,6 +100,10 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
    * If you want to stretch to container width if width is greater than the container add a flex column.
    */
   sizeColumns?: 'fit' | 'auto' | 'auto-skip-headers' | 'none';
+  /**
+   * On first don't return a content size larger than this.
+   */
+  maxInitialWidth?: number;
   /**
    * When pressing tab whilst editing the grid will select and edit the next cell if available.
    * Once the last cell to edit closes this callback is called.
@@ -145,6 +150,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   selectable,
   onCellFocused: paramsOnCellFocused,
+  maxInitialWidth,
   ...params
 }: GridProps<TData>): ReactElement => {
   const {
@@ -215,6 +221,11 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         needsAutoSize.current = true;
         return;
       }
+      // Default max intial width is 256x initial visible column count, max of 80% window width
+      const maxWidth =
+        maxInitialWidth ||
+        sum(params.columnDefs.map((c: ColDefT<TData>) => (!(c as any).hide ? c.maxInitialWidth || 128 : 0)));
+      result.width = Math.min(result.width, maxWidth);
       if (gridRendered === 'empty') {
         if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
           hasSetContentSizeEmpty.current = true;
@@ -241,7 +252,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     }
     setAutoSized(true);
     needsAutoSize.current = false;
-  }, [autoSizeColumns, gridRenderState, params, rowData, sizeColumns, sizeColumnsToFit]);
+  }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
 
   const lastOwnerDocumentRef = useRef<Document>();
   const wasVisibleRef = useRef(false);

package/src/components/GridCell.tsx

@@ -71,6 +71,7 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
   editable?: boolean | EditableCallback<TData, ValueType>;
   valueGetter?: string | ValueGetterFunc<TData, ValueType>;
   valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
+  maxInitialWidth?: number;
   cellRenderer?:
     | ((props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
     | string;

package/src/contexts/GridContext.tsx

@@ -1,4 +1,4 @@
-import { ColDef, GridApi, IRowNode } from 'ag-grid-community';
+import { ColDef, GridApi, IRowNode, ISizeColumnsToFitParams } from 'ag-grid-community';
 import { CsvExportParams } from 'ag-grid-community';
 import { createContext, useContext } from 'react';
 
@@ -47,7 +47,7 @@ export interface GridContextType<TData extends GridBaseRow> {
   ensureSelectedRowIsVisible: () => void;
   getFirstRowId: () => number;
   autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
-  sizeColumnsToFit: () => void;
+  sizeColumnsToFit: (paramsOrGridWidth?: ISizeColumnsToFitParams) => void;
   startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
   // Restores the previous focus after cell editing
   resetFocusedCellAfterCellEditing: () => void;

package/src/contexts/GridContextProvider.tsx

@@ -4,6 +4,7 @@ import {
   CsvExportParams,
   GridApi,
   IRowNode,
+  ISizeColumnsToFitParams,
   ProcessCellForExportParams,
   RowNode,
 } from 'ag-grid-community';
@@ -455,11 +456,14 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   /**
    * Resize columns to fit container
    */
-  const sizeColumnsToFit = useCallback((): void => {
-    if (gridApi && !gridApi?.isDestroyed()) {
-      gridApi.sizeColumnsToFit();
-    }
-  }, [gridApi]);
+  const sizeColumnsToFit = useCallback(
+    (paramsOrGridWidth?: ISizeColumnsToFitParams): void => {
+      if (gridApi && !gridApi?.isDestroyed()) {
+        gridApi.sizeColumnsToFit(paramsOrGridWidth);
+      }
+    },
+    [gridApi],
+  );
 
   /**
    *

package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx

@@ -71,7 +71,7 @@ interface ITestRow {
 // Note: Resize can only be used from within the panel content.
 export const PanelContentsWithResize = () => {
   // This is the first important bit
-  const { resizePanel } = useContext(PanelContext);
+  const { initialResizePanel } = useContext(PanelContext);
 
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
@@ -151,7 +151,13 @@ export const PanelContentsWithResize = () => {
   const [rowData] = useState([
     /* Your grid row data */
     /* exclude */
-    { id: 1000, position: 'Tester', age: 30, desc: 'Tests application', dd: '1' },
+    {
+      id: 1000,
+      position: 'Tester',
+      age: 30,
+      desc: 'Tests application',
+      dd: '1',
+    },
     { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
     { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
     /* exclude */
@@ -161,7 +167,12 @@ export const PanelContentsWithResize = () => {
     <GridUpdatingContextProvider>
       <GridContextProvider>
         <GridWrapper>
-          <Grid columnDefs={columnDefs} rowData={rowData} onContentSize={resizePanel} />
+          <Grid
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onContentSize={initialResizePanel}
+            sizeColumns={'auto-skip-headers'}
+          />
         </GridWrapper>
       </GridContextProvider>
     </GridUpdatingContextProvider>