@optilogic/core 1.3.0 → 1.3.2

package/dist/index.d.cts

@@ -1628,6 +1628,10 @@ 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) */
@@ -1741,6 +1745,7 @@ interface HeaderCellProps$1<T = Record<string, CellValue>> {
     sorting?: SortConfig;
     filter?: FilterConfig;
     isResizable: boolean;
+    fillWidth?: boolean;
     onSort?: () => void;
     onFilterChange?: (filter: FilterConfig | null) => void;
     onResize?: (width: number) => void;
@@ -1786,7 +1791,7 @@ interface GridCellProps<T = Record<string, CellValue>> {
 /**
  * DataGrid Component
  */
-declare function DataGrid<T = Record<string, CellValue>>({ data, columns, getRowKey, resizableColumns, virtualized, stickyHeader, showTooltips, tooltipMinLength, enableKeyboardNavigation, showColumnBorders, enableInternalSorting, enableInternalFiltering, sorting: controlledSorting, onSortChange, filters: controlledFilters, onFilterChange, columnWidths: controlledColumnWidths, onColumnResize, onColumnResizeStart, onColumnResizeEnd, defaultSorting, defaultFilters, defaultColumnWidths, onStateChange, onRowClick, onRowDoubleClick, selectedRows, onSelectedRowsChange, rowClassName, onCellEdit, onCellEditStart, onCellEditCancel, focusedCell: controlledFocusedCell, onFocusedCellChange, pagination, search, loading, loadingComponent, emptyMessage, emptyComponent, className, tableClassName, infiniteScroll, onLoadMore, hasMore, loadingMore, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataGrid<T = Record<string, CellValue>>({ data, columns, getRowKey, resizableColumns, virtualized, stickyHeader, showTooltips, tooltipMinLength, enableKeyboardNavigation, showColumnBorders, fillWidth, enableInternalSorting, enableInternalFiltering, sorting: controlledSorting, onSortChange, filters: controlledFilters, onFilterChange, columnWidths: controlledColumnWidths, onColumnResize, onColumnResizeStart, onColumnResizeEnd, defaultSorting, defaultFilters, defaultColumnWidths, onStateChange, onRowClick, onRowDoubleClick, selectedRows, onSelectedRowsChange, rowClassName, onCellEdit, onCellEditStart, onCellEditCancel, focusedCell: controlledFocusedCell, onFocusedCellChange, pagination, search, loading, loadingComponent, emptyMessage, emptyComponent, className, tableClassName, infiniteScroll, onLoadMore, hasMore, loadingMore, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
 
 interface HeaderCellProps<T = any> {
     /** Column definition */
@@ -1801,6 +1806,8 @@ 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 */
@@ -1815,7 +1822,7 @@ interface HeaderCellProps<T = any> {
 /**
  * HeaderCell Component
  */
-declare function HeaderCell<T = any>({ column, columnIndex, width, sorting, filter, isResizable, onSort, onFilterChange, onResizeMouseDown, onResizeDoubleClick, isResizing, }: HeaderCellProps<T>): react_jsx_runtime.JSX.Element;
+declare function HeaderCell<T = any>({ column, columnIndex, width, sorting, filter, isResizable, fillWidth, onSort, onFilterChange, onResizeMouseDown, onResizeDoubleClick, isResizing, }: HeaderCellProps<T>): react_jsx_runtime.JSX.Element;
 
 interface FilterPopoverProps<T = Record<string, CellValue>> {
     /** Column definition */
@@ -2019,6 +2026,12 @@ 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>;
 }
 interface UseColumnResizeManagerReturn {
     /** Currently resizing column key */

package/dist/index.d.ts

@@ -1628,6 +1628,10 @@ 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) */
@@ -1741,6 +1745,7 @@ interface HeaderCellProps$1<T = Record<string, CellValue>> {
     sorting?: SortConfig;
     filter?: FilterConfig;
     isResizable: boolean;
+    fillWidth?: boolean;
     onSort?: () => void;
     onFilterChange?: (filter: FilterConfig | null) => void;
     onResize?: (width: number) => void;
@@ -1786,7 +1791,7 @@ interface GridCellProps<T = Record<string, CellValue>> {
 /**
  * DataGrid Component
  */
-declare function DataGrid<T = Record<string, CellValue>>({ data, columns, getRowKey, resizableColumns, virtualized, stickyHeader, showTooltips, tooltipMinLength, enableKeyboardNavigation, showColumnBorders, enableInternalSorting, enableInternalFiltering, sorting: controlledSorting, onSortChange, filters: controlledFilters, onFilterChange, columnWidths: controlledColumnWidths, onColumnResize, onColumnResizeStart, onColumnResizeEnd, defaultSorting, defaultFilters, defaultColumnWidths, onStateChange, onRowClick, onRowDoubleClick, selectedRows, onSelectedRowsChange, rowClassName, onCellEdit, onCellEditStart, onCellEditCancel, focusedCell: controlledFocusedCell, onFocusedCellChange, pagination, search, loading, loadingComponent, emptyMessage, emptyComponent, className, tableClassName, infiniteScroll, onLoadMore, hasMore, loadingMore, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataGrid<T = Record<string, CellValue>>({ data, columns, getRowKey, resizableColumns, virtualized, stickyHeader, showTooltips, tooltipMinLength, enableKeyboardNavigation, showColumnBorders, fillWidth, enableInternalSorting, enableInternalFiltering, sorting: controlledSorting, onSortChange, filters: controlledFilters, onFilterChange, columnWidths: controlledColumnWidths, onColumnResize, onColumnResizeStart, onColumnResizeEnd, defaultSorting, defaultFilters, defaultColumnWidths, onStateChange, onRowClick, onRowDoubleClick, selectedRows, onSelectedRowsChange, rowClassName, onCellEdit, onCellEditStart, onCellEditCancel, focusedCell: controlledFocusedCell, onFocusedCellChange, pagination, search, loading, loadingComponent, emptyMessage, emptyComponent, className, tableClassName, infiniteScroll, onLoadMore, hasMore, loadingMore, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
 
 interface HeaderCellProps<T = any> {
     /** Column definition */
@@ -1801,6 +1806,8 @@ 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 */
@@ -1815,7 +1822,7 @@ interface HeaderCellProps<T = any> {
 /**
  * HeaderCell Component
  */
-declare function HeaderCell<T = any>({ column, columnIndex, width, sorting, filter, isResizable, onSort, onFilterChange, onResizeMouseDown, onResizeDoubleClick, isResizing, }: HeaderCellProps<T>): react_jsx_runtime.JSX.Element;
+declare function HeaderCell<T = any>({ column, columnIndex, width, sorting, filter, isResizable, fillWidth, onSort, onFilterChange, onResizeMouseDown, onResizeDoubleClick, isResizing, }: HeaderCellProps<T>): react_jsx_runtime.JSX.Element;
 
 interface FilterPopoverProps<T = Record<string, CellValue>> {
     /** Column definition */
@@ -2019,6 +2026,12 @@ 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>;
 }
 interface UseColumnResizeManagerReturn {
     /** Currently resizing column key */

package/dist/index.js

@@ -3434,6 +3434,7 @@ function HeaderCell({
   sorting,
   filter,
   isResizable,
+  fillWidth,
   onSort,
   onFilterChange,
   onResizeMouseDown,
@@ -3477,7 +3478,8 @@ function HeaderCell({
     "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"
       ),
@@ -4417,11 +4419,15 @@ function useColumnResizeManager(options) {
     resizableColumns,
     onColumnResize,
     onColumnResizeStart,
-    onColumnResizeEnd
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths
   } = options;
   const [resizingColumn, setResizingColumn] = useState(null);
   const startXRef = useRef(0);
   const startWidthRef = useRef(0);
+  const startEffectiveWidthsRef = useRef({});
   const getColumn = useCallback(
     (columnKey) => {
       return columns.find((c) => c.key === columnKey);
@@ -4445,9 +4451,20 @@ function useColumnResizeManager(options) {
         resizingColumn,
         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]
   );
   const handleMouseUp = useCallback(() => {
     if (!resizingColumn) return;
@@ -4481,6 +4498,9 @@ function useColumnResizeManager(options) {
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         onColumnResizeStart?.(columnKey);
+        if (fillWidth && effectiveColumnWidths) {
+          startEffectiveWidthsRef.current = { ...effectiveColumnWidths };
+        }
       };
       const handleDoubleClick = (event) => {
         if (!isResizable) return;
@@ -4506,7 +4526,9 @@ function useColumnResizeManager(options) {
       resizingColumn,
       onColumnResize,
       onColumnResizeStart,
-      onColumnResizeEnd
+      onColumnResizeEnd,
+      fillWidth,
+      effectiveColumnWidths
     ]
   );
   return {
@@ -4731,6 +4753,7 @@ function DataGrid({
   tooltipMinLength = 30,
   enableKeyboardNavigation = true,
   showColumnBorders = true,
+  fillWidth,
   enableInternalSorting = true,
   enableInternalFiltering = true,
   // Controlled sorting
@@ -4785,6 +4808,26 @@ function DataGrid({
   const headerRef = React20.useRef(null);
   const [headerHeight, setHeaderHeight] = React20.useState(40);
   const [hoveredCell, setHoveredCell] = React20.useState(null);
+  const [containerWidth, setContainerWidth] = React20.useState(0);
+  const fillWidthObserverRef = React20.useRef(null);
+  const parentCallbackRef = React20.useCallback(
+    (node) => {
+      fillWidthObserverRef.current?.disconnect();
+      fillWidthObserverRef.current = null;
+      parentRef.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]
+  );
+  React20.useEffect(() => {
+    return () => fillWidthObserverRef.current?.disconnect();
+  }, []);
   const visibleColumns = React20.useMemo(
     () => columns.filter((col) => !col.hidden),
     [columns]
@@ -4838,14 +4881,6 @@ function DataGrid({
     visibleColumns
   ]);
   processedDataRef.current = processedData;
-  const { resizingColumn, getResizeProps } = useColumnResizeManager({
-    columns: visibleColumns,
-    columnWidths: state.columnWidths,
-    resizableColumns,
-    onColumnResize: actions.setColumnWidth,
-    onColumnResizeStart,
-    onColumnResizeEnd
-  });
   const shouldVirtualize = virtualized ?? processedData.length > 100;
   React20.useLayoutEffect(() => {
     if (headerRef.current && shouldVirtualize) {
@@ -4859,12 +4894,38 @@ function DataGrid({
     overscan: DEFAULT_OVERSCAN,
     enabled: shouldVirtualize
   });
-  const tableWidth = React20.useMemo(() => {
-    return visibleColumns.reduce((acc, col) => {
-      const width = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
-      return acc + width;
-    }, 0);
-  }, [visibleColumns, state.columnWidths]);
+  const { tableWidth, effectiveColumnWidths } = React20.useMemo(() => {
+    const rawWidths = {};
+    let rawTotal = 0;
+    for (const col of visibleColumns) {
+      const w = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
+      rawWidths[col.key] = w;
+      rawTotal += w;
+    }
+    if (!fillWidth || !containerWidth || rawTotal >= containerWidth) {
+      return { tableWidth: rawTotal, effectiveColumnWidths: rawWidths };
+    }
+    const scale = containerWidth / rawTotal;
+    const scaled = {};
+    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]);
+  const { resizingColumn, getResizeProps } = useColumnResizeManager({
+    columns: visibleColumns,
+    columnWidths: state.columnWidths,
+    resizableColumns,
+    onColumnResize: actions.setColumnWidth,
+    onColumnResizeStart,
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths
+  });
   const visibleRowCount = React20.useMemo(() => {
     if (!parentRef.current) return 10;
     return Math.floor(parentRef.current.clientHeight / DEFAULT_ROW_HEIGHT);
@@ -5069,7 +5130,7 @@ function DataGrid({
           /* @__PURE__ */ jsx(
             "div",
             {
-              ref: parentRef,
+              ref: parentCallbackRef,
               className: "flex-1 overflow-auto bg-background relative w-full min-h-0 max-h-full",
               style: { contain: "strict" },
               children: /* @__PURE__ */ jsxs(
@@ -5096,7 +5157,7 @@ function DataGrid({
                         },
                         role: "row",
                         children: 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 /* @__PURE__ */ jsx(
                             HeaderCell,
@@ -5107,6 +5168,7 @@ function DataGrid({
                               sorting: getColumnSort(column.key),
                               filter: getColumnFilter(column.key),
                               isResizable: resizableColumns && column.resizable !== false,
+                              fillWidth,
                               onSort: () => handleSort(column.key),
                               onFilterChange: (filter) => handleFilterChange(column.key, filter),
                               onResizeMouseDown: resizeProps.handleMouseDown,
@@ -5155,7 +5217,7 @@ function DataGrid({
                           "aria-rowindex": virtualRow.index + 1,
                           "aria-selected": isSelected,
                           children: visibleColumns.map((column, colIndex) => {
-                            const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                            const width = effectiveColumnWidths[column.key];
                             const isEditingThisCell = state.editingCell?.rowIndex === virtualRow.index && state.editingCell?.columnKey === column.key;
                             const isFocused = state.focusedCell?.rowIndex === virtualRow.index && state.focusedCell?.columnKey === column.key;
                             const cellContent = renderCell(
@@ -5170,7 +5232,8 @@ function DataGrid({
                               "div",
                               {
                                 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",
@@ -5282,7 +5345,7 @@ function DataGrid({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto min-h-0", children: [
+        /* @__PURE__ */ jsxs("div", { ref: parentCallbackRef, className: "flex-1 overflow-auto min-h-0", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -5293,7 +5356,7 @@ function DataGrid({
               style: { width: tableWidth ? `${tableWidth}px` : "100%" },
               role: "row",
               children: 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 /* @__PURE__ */ jsx(
                   HeaderCell,
@@ -5304,6 +5367,7 @@ function DataGrid({
                     sorting: getColumnSort(column.key),
                     filter: getColumnFilter(column.key),
                     isResizable: resizableColumns && column.resizable !== false,
+                    fillWidth,
                     onSort: () => handleSort(column.key),
                     onFilterChange: (filter) => handleFilterChange(column.key, filter),
                     onResizeMouseDown: resizeProps.handleMouseDown,
@@ -5333,14 +5397,15 @@ function DataGrid({
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
                 role: "row",
                 children: 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;
                   const isFocused = state.focusedCell?.rowIndex === rowIndex && state.focusedCell?.columnKey === column.key;
                   return /* @__PURE__ */ jsx(
                     "div",
                     {
                       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",