@optilogic/core 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/data-grid/DataGrid.tsx

@@ -89,6 +89,7 @@ export function DataGrid<T = Record<string, CellValue>>({
   tooltipMinLength = 30,
   enableKeyboardNavigation = true,
   showColumnBorders = true,
+  fillWidth,
   enableInternalSorting = true,
   enableInternalFiltering = true,
 
@@ -163,6 +164,33 @@ export function DataGrid<T = Record<string, CellValue>>({
     y: number;
   } | null>(null);
 
+  // Measure container width for fillWidth mode
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const fillWidthObserverRef = React.useRef<ResizeObserver | null>(null);
+
+  const parentCallbackRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      fillWidthObserverRef.current?.disconnect();
+      fillWidthObserverRef.current = null;
+
+      (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+
+      if (!fillWidth || !node) return;
+
+      const observer = new ResizeObserver((entries) => {
+        const w = entries[0]?.contentRect.width;
+        if (w && w > 0) setContainerWidth(w);
+      });
+      observer.observe(node);
+      fillWidthObserverRef.current = observer;
+    },
+    [fillWidth],
+  );
+
+  React.useEffect(() => {
+    return () => fillWidthObserverRef.current?.disconnect();
+  }, []);
+
   // Filter visible columns
   const visibleColumns = React.useMemo(
     () => columns.filter((col) => !col.hidden),
@@ -232,16 +260,6 @@ export function DataGrid<T = Record<string, CellValue>>({
   // Keep the state hook's ref in sync so editing resolves the correct row
   processedDataRef.current = processedData;
 
-  // Use column resize manager
-  const { resizingColumn, getResizeProps } = useColumnResizeManager({
-    columns: visibleColumns,
-    columnWidths: state.columnWidths,
-    resizableColumns,
-    onColumnResize: actions.setColumnWidth,
-    onColumnResizeStart,
-    onColumnResizeEnd,
-  });
-
   // Auto-enable virtualization for large datasets
   const shouldVirtualize = virtualized ?? processedData.length > 100;
 
@@ -261,13 +279,47 @@ export function DataGrid<T = Record<string, CellValue>>({
     enabled: shouldVirtualize,
   });
 
-  // Calculate table width - prefer explicit widths, fall back to estimated width from header
-  const tableWidth = React.useMemo(() => {
-    return visibleColumns.reduce((acc, col) => {
-      const width = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
-      return acc + width;
-    }, 0);
-  }, [visibleColumns, state.columnWidths]);
+  // Calculate table width and effective column widths (with fillWidth scaling)
+  const { tableWidth, effectiveColumnWidths } = React.useMemo(() => {
+    // 1. Collect raw widths
+    const rawWidths: Record<string, number> = {};
+    let rawTotal = 0;
+    for (const col of visibleColumns) {
+      const w = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
+      rawWidths[col.key] = w;
+      rawTotal += w;
+    }
+
+    // 2. If fillWidth off or container not measured, use raw widths
+    if (!fillWidth || !containerWidth || rawTotal >= containerWidth) {
+      return { tableWidth: rawTotal, effectiveColumnWidths: rawWidths };
+    }
+
+    // 3. Scale proportionally to fill container, respecting minWidth/maxWidth
+    const scale = containerWidth / rawTotal;
+    const scaled: Record<string, number> = {};
+    for (const col of visibleColumns) {
+      let w = Math.floor(rawWidths[col.key] * scale);
+      if (col.minWidth) w = Math.max(w, col.minWidth);
+      if (col.maxWidth) w = Math.min(w, col.maxWidth);
+      scaled[col.key] = w;
+    }
+
+    return { tableWidth: containerWidth, effectiveColumnWidths: scaled };
+  }, [visibleColumns, state.columnWidths, fillWidth, containerWidth]);
+
+  // Use column resize manager
+  const { resizingColumn, getResizeProps } = useColumnResizeManager({
+    columns: visibleColumns,
+    columnWidths: state.columnWidths,
+    resizableColumns,
+    onColumnResize: actions.setColumnWidth,
+    onColumnResizeStart,
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths,
+  });
 
   // Get visible row count for keyboard navigation
   const visibleRowCount = React.useMemo(() => {
@@ -551,7 +603,7 @@ export function DataGrid<T = Record<string, CellValue>>({
         )}
 
         <div
-          ref={parentRef}
+          ref={parentCallbackRef}
           className="flex-1 overflow-auto bg-background relative w-full min-h-0 max-h-full"
           style={{ contain: "strict" }}
         >
@@ -577,7 +629,7 @@ export function DataGrid<T = Record<string, CellValue>>({
               role="row"
             >
               {visibleColumns.map((column, colIndex) => {
-                const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                const width = effectiveColumnWidths[column.key];
                 const resizeProps = getResizeProps(column.key);
 
                 return (
@@ -591,6 +643,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                     isResizable={
                       resizableColumns && column.resizable !== false
                     }
+                    fillWidth={fillWidth}
                     onSort={() => handleSort(column.key)}
                     onFilterChange={(filter) =>
                       handleFilterChange(column.key, filter)
@@ -646,7 +699,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                 >
                   {visibleColumns.map((column, colIndex) => {
                     const width =
-                      state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                      effectiveColumnWidths[column.key];
                     const isEditingThisCell =
                       state.editingCell?.rowIndex === virtualRow.index &&
                       state.editingCell?.columnKey === column.key;
@@ -671,7 +724,8 @@ export function DataGrid<T = Record<string, CellValue>>({
                         <div
                           key={column.key}
                           className={cn(
-                            "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                            "px-3 py-2 text-sm overflow-hidden",
+                            !fillWidth && "flex-shrink-0",
                             showColumnBorders && "border-r border-border last:border-r-0",
                             isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                             isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
@@ -799,7 +853,7 @@ export function DataGrid<T = Record<string, CellValue>>({
         </div>
       )}
 
-      <div className="flex-1 overflow-auto min-h-0">
+      <div ref={parentCallbackRef} className="flex-1 overflow-auto min-h-0">
         {/* Header row using HeaderCell for consistent features */}
         <div
           className={cn(
@@ -810,7 +864,7 @@ export function DataGrid<T = Record<string, CellValue>>({
           role="row"
         >
           {visibleColumns.map((column, colIndex) => {
-            const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+            const width = effectiveColumnWidths[column.key];
             const resizeProps = getResizeProps(column.key);
 
             return (
@@ -822,6 +876,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                 sorting={getColumnSort(column.key)}
                 filter={getColumnFilter(column.key)}
                 isResizable={resizableColumns && column.resizable !== false}
+                fillWidth={fillWidth}
                 onSort={() => handleSort(column.key)}
                 onFilterChange={(filter) => handleFilterChange(column.key, filter)}
                 onResizeMouseDown={resizeProps.handleMouseDown}
@@ -853,7 +908,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                 role="row"
               >
                 {visibleColumns.map((column) => {
-                  const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                  const width = effectiveColumnWidths[column.key];
                   const isEditingThisCell =
                     state.editingCell?.rowIndex === rowIndex &&
                     state.editingCell?.columnKey === column.key;
@@ -865,7 +920,8 @@ export function DataGrid<T = Record<string, CellValue>>({
                     <div
                       key={column.key}
                       className={cn(
-                        "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                        "px-3 py-2 text-sm overflow-hidden",
+                        !fillWidth && "flex-shrink-0",
                         showColumnBorders && "border-r border-border last:border-r-0",
                         isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                         isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",

package/src/components/data-grid/components/HeaderCell.tsx

@@ -28,6 +28,8 @@ export interface HeaderCellProps<T = any> {
   filter?: FilterConfig;
   /** Whether this column is resizable */
   isResizable: boolean;
+  /** Whether fillWidth mode is active */
+  fillWidth?: boolean;
   /** Callback when sort is toggled */
   onSort?: () => void;
   /** Callback when filter changes */
@@ -50,6 +52,7 @@ export function HeaderCell<T = any>({
   sorting,
   filter,
   isResizable,
+  fillWidth,
   onSort,
   onFilterChange,
   onResizeMouseDown,
@@ -101,7 +104,8 @@ export function HeaderCell<T = any>({
   return (
     <div
       className={cn(
-        "relative flex-shrink-0 border-r border-border last:border-r-0",
+        "relative border-r border-border last:border-r-0",
+        !fillWidth && "flex-shrink-0",
         "bg-muted select-none",
         isResizing && "bg-accent/20"
       )}

package/src/components/data-grid/hooks/useColumnResize.ts

@@ -212,6 +212,12 @@ export interface UseColumnResizeManagerOptions<T = any> {
   onColumnResizeStart?: (columnKey: string) => void;
   /** Callback when resize ends */
   onColumnResizeEnd?: (columnKey: string, width: number) => void;
+  /** Whether fillWidth mode is active */
+  fillWidth?: boolean;
+  /** Measured container width for fillWidth redistribution */
+  containerWidth?: number;
+  /** Effective column widths (after fillWidth scaling) */
+  effectiveColumnWidths?: Record<string, number>;
 }
 
 export interface UseColumnResizeManagerReturn {
@@ -238,11 +244,15 @@ export function useColumnResizeManager<T = any>(
     onColumnResize,
     onColumnResizeStart,
     onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths,
   } = options;
 
   const [resizingColumn, setResizingColumn] = useState<string | null>(null);
   const startXRef = useRef(0);
   const startWidthRef = useRef(0);
+  const startEffectiveWidthsRef = useRef<Record<string, number>>({});
 
   /**
    * Get column by key
@@ -280,9 +290,22 @@ export function useColumnResizeManager<T = any>(
         startWidthRef.current + deltaX
       );
 
+      if (fillWidth && containerWidth) {
+        const otherCols = columns.filter(c => c.key !== resizingColumn);
+        const startEffective = startEffectiveWidthsRef.current;
+        const otherTotal = otherCols.reduce((s, c) => s + (startEffective[c.key] || 0), 0);
+        const remaining = containerWidth - newWidth;
+
+        for (const col of otherCols) {
+          const proportion = (startEffective[col.key] || 0) / otherTotal;
+          const adjusted = clampWidth(col.key, Math.floor(remaining * proportion));
+          onColumnResize(col.key, adjusted);
+        }
+      }
+
       onColumnResize(resizingColumn, newWidth);
     },
-    [resizingColumn, clampWidth, onColumnResize]
+    [resizingColumn, clampWidth, onColumnResize, fillWidth, containerWidth, columns]
   );
 
   /**
@@ -336,6 +359,10 @@ export function useColumnResizeManager<T = any>(
         document.body.style.cursor = "col-resize";
 
         onColumnResizeStart?.(columnKey);
+
+        if (fillWidth && effectiveColumnWidths) {
+          startEffectiveWidthsRef.current = { ...effectiveColumnWidths };
+        }
       };
 
       const handleDoubleClick = (event: React.MouseEvent) => {
@@ -368,6 +395,8 @@ export function useColumnResizeManager<T = any>(
       onColumnResize,
       onColumnResizeStart,
       onColumnResizeEnd,
+      fillWidth,
+      effectiveColumnWidths,
     ]
   );
 

package/src/components/data-grid/types.ts

@@ -282,6 +282,10 @@ export interface DataGridProps<T = Record<string, CellValue>> {
   tooltipMinLength?: number;
   /** Show column dividing borders between cells (default: true) */
   showColumnBorders?: boolean;
+  /** When true, columns scale proportionally to fill the container width.
+   *  Columns shrink/grow to keep total width = container width.
+   *  Horizontal scroll only kicks in if columns hit their minWidth constraints. */
+  fillWidth?: boolean;
   /** Enable internal sorting when in uncontrolled mode (default: true) */
   enableInternalSorting?: boolean;
   /** Enable internal filtering when in uncontrolled mode (default: true) */
@@ -436,6 +440,7 @@ export interface HeaderCellProps<T = Record<string, CellValue>> {
   sorting?: SortConfig;
   filter?: FilterConfig;
   isResizable: boolean;
+  fillWidth?: boolean;
   onSort?: () => void;
   onFilterChange?: (filter: FilterConfig | null) => void;
   onResize?: (width: number) => void;